megatron 0.1.89 → 0.2.0

data/app/assets/javascripts/megatron/utils/index.js

@@ -1,81 +0,0 @@
-var bean = require('bean')
-var CodeMirror = require('codemirror')
-var Toggler = require('./toggler')
-var Messages = require('./messages')
-var AutoNavigate = require('./auto-navigate')
-var TextHelpers = require('./text-helpers')
-var RangeInputHelper = require('./range-input-helper')
-var Timeago = require('./time/timeago')
-var TimeSwitch = require('./time/time-switch')
-var notify = require('notify')
-
-require('codemirror/mode/htmlmixed/htmlmixed')
-require('codemirror/mode/slim/slim')
-require('codemirror/mode/javascript/javascript')
-require('codemirror/mode/css/css')
-require('codemirror/mode/sql/sql')
-require('codemirror/addon/runmode/runmode.js')
-require('codemirror/addon/edit/matchbrackets.js')
-
-module.exports = {
-  Timeago: Timeago,
-  TimeSwitch: TimeSwitch,
-  CodeMirror: CodeMirror,
-  Toggler: Toggler,
-  Messages: Messages,
-  AutoNavigate: AutoNavigate,
-  TextHelpers: TextHelpers,
-  RangeInputHelper: RangeInputHelper,
-
-  toggleActiveNav: function toggleActiveNav(){
-    Array.prototype.forEach.call(document.querySelectorAll('[data-match-url]'), function(node){
-      var matcher = node.getAttribute('data-match-url')
-      if (matcher && new RegExp(node.getAttribute('data-match-url'), "i").test(location.pathname)) {
-        node.className += ' here'
-      }
-    })
-  },
-
-  highlightCode: function highlightCode(){
-    var aliasLang = function(lang) {
-      var aliases = {
-        'markup': 'htmlmixed',
-        'html': 'htmlmixed',
-        'json': 'javascript',
-      }
-
-      return(aliases[lang] || lang)
-    }
-    var elements = document.querySelectorAll('[class*="language-"], [class*="lang-"]');
-    for (var i=0, element; element = elements[i++];) {
-      var lang = element.className.match(/lang.*?-(\S+)/)[1]
-
-      // Standardize classes: lang-[language]
-      if (element.classList.contains('language-'+lang)) {
-        element.classList.remove('language-'+lang)
-        element.classList.add('lang-'+lang)
-      }
-      var code = element.textContent.trim()
-
-      var options = {}
-      if(lang == 'json') { 
-        options.json = true 
-      }
-
-      CodeMirror.runMode(code, aliasLang(lang), element, options)
-      element.innerHTML = "<code class='highlighted-code static-code cm-s-default'>" + element.innerHTML + "</code>"
-      element.classList.add('highlighted')
-    }
-  },
-
-  notifyFormFlash: function notifyFormFlash(){
-    var flash = document.querySelector('.form-flash')
-    if (flash) {
-      var type = flash.dataset.type || 'error'
-      if (type == 'info') type = 'action'
-      notify[type](flash.textContent.trim())
-      flash.classList.add('hidden')
-    }
-  }
-
-}

data/app/assets/javascripts/megatron/utils/range-input-helper.js

