@claromentis/design-system/dist/collection/index-scripts.js

Claromentis Design System Component Library

var section = document.querySelectorAll(".copy-code");
var selectBox = document.getElementById("select");
var sectionCount = section.length;
for (var i = 0; i < sectionCount; i += 1) {
  section[i].onclick = function(e) {
    var copyText = this;
    selectBox.setAttribute('value', copyText.innerHTML);
    selectBox.select();
    document.execCommand("copy");

    var copiedmessage = document.getElementById('copy');
    copiedmessage.setAttribute('class', 'copied');
    setTimeout(function () {
      copiedmessage.removeAttribute('class');
    }, 1000);
  };
}

var showDemo = document.querySelector(".see-demo");
var demoWrapper = document.getElementById('demoWrapper');
showDemo.onclick = function(e) {
  if (demoWrapper.classList.contains('hide')) {
    demoWrapper.setAttribute('class', '');
    showDemo.innerHTML = "Close demo";
  } else {
    demoWrapper.setAttribute('class', 'hide');
    showDemo.innerHTML = "See a demo";
  }
};



// Basic get JSON function
var getJSON = function(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'json';
  xhr.onload = function() {
    var status = xhr.status;
    if (status === 200) {
      callback(null, xhr.response);
    } else {
      callback(status, xhr.response);
    }
  };
  xhr.send();
};

getJSON('docs.json', function(err, data) {
  if (err !== null) {
    console.log('Something went wrong: ' + err);
  } else {
    var results = [];
    // search field to link components to their info
    var searchField = "tag";
    // Selects all .prop divs to gather/enter info
    var properties = document.querySelectorAll(".props");
    // counts number of .prop divs
    var propertiesCount = properties.length;
    var i = 0;
    // loops through all .prop divs
    for (var i = 0 ; i < propertiesCount ; i++) {
      // get's ID of .prop divs one after the other
      var getID = properties[i].id;
      // sets search variable as .prop ID
      var searchVal = getID;
      // selects .prop divs by ID
      var comp = document.getElementById(searchVal);
      var j = 0;
      for (var j = 0 ; j < data.components.length ; j++) {
        if (data.components[j][searchField] == searchVal) {
          var k;
          for (k = 0; k < data.components[j].props.length ; k++) {
            // Adds Attributes title to top of attr list
            if (k === 0) {
              var attrTitle = document.createElement("p");
              attrTitleInner = document.createElement("span");
              attrTitleInner.appendChild(document.createTextNode("Attributes"));
              attrTitle.setAttribute('class', 'attrTitle');
              comp.appendChild(attrTitle);
              attrTitle.appendChild(attrTitleInner);

            }
            // Adds attr name
            var name = document.createElement("p");
            name.appendChild(document.createTextNode("Name: " + data.components[j].props[k].name));
            name.setAttribute('class', 'attrName');
            comp.appendChild(name);
            // Adds attr description
            var docs = document.createElement("p");
            docs.appendChild(document.createTextNode("Description: " + data.components[j].props[k].docs));
            comp.appendChild(docs);
            // Adds attr type
            var type = document.createElement("p");
            type.appendChild(document.createTextNode("Type: " + data.components[j].props[k].type));
            comp.appendChild(type);
            // Adds attr default value
            var defaultType = document.createElement("p");
            defaultType.appendChild(document.createTextNode("Default value: " + data.components[j].props[k].default));
            comp.appendChild(defaultType);
          }
          var l;

          for (l = 0; l < data.components[j].slots.length ; l++) {
            // Adds Slots title to top of attr list
            if (l === 0) {
              var slotTitle = document.createElement("p");
              var slotTitleInner = document.createElement("span");
              slotTitleInner.appendChild(document.createTextNode("Slots"));
              slotTitle.setAttribute('class', 'slotTitle');
              comp.appendChild(slotTitle);
              slotTitle.appendChild(slotTitleInner);
            }
            // Adds slot name
            var slotName = document.createElement("p");
            slotName.appendChild(document.createTextNode("Slot name: " + data.components[j].slots[l].name));
            slotName.setAttribute('class', 'slotName');
            comp.appendChild(slotName);
            // Adds slot description
            var slotType = document.createElement("p");
            slotType.appendChild(document.createTextNode(data.components[j].slots[l].docs));
            comp.appendChild(slotType);
          }

        } else {
          // if entries can't be found the for loop will continue looping
          i+1
        }
      }
    }
  }
});


var propHeight = document.querySelectorAll(".props");
var propCount = propHeight.length;
for (var i = 0; i < propCount; i += 1) {
  propHeight[i].onclick = function(e) {
    var thisProp = this;
    thisProp.setAttribute('class', 'props on');
  }
}



(function () {
  var el, element, ev, event;

  var logEvent = function (name) {
    return function (event) {
      console.log(name, event);
    }
  };

  var button = document.querySelector('button[type=submit]');
  var claButton = document.querySelector('cla-button[type=submit]');

  var elements = [button, claButton];
  var events = ['focus', 'blur', 'click'];
  var value = ['test', 'value'];

  // Set up element values and event listeners
  for (el in elements) {
    if (element) {
      element = elements[el];
      element.value = value;

      for (ev in events) {
        event = events[ev];
        element.addEventListener(event, logEvent(event));
      }
    }
  }

})();