megatron 0.1.89 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 95441e75ea07e858f568ce7faaae77ac23558637
-  data.tar.gz: bd370c17331d642bc9d1ab18b37ba489d54d225f
+  metadata.gz: 2befa154b790a1263b212eadb63a4c4fe083613d
+  data.tar.gz: 6f5563efe813ef2d6c6bde4cb5a956d425b89906
 SHA512:
-  metadata.gz: c7b2aff9f44cc94b45a1bceb90cd77a686f585a0ea21ee418d56dfa81969acc1b4409abddfdafeea0fa5f4bc910d559a9a4c26b3c806a50c98b9e42d74e06162
-  data.tar.gz: a6b2ccaa463bc73fea382416aaf89d83077c2b42949614cfc38de09d83a62ea5be91cfd27179d1e850f23de9ae10b7610bcc428aa30ceb271cdef27acd4c0a96
+  metadata.gz: 668d49dad27cc632fd44ae4ed35fe5f878fe570776d9ce731961c1ca6d4ee7e259cc18199433bd6ae4cdc05978694132cd5738fb394db539e8b5c5bc614b5053
+  data.tar.gz: ed88b7b6ce5f4a9a5aa5650c2d31f063bbd90bb7749b57bea82e01d51e1d36bcc73e5b5cedb20c1d8ded12525c99dc5b27bf7dbe7a63716faa1fd403f85f42fb

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

@@ -1,106 +1,46 @@
-var utils = require('./utils')
-var bean = require('bean')
-var Dialog = require('dialog')
-var tap = require('tap-event')
-var Form = require('./form')
-var Link = require('./link')
-var _ = require('lodash')
+var event = require('compose-event')
 var notify = require('notify')
 var request = require('superagent')
-var NProgress = require('nprogress')
+var dialog = require('compose-dialog')
+var toggler = require('compose-toggler')
 var esvg = require('./esvg')
 
+// CodeMirror Settings
+var CodeMirror = require('codemirror')
+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')
+
+var form = require('compose-remote-form') // Our UJS implementation
+require('compose-time-toggle') // Switch time elements between local and UTC
+require('compose-slider')      // Our slider (range input) component
+var rangeTouch = require('rangetouch')          // mobile accessiblity on sliders
+rangeTouch.set("thumbWidth", 19); 
+
+require('./utils/activate-nav-items')
+require('./utils/auto-navigate')
+require('./utils/clipboard')
+require('./utils/form-flash')
+require('./utils/form-notify')
+require('./utils/highlight-code')
+require('./utils/messages')
+require('./utils/text-helpers')
+require('./utils/progress-bar')
+
 require('./shims/classlist')
 
 window.Megatron = module.exports = {
-  Dialog: Dialog,
+  dialog: dialog,
   notify: notify,
-  utils: utils,
-  Event: bean,
-  Toggler: utils.Toggler,
-  Form: Form,
+  event: event,
+  form: form,
   request: request,
-  Link: Link,
   esvg: esvg,
-  _: _
-}
-
-bean.on(document, 'DOMContentLoaded', pageLoad)
-
-// Support rails turbolinks page load event
-bean.on(document, 'page:change', pageChange)
-
-NProgress.configure({showSpinner: false})
-
-bean.on(document, 'page:fetch', function() { NProgress.start() })
-bean.on(document, 'page:change', function() { NProgress.done() })
-bean.on(document, 'page:restore', function() { NProgress.remove() })
-
-function pageLoad(){
-  utils.Toggler.listen()
-  utils.AutoNavigate.listen()
-  utils.TextHelpers.listen()
-  if(!window.Turbolinks) {
-    pageChange()
-  }
-}
-
-function pageChange(){
-  utils.toggleActiveNav()
-  utils.highlightCode()
-  utils.notifyFormFlash()
-  utils.TimeSwitch.setup()
-  utils.Timeago.setup()
-  utils.Messages.load()
-  utils.RangeInputHelper.setup()
-  utils.TextHelpers.setup()
-
-  // Do last to ensure no other default setup overrides visibility state
-  utils.Toggler.refresh()
-}
-
-// Dialog document listener and auto-creator
-bean.on(document, 'click', '[data-trigger=dialog]', handleDialogTrigger)
-bean.on(document, 'click', '[data-trigger=dialog]', tap(handleDialogTrigger))
-bean.on(document, 'click', '.nav_toggle', toggleNavigationMode)
-
-function handleDialogTrigger(event){
-  event.preventDefault()
-  new Dialog(event.currentTarget.dataset).show()
-}
-
-function toggleNavigationMode(event) {
-  event.target.blur()
-  document.querySelector('body').classList.toggle('active-nav')
+  code: CodeMirror,
+  toggler: toggler
 }
 