@@ -1,280 +0,0 @@
-var bean = require('bean')
-
-require('compose-tap-event')
-
-var RangeInputHelper = {
-  listen: function(){
-    bean.on(document, "input toggler:show", "[type=range]", RangeInputHelper.change)
-    bean.on(document, "click change input", "[type=range]", RangeInputHelper.focus)
-  },
-
-  change: function(event) {
-    RangeInputHelper.refresh(event.currentTarget)
-  },
-
-  refresh: function (slider) {
-    RangeInputHelper.setLabels(slider)
-    RangeInputHelper.setInput(slider)
-  },
-  
-  focus: function(event){
-    event.currentTarget.focus()
-  },
-                              
-  setup: function(){
-    var ranges = document.querySelectorAll('[type=range]:not(.range-input)')
-    Array.prototype.forEach.call(ranges, RangeInputHelper.initSlider)
-    RangeInputHelper.listen()
-  },
-  
-  initSlider: function(slider){
-    slider.className += ' range-input'
-    slider.dataset.id = String(parseInt(Math.random() * 10000))
-    RangeInputHelper.cacheSet(slider)
-
-    slider.insertAdjacentHTML('beforebegin', RangeInputHelper.template(slider))
-    RangeInputHelper.refresh(slider)
-
-    slider.remove()
-  },
-
-  cacheSet: function(slider) {
-    var labels = RangeInputHelper.getLabels(slider)
-    slider.dataset.cache = JSON.stringify({
-      labels: labels,
-      externalLabels: RangeInputHelper.extractLabels(slider, 'data-external-label-'),
-    })
-  },
-  
-  template: function(slider){
-
-    var inputTemplate = RangeInputHelper.inputTemplate(slider)
-    var rangeTemplate = RangeInputHelper.rangeTemplate(slider)
-
-    return inputTemplate + rangeTemplate
-  },
-  
-  rangeTemplate: function(slider){
-    var html = ""
-    var lineLabels = RangeInputHelper.lineLabels(slider)
-    
-    if (slider.dataset.mark || slider.dataset.lineLabels) {
-      var segments = RangeInputHelper.segments(slider)
-      var mark = []
-
-      if (slider.dataset.mark) {
-        mark = slider.dataset.mark.split(',').map(Number)
-      }
-      
-      for(var i = 1; i <= segments; i++) {
-        var markClass = ((mark.indexOf(i) != -1) ? ' mark' : '')
-        var lineLabel = lineLabels[String(i)]
-        
-        html += "<div class='range-segment'><span class='range-segment-content'>"
-        if (mark.indexOf(i) != -1){
-          html += "<span class='range-segment-mark'></span>"
-        }
-        if (lineLabel) {
-          html += "<span class='range-line-label'>"+lineLabel+"</span>"
-        }
-        html += "</span></div>"
-      }
-    }
-
-    slider.className += ' range-input-slider'
-    html = "<div class='range-input-container'>" + slider.outerHTML + "<div class='range-track'>" + html + "</div><div class='range-track-bg'></div></div>"
-
-    var labelHTML = RangeInputHelper.labelTemplate(slider)
-    
-    return "<div class='slider-container"
-    + (RangeInputHelper.objectSize(lineLabels) > 0 ? " line-labels" : "")
-    + (labelHTML.length > 0 ? " with-label" : " without-label")
-    + "' id='slider-"+ slider.dataset.id +"' >"
-    + html
-    + labelHTML
-    + "</div>"
-  },
-
-  lineLabels: function(slider){
-    var lineLabels = {}
-    if(slider.dataset.lineLabels) {
-      slider.dataset.lineLabels.split(';').map(function(labels){
-        var l = labels.split(':')
-        lineLabels[l[0]] = l[1]
-      })
-    }
-    return lineLabels
-  },
-  
-  labelTemplate: function(slider){
-    var html = ""
-    var labels = JSON.parse(slider.dataset.cache).labels
-
-    for(var key in labels){
-      var altKey = RangeInputHelper.camelCase(key)
-      var before = slider.dataset.beforeLabel || slider.dataset[altKey+'BeforeLabel']
-      var after  = slider.dataset.afterLabel || slider.dataset[altKey+'AfterLabel']
-
-      html += "<span class='range-label-"+key+"'>"
-      if (before) { html += "<span class='before-label'>"+before+"</span>" }
-      html += "<span data-label='"+key+"'></span>"
-      if (after)  { html += "<span class='after-label'>"+after+"</span>" }
-      html += "</span> "
-    }
-
-    if (html.length > 0) {
-      html = "<div class='range-label'>" + html + "</div>"
-    }
-
-    return html
-  },
-
-  inputTemplate: function(slider) {
-    if (slider.dataset.input && slider.dataset.values) {
-      // Generate a class name for querying later (because some name attributes contain illegal characters for queries)
-      var classname = slider.dataset.input.replace(/\W/g,'-')
-
-      var input = this.existingInput(slider)
-
-      if (input) {
-        input.classList.add(classname)
-        return ""
-      }
-      
-      return "<input class='"+classname+"' type='hidden' name='"+slider.dataset.input+"' value='"+slider.value+"'>"
-    } else return ""
-  },
-
-  existingInput: function(slider) {
-    return this.scope(slider).querySelector('input[name="'+slider.dataset.input+'"]')
-  },
-
-  scope: function(slider) {
-    var el = slider
-
-    while (el && el.tagName != "FORM") {
-      el = el.parentNode
-    }
-
-    return el || document
-  },
-
-  getLabels: function(slider) {
-    var labels = {}
-
-    if (slider.dataset.label == 'false')
-      return labels
-  
-    labels = RangeInputHelper.extractLabels(slider, 'data-label-')
-    
-    if (RangeInputHelper.objectSize(labels) == 0) {
-      if (slider.dataset.label) {
-        labels['default'] = slider.dataset.label.split(';')
-      } else if(slider.dataset.values){
-        labels['default'] = slider.dataset.values.split(',')
-      } else {
-        labels['default'] = RangeInputHelper.valueLabels(slider)
-      }
-    }
-
-    return labels
-  },
-
-  extractLabels: function(slider, pattern) {
-    var labels = {}
-
-    for (var i = 0; i < slider.attributes.length; i++){
-      var name = slider.attributes[i].nodeName
-
-      if(new RegExp("^"+pattern).test(name)) {
-        name = name.replace(pattern, '')
-        labels[name] = slider.attributes[i].nodeValue.split(';')
-      }
-    }
-    return labels
-  },
-
-  setLabels: function(slider) {
-    var labels = JSON.parse(slider.dataset.cache).labels
-    var externalLabels = JSON.parse(slider.dataset.cache).externalLabels
-
-    RangeInputHelper.updateLabels(slider, labels)
-    RangeInputHelper.updateLabels(slider, externalLabels, 'external')
-  },
-
-  updateLabels: function(slider, labels, type) {
-    for (var key in labels) {
-      var elements = RangeInputHelper.labelElements(slider, type, key)
-
-      Array.prototype.forEach.call(elements, function(target) {
-        var index = RangeInputHelper.rangeValueIndex(slider)
-        target.innerHTML = RangeInputHelper.getLabelsAtIndex(labels, index)[key]
-      })
-    }
-  },
-
-  labelElements: function(slider, type, key) {
-    var selector = ''
-
-    if (type == 'external')
-      selector = '[data-range-label='+key+']'
-    else
-      selector = '#slider-'+slider.dataset.id+' [data-label='+key+']'
-
-    return document.querySelectorAll(selector)
-  },
-
-  setInput: function(slider) {
-    if (slider.offsetParent === null) { return }
-    if (slider.dataset.input && slider.dataset.values) {
-      var value = slider.dataset.values.split(',')[RangeInputHelper.rangeValueIndex(slider)]
-      var selector = "."+slider.dataset.input.replace(/\W/g,'-')
-      var inputs = this.scope(slider).querySelectorAll(selector)
-
-      Array.prototype.forEach.call(inputs, function(input){
-        input.value = value
-      })
-    }
-  },
-
-  getLabelsAtIndex: function(labels, index){
-    var set = {}
-    for (var key in labels) {
-      set[key] = labels[key][index]
-    }
-    return set
-  }, 
-
-  segments: function(slider){
-    return Number(slider.getAttribute('max') || 100) - Number(slider.getAttribute('min') || 0) + 1
-  },
-
-  valueLabels: function(slider) {
-    var values = []
-    var start = Number(slider.getAttribute('min')) || 0
-    var end = Number(slider.getAttribute('max')) || 100
-
-    for (var i = start; i <= end; i++ ) {
-      values[i] = i
-    }
-
-    return values
-  },
-  
-  rangeValueIndex: function(slider){
-    return Number(slider.value) - Number(slider.getAttribute('min'))
-  },
-
-  objectSize: function(object) {
-    var length = 0; for(var i in object) { length++ }
-    return length
-  },
-
-  camelCase: function(input) {
-    return input.toLowerCase().replace(/-(.)/g, function(match, group) {
-      return group.toUpperCase();
-    });
-  }
-}
-
-module.exports = RangeInputHelper

