ExamplesPlaygroundReference Source

coral-spectrum/coral-component-list/src/scripts/AnchorListItem.js

  1. /**
  2. * Copyright 2019 Adobe. All rights reserved.
  3. * This file is licensed to you under the Apache License, Version 2.0 (the "License");
  4. * you may not use this file except in compliance with the License. You may obtain a copy
  5. * of the License at http://www.apache.org/licenses/LICENSE-2.0
  6. *
  7. * Unless required by applicable law or agreed to in writing, software distributed under
  8. * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
  9. * OF ANY KIND, either express or implied. See the License for the specific language
  10. * governing permissions and limitations under the License.
  11. */
  12.  
  13. import {BaseComponent} from '../../../coral-base-component';
  14. import {BaseListItem} from '../../../coral-base-list';
  15. import {Decorator} from '../../../coral-decorator';
  16.  
  17. const CLASSNAME = '_coral-AnchorList-item';
  18.  
  19. /**
  20. @class Coral.AnchorList.Item
  21. @classdesc An AnchorList item component
  22. @htmltag coral-anchorlist-item
  23. @extends {HTMLAnchorElement}
  24. @extends {BaseComponent}
  25. @extends {BaseListItem}
  26. */
  27. const AnchorListItem = Decorator(class extends BaseListItem(BaseComponent(HTMLAnchorElement)) {
  28. /** @ignore */
  29. constructor() {
  30. super();
  31.  
  32. // Events
  33. this._delegateEvents({
  34. click: '_onClick'
  35. });
  36. }
  37.  
  38. /**
  39. Whether this field is disabled or not.
  40. @type {Boolean}
  41. @default false
  42. @htmlattribute disabled
  43. @htmlattributereflected
  44. */
  45. get disabled() {
  46. return super.disabled;
  47. }
  48.  
  49. set disabled(value) {
  50. super.disabled = value;
  51.  
  52. if (this.disabled) {
  53. // It's not tabbable anymore
  54. this.setAttribute('tabindex', '-1');
  55. } else {
  56. // Now it's tabbable
  57. this.setAttribute('tabindex', '0');
  58. }
  59. }
  60.  
  61. /**
  62. Inherited from {@link BaseComponent#trackingElement}.
  63. */
  64. get trackingElement() {
  65. return typeof this._trackingElement === 'undefined' ?
  66. // keep spaces to only 1 max and trim. this mimics native html behaviors
  67. (this.content || this).textContent.replace(/\s{2,}/g, ' ').trim() :
  68. this._trackingElement;
  69. }
  70.  
  71. set trackingElement(value) {
  72. super.trackingElement = value;
  73. }
  74.  
  75. /** @private */
  76. _onClick(event) {
  77. // Support disabled property
  78. if (this.disabled) {
  79. event.preventDefault();
  80. }
  81. }
  82.  
  83. /** @ignore */
  84. render() {
  85. super.render();
  86.  
  87. this.classList.add(CLASSNAME);
  88. }
  89. });
  90.  
  91. export default AnchorListItem;