on ceci pressdown and pressup events

//This defines our custom listeners, and specifies the event to listen depending on if the
//device is touch capable or not

var customListenerMap = {
  'on-ceci-pressdown': { eventName: 'ceci-pressdown', mobile: 'touchstart', desktop: 'mousedown' },
  'on-ceci-pressup': { eventName: 'ceci-pressup', mobile: 'touchend', desktop: 'mouseup' }
};


//This gets all the elements that have an attribute with a name that matches the definitions above

var customListenerQuerySelector = Object.keys(customListenerMap).map(function (m) {
  return '[' + m + ']';
}).join(',');



//When a brick loads, we run through all of the elements that have the above attributes,
//and attach the appropriate listener

this.touchEnabled = 'ontouchstart' in document.documentElement;
var els = this.shadowRoot.querySelectorAll(customListenerQuerySelector);
Array.prototype.forEach.call(els, this.addCustomListener.bind(this));



//This is an element inside of a Brick, it has the on-ceci-pressdown / pressup attributes
    <div id="buttonwrapper" style="font-size: {{fontsize}}px; background: {{buttoncolor}};" on-ceci-pressdown="{{pressdown}}" on-ceci-pressup="{{pressup}}" class="button-wrapper">



// This adds the listeners, choosing the mobile or desktop event name as appropriate

addCustomListener: function(el, listener){
  // Loop over the on-ceci-* listener types to see which one applies to this element
  var that = this;
  Object.keys(customListenerMap).forEach(function (listener) {
    if (!el.hasAttribute(listener)) return;

    // If there is a valid map entry, grab it
    var mapEntry = customListenerMap[listener];

    if(mapEntry) {
      // Fire an event directly at the element with the on-ceci-* attribute
      el.addEventListener(mapEntry[that.touchEnabled ? 'mobile' : 'desktop'], function(e){
        // Emit an event without the "on-" prefix, to let Polymer's template syntax sugar do the rest
        el.dispatchEvent(new CustomEvent(listener.substr(3), {bubbles: true, detail: this}));
      });
    }
  });
},