data/app/assets/javascripts/megatron/utils/time/date-to-html.js

@@ -1,59 +0,0 @@
-// Converts a simple date string into Date + Time + Timezone wrapped in HTML
-//
-// Input:
-// - String, compatible with JS date parsing e.g. "2014-10-20" or "2014-05-21 10:63"
-// - String, timezone: "UTC", "CST", etc.
-//
-// Returns: HTML which is "2014-01-28 18:00:00 CST", separated and wrapped with spans
-// with classnames: date, time and timezone
-//
-var dateToHtml = function dateToHtml(dateString, zone) {
-
-  if(isNaN(new Date("2014-01-29T18:14:29+00:00").getDate())) {
-    return false
-  }
-  
-  var date = new Date(dateString)
-  var zone = zone || date.getTimezoneOffset()/-60
-
-  if(zone === 'UTC') {
-    var y  = date.getUTCFullYear()
-    var mo = pad(date.getUTCMonth() + 1)
-    var d  = pad(date.getUTCDate())
-    var h  = pad(date.getUTCHours())
-    var m  = pad(date.getUTCMinutes())
-    var s  = pad(date.getUTCSeconds())
-  } else {
-    var y  = date.getFullYear()
-    var mo = pad(date.getMonth() + 1)
-    var d  = pad(date.getDate())
-    var h  = pad(date.getHours())
-    var m  = pad(date.getMinutes())
-    var s  = pad(date.getSeconds())
-    
-    var tz = String(date).match(/\((.+)\)$/)
-
-    if(tz) {
-      var zone = tz[1]
-    } else {
-      var zone = "GMT " 
-          zone += ((zone > 0) ? '+' : '')
-          zone += " "+ pad(zone*100, 4)
-    }
-  }
-
-  var str = '<span class="date">'+y+'-'+mo+'-'+d+'</span>'
-  str += ' <span class="time">'+h+':'+m+':'+s+'</span>'
-  str += ' <span class="timezone">'+zone+'</span>'
-  return str
-}
-
-var pad = function datePad(num, pad){
-  pad = pad || 2
-  while(String(num).length < pad) {
-    num = '0' + num
-  }
-  return num
-}
-
-module.exports = dateToHtml