-function disableWith(event){
-  var buttons = event.currentTarget.querySelectorAll('[data-disable-with]')
-  Array.prototype.forEach.call(buttons, function(button){
-    button.disabled = true
-    button.classList.add('disabled')
-
-    var buttonText = button.dataset.disableWith
-    if (!buttonText || buttonText == '') { buttonText = button.innerHTML }
-
-    button.innerHTML = buttonText.replace(/\.{3}/, '…')
-  })
-}
-
-// If jQuery exists, be sure Rails UJS doesn't
-if (!window.$ || !$.rails) {
-  var boundForms = []
-  // Form event listener
-  bean.on(document, 'submit', 'form[data-remote]', handleRemoteFormSubmit)
-  bean.on(document, 'submit', 'form', disableWith)
-  bean.on(document, 'click', 'a[data-method], a[data-confirm], button[data-method], button[data-confirm]', Link.click)
-}
-
-function handleRemoteFormSubmit(event){
-  // Prevent doubling up on form event hanlding.
-  if(boundForms.filter(function(el){return el == event.currentTarget})[0])
-    return
-  // Trigger a form submission event.
-  new Form({el: event.currentTarget}).submit(event)
-  boundForms.push(event.currentTarget)
-}

data/app/assets/javascripts/megatron/utils/activate-nav-items.js

@@ -0,0 +1,20 @@
+var Event = require('compose-event')
+
+// This module helps show which navigation elements match the current page.
+// It assigns 'here' classes to all elements which match the current url.
+//
+// The value for data-match-url is converted to a regex to match the current url.
+//
+// Examples:
+//   
+//   a href='/users" data-match-url='^/users'
+//   a href='/users/your-username/followers" data-match-url='/followers/'
+//   
+Event.change(function(){
+  Array.prototype.forEach.call(document.querySelectorAll('[data-match-url]'), function(node){
+    var matcher = node.getAttribute('data-match-url')
+    if (matcher && new RegExp(node.dataset.matchUrl, "i").test(location.pathname)) {
+      node.classList.add('here')
+    }
+  })
+})

data/app/assets/javascripts/megatron/utils/auto-navigate.js

@@ -1,23 +1,20 @@
-var bean = require('bean')
+var Event = require('compose-event')
 
-require('compose-tap-event')
-
-var AutoNavigate = {
-  listen: function autoNavigateListen(){
-    bean.on(document, "click", ".auto-navigate", AutoNavigate.trigger)
-  },
-
-  trigger: function autoNavigateTrigger(event) {
+// Allow clicking an element with .auto-navigate transfers the 
+// click to the link (a child element) with the class navigate
+//
+Event.ready(function(){ 
+  Event.on(document, "click", ".auto-navigate", function(event) {
     var target = event.target
+
     if (target.tagName.toLowerCase() != 'a') {
       var link = event.currentTarget.querySelector('a.navigate')
+
       if (event.metaKey) {
         window.open(link)
       } else {
-        bean.fire(link, 'click')
+        Event.fire(link, 'click')
       }
     }
-  }
-}
-
-module.exports = AutoNavigate
+  })
+})

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

@@ -1,5 +1,10 @@
+var Event = require('compose-event')
 var clipboard = require('clipboard')
 
