Source: audio.js

  1. /**
  2. * Audio Component<BR>
  3. * <BR><BR><img src=../img/audio.png width=50% style="border:1px lime dashed;padding:20px">
  4. * <BR><BR><a href="../html/audio.html">DEMO</a>
  5. */
  6. class Audio extends HTMLElement {
  7. // http://tympanus.net/codrops/2012/12/04/responsive-touch-friendly-audio-player
  8. constructor() {
  9. wc.group("Audio.constructor")
  10. super();
  11. wc.groupEnd();
  12. };
  13. /**
  14. * Set observable values here. When Changed, attributeChangedCallback is invoked
  15. * @observedAttributes
  16. */
  17. static get observedAttributes() {
  18. wc.group("Audio.observedAttributes");
  19. this.observables = [];
  20. wc.groupEnd();
  21. return this.observables;
  22. };
  23. /**
  24. * This function is called when this is attached to DOM
  25. * @connectedCallback.
  26. */
  27. connectedCallback() {
  28. wc.group("Audio.connectedCallback")
  29. let self = this;
  30. // GET PROPERTIES AND INTERESTING ELEMENTS
  31. this._initialize();
  32. // REPLACE CONTENT FROM TEMPLATE
  33. this.innerHTML = `<audio preload="auto" controls>${this.dom.content}</audio>`
  34. $(function() {
  35. $('audio').audioPlayer();
  36. });
  37. // ADD STATS AND OTHER FINAL STUFF
  38. this._finalize();
  39. wc.groupEnd();
  40. };
  41. /**
  42. * Called with .setAttribute(...) function call
  43. * @attributeChangedCallback
  44. */
  45. attributeChangedCallback(attr, oldval, newval) {
  46. wc.group("Audio.attributeChangedCallback:", attr, oldval, newval);
  47. this.properties = this.properties || [];
  48. let obs = Audio.observedAttributes;
  49. for (let i = 0; i < obs.length; i++) {
  50. if (newval) {
  51. this.properties[obs[i]] = newval;
  52. }
  53. }
  54. // YOUR CODE FOR CHANGES GO HERE (MAYBE NULL FIRST TIME THROUGH)
  55. try {
  56. switch(attr)
  57. {
  58. case "header":
  59. break;
  60. }
  61. } catch(e) {
  62. wc.warn(e.name + ' > ' + e.message);
  63. }
  64. wc.groupEnd();
  65. };
  66. /**
  67. * Stores DOM elements of interest for future use
  68. * @private
  69. * @_fetchElements
  70. */
  71. _fetchElements() {
  72. wc.group("Audio._fetchElements");
  73. this.dom = this.dom || [];
  74. this.dom.content = this.innerHTML;
  75. wc.groupEnd();
  76. };
  77. /**
  78. * Component attributes are _fetched and defaults are set if undefined
  79. * @private
  80. * @_fetchAttributes
  81. */
  82. _fetchAttributes() {
  83. wc.group("Audio._fetchAttributes");
  84. this.properties = {
  85. cname : "Audio",
  86. author : "Mel Heravi",
  87. version : "1.0",
  88. src : null
  89. };
  90. // SAVE WIDGET SPECIFIC PROPERTIES
  91. this.propertiesW = [];
  92. // SAVE ALL OTHER PROPERTIES
  93. let attrs = wc.getAttributes(this)
  94. for (var key in attrs) {
  95. let attr = this.getAttribute(key) || this.properties.key;
  96. this.properties[key] = this.getAttribute(key);
  97. this.propertiesW[key] = this.getAttribute(key);
  98. wc.log(key + ": " + attrs[key]);
  99. }
  100. // SET ALL INITIAL ATTRIBUTES
  101. for (var key in this.properties) {
  102. switch(key)
  103. {
  104. default:
  105. break;
  106. }
  107. }
  108. wc.log("ATTRIBUTES: ", this.properties);
  109. wc.groupEnd();
  110. };
  111. /**
  112. * Destroy the instance object and artifacts
  113. * @destroy
  114. */
  115. destroy() {
  116. wc.group("Audio.destroy:", this.id);
  117. // FREE ALL MEMORY
  118. // you should delete all created objects here
  119. // FREE POINTER
  120. delete this;
  121. // REMOVE ITEM FROM DOM
  122. this.parentNode.removeChild(this);
  123. wc.groupEnd();
  124. };
  125. /**
  126. * configure the instance object and artifacts
  127. * @configure
  128. */
  129. configure(options) {
  130. wc.group("Audio.configure:", JSON.stringify(options));
  131. // PROCESS ALL OPTIONS HERE
  132. wc.groupEnd();
  133. };
  134. /**
  135. * SAVE DATA FOR ANALYTICS
  136. * @private
  137. * @_initialize
  138. */
  139. _initialize() {
  140. wc.group("Audio._initialize:", this.id);
  141. // FETCH ALL INTERESTING ELEMENTS
  142. this._fetchElements();
  143. // FETCH ALL ATTRIBUTES
  144. this._fetchAttributes();
  145. wc.groupEnd();
  146. };
  147. /**
  148. * SAVE DATA FOR ANALYTICS
  149. * @private
  150. * @_finalize
  151. */
  152. _finalize() {
  153. wc.group("Audio._finalize:", this.id);
  154. this.classList.add("wc");
  155. // ADD ANALYTICS HERE
  156. wc.setStats(this, this.properties.cname, this.properties.version);
  157. // SHOW IT NOW (NO FLICKERS)
  158. this.style.visibility = "visible";
  159. wc.groupEnd();
  160. };
  161. /**
  162. * Invoked When component is removed. Usually with a .remove() function call
  163. * @disconnectedCallback
  164. */
  165. disconnectedCallback() {
  166. wc.group("Audio.disconnectedCallback")
  167. /** CLEAN UP NOW */
  168. wc.groupEnd();
  169. };
  170. }
  171. window.customElements.define('wc-audio', Audio);