data/app/assets/javascripts/megatron/utils/time/time-switch.js

@@ -1,84 +0,0 @@
-var timeago = require('./timeago')
-var dateToHtml = require('./date-to-html')
-var bean = require('bean')
-
-var TimeSwitch = {
-
-  // Attach listeners, setup HTML templates
-  setup: function timeSwitchSetup() {
-    if(!timeago.browserSupport()) return false
-    if(!this.listening)   this.listen()
-
-    var timeEls = document.querySelectorAll('.time-switch[datetime]')
-
-    Array.prototype.forEach.call(timeEls, function(el) {
-      var datetime = el.getAttribute('datetime')
-      var timeagoPosition = el.dataset.timeago
-      var timeagoStyle = el.dataset.timeagoStyle
-      el.innerHTML = TimeSwitch.template(datetime, timeagoPosition, timeagoStyle)
-      el.classList.add('time-switch')
-      el.setAttribute('title', 'toggle timezones')
-    })
-  },
-
-  // Attach listeners to toggle time zones whine clicked
-  listen: function timeSwitchListen() {
-    bean.on(document, "click", ".time-switch", TimeSwitch.toggle)
-    this.listening = true
-  },
-
-  // Switch between UTC and local time
-  toggle: function timeSwitchToggle(event) {
-    var timeEls = document.querySelectorAll('.time-switch')
-
-    Array.prototype.forEach.call(timeEls, function(el) {
-      el.classList.toggle('alt-zone')
-    })
-  },
-
-  // Supply HTML for UTC and local datetime
-  //
-  // Input:
-  //  - date (a date object)
-  //  - timeagoPosition, String, either 'before' or 'after'
-  //
-  template: function timeSwitchTemplate(date, timeagoPosition, timeagoStyle) {
-    var utc = dateToHtml(date, 'UTC')
-    var local = dateToHtml(date)
-    var t = '';
-
-    if (timeagoPosition === 'before') {
-      t += this.timeagoTemplate(date, timeagoPosition, timeagoStyle)
-    }
-
-    t += "<span class='utc'><span class='clock_line_icon'></span> "
-    t += utc + "</span>"
-    t += "<span class='local'><span class='clock_fill_icon'></span> "
-    t += local + "</span>"
-
-    if (timeagoPosition === 'after') {
-      t += this.timeagoTemplate(date, timeagoPosition, timeagoStyle)
-    }
-
-    return t
-  },
-
-  // Converts a date to relative time string wrapped in a span
-  timeagoTemplate: function timeSwitchTimeagoTemplate(date, position, style) {
-    var relative = timeago.parse(date, style)
-    var dash = "<span class='dash'>&nbsp;-&nbsp;</span>"
-    var html = ''
-
-    if(relative) {
-      if (position === 'after') html += dash
-      html += "<span class='timeago'>"+ relative +"</span> "
-      return html
-    } else {
-      return ''
-    }
-  }
-
-}
-
-module.exports = TimeSwitch
-