+// This handles the process of adding to clipboard,
+// handling failure states, and hiding buttons when
+// clipboard access is not supported.
+
 var Clipboard = {
   setup: function() {
     if (document.queryCommandSupported('copy')) {
@@ -7,12 +12,14 @@ var Clipboard = {
       cbwatcher.on('success', Clipboard.success)
       cbwatcher.on('error', Clipboard.failure)
     } else {
+      // Hide buttons which offer the option to copy to clipboard
       Array.prototype.forEach.call(document.querySelectorAll('[data-clipboard-target],[data-clipboard-text]'), function(el) {
         el.classList.add('hidden')
       })
     }
   },
 
+  // Copied to clipboard
   success: function(cbEvent) {
     cbEvent.trigger.classList.add('clipboard-copied')
     setTimeout(function(){
@@ -20,6 +27,7 @@ var Clipboard = {
     }, 1200)
   },
 
+  // Failed: to copy to clipboard
   error: function(event) {
     cbEvent.trigger.classList.add('clipboard-failed')
     setTimeout(function(){
@@ -28,4 +36,4 @@ var Clipboard = {
   }
 }
 
-module.exports = Clipboard
+Event.change(Clipboard.setup)

data/app/assets/javascripts/megatron/utils/form-flash.js

@@ -0,0 +1,14 @@
+var Event = require('compose-event')
+var Notify = require('compose-notification')
+
+// If a page has an element .form-flash, trigger a notification
+//
+Event.change(function(){
+  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/form-notify.js

@@ -1,39 +1,51 @@
-var bean = require('bean')
-var notify = require('notify')
-
-module.exports = {
-  notify: function formNotify(el, type){
-    if(type == 'success')
-      notify.success(this.getMessage(el, 'success'))
-    else if(type == 'error')
-      notify.error(this.getMessage(el, 'error'))
-    else if(type == 'beforeSend')
-      notify.progress(this.getMessage(el, 'beforeSend'))
-  },
-
-  getMessage: function formGetMessage(el, type){
-    if (el.dataset[type])
-      return el.dataset[type]
-    else {
-      var msg_object = document.querySelector('script.'+type)
-
-      if (msg_object) {
-        var msg = msg_object.innerHTML
-        if (msg)
-          return msg
-        else
-          return this.defaultMessages[type]
-      }
-    }
-  },
-
-  listen: function formListen() {
-    bean.on(document.querySelector('body'), 'submit', 'form', function(event){
-      if(!event.target.dataset['remote']) {
-        event.preventDefault()
-        setTimeout(function(){event.target.submit()}, 100)
-        this.notify(event.target, 'beforeSend')
-      }
-    }.bind(this))
-  }
+var Event = require('compose-event')
+var Notify = require('notify')
+
+
+// Notify user of actions on ajax forms.
+// Default messages are:
+//
+//  beforeSend: 'Submitting...',
+//  success: 'Success!',
+//  error: 'Something went wrong.'
+//
+//  You can customize form messages by nesting scripts
+//  inside your form. Note, the classnames of the scripts
+//  should match the message type.
+//
+//  <form data-remote='true'>
+//    <script class='beforeSend'>Submitting form</script>
+//    <script class='success'>You did it!</script>
+//    <script class='error'>Try again</script>
+//
+
+var defaultMessages = {
+  beforeSend: 'Submitting...',
+  success: 'Success!',
+  error: 'Something went wrong.'
+}
+
+var notifyForm = function(event) {
+  var message = getMessage(event.target, event.type)
+
+  if (event.type == 'beforeSend')
+    Notify.progress(message)
+  else
+    Notify[type](message)
 }
+
+var getMessage = function(form, type) {
+  if (form.dataset[type])
+    return form.dataset[type]
+
+  var el = form.querySelector('[data-ajax-event='+type+'], script.'+type)
+
+  if (el)
+    return el.innerHTML
+  else
+    return defaultMessages[type]
+}
+
+Event.ready(function() {
+  Event.on(document, 'beforeSend success error', 'form[data-remote]', notifyForm)
+})

data/app/assets/javascripts/megatron/utils/highlight-code.js

@@ -0,0 +1,46 @@
+var Event = require('compose-event')
+var CodeMirror = require('codemirror')
+
+// Use CodeMirror to render static code higlighting
+//
+// Example:
+//
+//   <pre class="lang-ruby">
+//     puts 'awesome' if true
+//   </pre>
+//
+var aliasLang = function(lang) {
+  var aliases = {
+    'markup': 'htmlmixed',
+    'html': 'htmlmixed',
+    'json': 'javascript',
+  }
+
+  return(aliases[lang] || lang)
+}
+
+var highlightCode = function() {
+  var elements = document.querySelectorAll('[class*="language-"], [class*="lang-"]');
+
+  Array.prototype.forEach.call(elements, function(element) {
+    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')
+  })
+}
+
+Event.change(highlightCode)

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

@@ -1,5 +1,9 @@
 var request = require('superagent')
-var bean = require('bean')
+var Event = require('compose-event')
+
+// Look for messages at /messages.json
+// (an internal json document which we use to publish site-wide messages)
+// Then pin the topmost message to the top of the page.
 
 var Messages = {
   el: function messagesEl(){
@@ -36,7 +40,7 @@ var Messages = {
         var html = this.messageHTML(options)
         this.saveMessage(html)
         this.showMessage(html)
-        bean.on(this.el(), 'click', '.dismiss', this.dismiss.bind(this))
+        Event.on(this.el(), 'click', '.dismiss', this.dismiss.bind(this))
       }
     }
   },
@@ -83,15 +87,15 @@ var Messages = {
   },
 
   load: function messagesLoad(){
-    if(window.location.hostname.match(/app\.compose\.(io|dev)/)){
+    if(window.location.hostname.match(/app\.compose/)){
       var message = window.Megatron.accountMessage
       if(!message) {
-        this.fetch()
+        Messages.fetch()
       } else {
-        this.showMessage(message)
+        Messages.showMessage(message)
       }
     }
   }
 }
 
-module.exports = Messages
+Event.ready(Messages.load)

data/app/assets/javascripts/megatron/utils/progress-bar.js

@@ -0,0 +1,9 @@
+var Event = require('compose-event')
+var NProgress = require('nprogress')
+
+// NProgress loading bar visualization
+//
+NProgress.configure({showSpinner: false})
+Event.on(document, 'page:fetch', function() { NProgress.start() })
+Event.on(document, 'page:change', function() { NProgress.done() })
+Event.on(document, 'page:restore', function() { NProgress.remove() })