{"version":3,"sources":["jsdelivr-header.js","/npm/music-sequencer@1.6.0/index.js"],"names":[],"mappings":"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","file":"/npm/music-sequencer@1.6.0/index.js","sourceRoot":"","sourcesContent":["/**\n * Minified by jsDelivr using Terser v5.39.0.\n * Original file: /npm/music-sequencer@1.6.0/index.js\n *\n * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files\n */\n","\nclass MusicSequencer extends HTMLElement {\n\n  static get observedAttributes() {return ['rows', 'cols', 'size']; }\n\n  constructor() {\n\n    super();\n\n    // Attributes\n    this.attributesRows = this.hasAttribute('rows')?parseInt(this.getAttribute('rows')):4;\n    this.attributesCols = this.hasAttribute('cols')?parseInt(this.getAttribute('cols')):8;\n    this.attributesSize = this.hasAttribute('size')?this.getAttribute('size'):'32';\n\n    this.matrix = [];\n    this.updateMatrix()\n\n    // Create a shadow root\n    const shadow = this.attachShadow({mode: 'open'});\n\n\n    // Create Internal UI\n\n    const wrapper = document.createElement('div');\n    wrapper.setAttribute('class', 'sequencer table-responsive-md');\n\n    const table = document.createElement(\"table\");\n    wrapper.appendChild(table);\n\n    this.tbody = document.createElement(\"tbody\");\n    table.appendChild(this.tbody);\n\n    this.elements = [];\n    this.updateGrid()\n\n    // Create some CSS to apply to the shadow dom\n    this.styleElement = document.createElement('style');\n    this.updateStyle();\n\n    // Attach the created elements to the shadow dom\n    shadow.appendChild(this.styleElement);\n    shadow.appendChild(wrapper);\n\n    var readyEvent = new CustomEvent('ready', { detail: this.matrix });\n    this.dispatchEvent(readyEvent);\n  }\n\n  mark(col){\n\n    this.unmark();\n    const rows = this.elements[col].length;\n    for(let row = 0; row < rows-1; row++){\n      this.elements[col][row].classList.add(\"position-active\");\n    }\n    console.log(`Sequencer marking rows in column ${col}`, rows)\n\n  }\n\n  unmark(){\n    const cols = this.elements.length;\n    for(let col = 0; col < cols; col++){\n      const rows = this.elements[col].length;\n      for(let row = 0; row < rows; row++){\n\n          this.elements[col][row].classList.remove(\"position-active\");\n\n      }\n    }\n  }\n\n  attributeChangedCallback(name, oldValue, newValue) {\n    // console.log('Custom square element attributes changed.');\n    // updateStyle(this);\n    console.log(`attributeChanged: ${name}: ${oldValue}->${newValue}`)\n\n    // property updates\n\n    if(name === 'size') {\n      this.attributesSize = newValue;\n    }\n\n    if(name === 'cols') {\n      this.attributesCols = parseInt(newValue);\n    }\n\n    if(name === 'rows') {\n      this.attributesRows = parseInt(newValue);\n    }\n\n    // actions\n\n    if(name === 'size') {\n      this.updateStyle();\n    }\n\n    if((name === 'cols')||(name === 'rows')) {\n      this.updateMatrix();\n      this.updateGrid();\n    }\n\n\n  }\n\n  destroyMatrix(){\n    this.matrix = [];\n  }\n  updateMatrix(){\n    this.destroyMatrix();\n    this.matrix = new Array(this.attributesCols);\n    for (var col = 0; col < this.attributesCols; col++) {\n      this.matrix[col] = new Array(this.attributesRows);\n      for (var row = 0; row < this.attributesRows; row++){\n        this.matrix[col][row] = false;\n      }\n    }\n  }\n\n\n\n  destroyStyle(){\n    this.styleElement.textContent = ``;\n  }\n\n  updateStyle(){\n    this.destroyStyle();\n\n    const cssData = `\n      table.music-sequencer td {\n        border: 2px solid white;\n        background: #ccc;\n        min-width: ${this.attributesSize}px;\n        height: ${this.attributesSize}px;\n      }\n      table.music-sequencer .position-enabled {\n        background: #666;\n      }\n      table.music-sequencer .position-active {\n        border-bottom: 2px solid #bbb;\n      }\n    `;\n\n    this.styleElement.textContent = cssData;\n    console.log('Style Updated', cssData)\n  }\n\n\n  destroyGrid(){\n\n    const cols = this.elements.length;\n    for(let col = 0; col < cols; col++){\n      const rows = this.elements[col].length;\n      for(let row = 0; row < rows; row++){\n        const position = this.elements[col][row];\n        position.removeEventListener('mousedown', position.clickHandler)\n        position.removeEventListener('mouseover', position.clickHandler)\n        position.remove();\n      }\n    }\n  }\n\n  updateGrid(){\n\n    this.destroyGrid();\n    this.elements = new Array(this.attributesCols);\n    for (var col = 0; col < this.attributesCols; col++) {\n      this.elements[col] = new Array(this.attributesRows);\n    }\n\n    for(let y = 0; y < this.attributesRows; y++){\n\n      const row = document.createElement(\"tr\");\n      row.setAttribute('class', 'sequencer-row')\n\n      for(let x = 0; x < this.attributesCols; x++){\n\n        const position = document.createElement(\"td\");\n        this.elements[x][y] = position;\n\n        position.setAttribute('class', 'row-position');\n\n        const that = this;\n\n        const handler = function(){\n          const currentValue = that.matrix[x][y];\n          if(currentValue === true){\n            that.matrix[x][y] = false;\n            that.elements[x][y].classList.remove(\"position-enabled\");\n          }else{\n            that.matrix[x][y] = true;\n            that.elements[x][y].classList.add(\"position-enabled\");\n          }\n          var changeEvent = new CustomEvent('change', { detail: that.matrix });\n          that.dispatchEvent(changeEvent);\n        }\n\n        position.clickHandler = function(e){ if(e.buttons === 1) handler() }\n        position.addEventListener( 'mousedown', position.clickHandler )\n        position.addEventListener( 'mouseover', position.clickHandler )\n\n        row.appendChild(position);\n\n\n      }\n      this.tbody.appendChild(row);\n    }\n\n  }\n\n\n}\n\n// Define the new element\ncustomElements.define('music-sequencer', MusicSequencer);\n"]}