megatron 0.0.3 → 0.0.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 73b5d84546195b3ca909d0462afa86d8de2e09f6
-  data.tar.gz: 8d71a31f503a5cfb9fdce2638d974323e920cae8
+  metadata.gz: 43cae2501c2d529b579278a0df4001db3f206c34
+  data.tar.gz: 2a0ad552fc5270c703e59d331dc566a02cf9978c
 SHA512:
-  metadata.gz: b4c95704bf46d07198ca3388bceda66d317d1a90032261c3ab967861c2d26f6e12fbec535de57883d9ee79a767f232d02aa5dacecc04029f9d2bd5eccd559f15
-  data.tar.gz: 5d30ae0cb7d69de04a7527f45cb1f531011ea662f4dbd78c8be8ee98c255d8a2e507c07477b3a535684f592f2829f2dc44b1f3c9da9b828452560077544987ee
+  metadata.gz: d68f6dda9700881f48a325f4eada41e436ffa1ecffbdf9d04a9d681d05443091d9889fe6336ffde3ac8125e8f2b11243091b914f8de02b7260ae28e044a013b1
+  data.tar.gz: 99bf9152662f7715155fba1b92dabfb6a39a5acf53ca620edb4d1d58779c09e378d63c92510363c9708df83abc0dad2c052d110d8b57684de39dffb446cad3e7

data/Rakefile

@@ -14,11 +14,52 @@ RDoc::Task.new(:rdoc) do |rdoc|
   rdoc.rdoc_files.include('lib/**/*.rb')
 end
 
+load 'rails/tasks/statistics.rake'
 
+Bundler::GemHelper.install_tasks
 
-load 'rails/tasks/statistics.rake'
+desc "Pick a random user as the winner"
+task :sass_watch do
+  require 'listen'
+  listen
+end
 
+def listen
+  listener = Listen.to('app/assets/stylesheets/megatron/', only: /\.scss$/) do |modified, added, removed|
+    output_paths("Changes detected to", modified)
+    output_paths("Added", added)
+    output_paths("Removed", removed)
 
+    build
+  end
 
-Bundler::GemHelper.install_tasks
+  build
+
+  listener.start # not blocking
+  sleep
+end
+
+def output_paths(prefix, paths)
+  unless paths.empty?
+    paths.map! { |p| localize_path(p) }
+    puts "#{prefix}: #{paths.join("\n")}"
+  end
+end
+
+def localize_path(path)
+  path.sub(/#{Dir.pwd}\//, '')
+end
+
+def destination
+  "public/assets/megatron/megatron-#{version}.css"
+end
+
+def build
+  system "sass app/assets/stylesheets/megatron/megatron.scss:#{destination}"
+  system "./node_modules/postcss-cli/bin/postcss --use autoprefixer #{destination} -o #{destination}"
+  puts "Built: #{destination}"
+end
 
+def version
+  Gem.loaded_specs["megatron"].version
+end

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

@@ -0,0 +1,36 @@
+var RemoteForm = require('remote-form')
+var bean = require('bean')
+var notify = require('notify')
+
+var MegatronForm = module.exports = RemoteForm.extend({
+
+  defaultMessages: {
+    beforeSend: 'Submitting...',
+    success: 'Success!',
+    error: 'Something went wrong.'
+  },
+
+  messageFor: function(type){
+    if (this.el.dataset[type])
+      return this.el.dataset[type]
+    else {
+      var msg = this.$('[data-ajax-event='+type+']').innerHTML || this.$('script.'+type).innerHTML
+      if (msg)
+        return msg
+      else
+        return this.defaultMessages[type]
+    }
+  },
+
+  beforeSend: function(req){
+    notify.progress(this.messageFor('beforeSend'))
+  },
+  
+  success: function(body, status, xhr){
+    notify.success(this.messageFor('success'))
+  },
+
+  error: function(xhr, error){
+    notify.error(this.messageFor('error'))
+  }
+})

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

@@ -0,0 +1,93 @@
+import * as utils from './utils'
+import * as bean from 'bean'
+import * as Dialog from 'dialog'
+var tap = require('tap-event')
+import * as Form from './form'
+import * as Link from './link'
+import * as _ from 'lodash'
+import * as notify from 'notify'
+import * as request from 'superagent'
+
+module.exports = {
+  Dialog: Dialog,
+  notify: notify,
+  utils: utils,
+  Event: bean,
+  Toggler: utils.Toggler,
+  Form: Form,
+  request: request,
+  Link: Link,
+  _: _
+}
+
+bean.on(document, 'DOMContentLoaded', pageLoad)
+
+// Support rails turbolinks page load event
+bean.on(document, 'page:change', pageChange)
+
+function pageLoad(){
+  utils.Toggler.listen()
+  utils.AutoNavigate.listen()
+  if(!window.Turbolinks) {
+    pageChange()
+  }
+}
+
+function pageChange(){
+  utils.linkHeadings()
+  utils.toggleActiveNav()
+  utils.autoSizeTextarea()
+  utils.highlightCode()
+  utils.Toggler.refresh()
+  utils.autofocus()
+  utils.notifyFormFlash()
+  utils.TimeSwitch.setup()
+  utils.Timeago.setup()
+  utils.Messages.load()
+}
+
+console.log(tap)
+
+// 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()
+  utils.Classie.toggle(document.querySelector('body'), 'active-nav')
+}
+
+function disableWith(event){
+  var buttons = event.currentTarget.querySelectorAll('[data-disable-with]')
+  Array.prototype.forEach.call(buttons, function(button){
+    button.disabled = true
+    utils.Classie.add(button, '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){
+  if (_.find(boundForms, function(el){return el == event.currentTarget}))
+    return
+  new Form({el: event.currentTarget}).submit(event)
+  boundForms.push(event.currentTarget)
+}

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

@@ -0,0 +1,58 @@
+var domify = require('domify')
+var Dialog = require('dialog')
+var bean = require('bean')
+
+module.exports = Link
+
+var counter = 0
+var DEFAULT_CONTINUE_BUTTON = 'Yes'
+
+function Link(){}
+
+Link.click = function(event){
+  event.preventDefault()
+  var el = event.currentTarget
+  var form = null
+  if (el.dataset.method) {
+    form = Link.buildForm(el)
+    document.body.appendChild(form)
+  }
+
+  if (el.dataset.confirm) {
+    var opts = {
+      title: el.dataset.confirm,
+      message: el.dataset.message || null,
+      continue: el.dataset.continue || DEFAULT_CONTINUE_BUTTON
+    }
+    if (el.dataset.method) {
+      opts.submit = '#' + form.getAttribute('id')
+      if (el.dataset.method.toLowerCase() === 'delete') {
+        opts.destructive = true
+        opts.continue = el.dataset.continue || 'Delete'
+      }
+    } else {
+      opts.follow = el.getAttribute('href')
+      opts.destructive = !!el.dataset.destructive
+      opts.submit = el.dataset.submit
+    }
+
+    new Dialog(opts).show()
+  } else {
+    form.submit()
+  }
+}
+
+Link.buildForm = function(el){
+  var method = el.dataset.method || 'post'
+  var csrfToken = document.querySelector('meta[name=csrf-token]')
+  var csrfParam = document.querySelector('meta[name=csrf-param]')
+
+  var form = domify('<form id="link-'+ (++counter) +'" class="hidden" action="'+el.href+'" method="post"></form>')
+
+  form.appendChild(domify('<input name="_method" value="' + method + '" type="hidden">'))
+
+  if (csrfToken && csrfParam)
+    form.appendChild(domify('<input name="' + csrfParam.getAttribute('content') + '" value="' + csrfToken.getAttribute('content') + '" type="hidden" />'))
+
+  return form
+}

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

@@ -0,0 +1,24 @@
+var bean = require('bean')
+var classie = require('classie')
+
+require('compose-tap-event')
+
+var AutoNavigate = {
+  listen: function(){
+    bean.on(document, "click", ".auto-navigate", AutoNavigate.trigger)
+  },
+
+  trigger: function(event) {
+    var target = event.target
+    if (target.tagName.toLowerCase() != 'a') {
+      link = event.currentTarget.querySelector('a.navigate')
+      if (event.metaKey) {
+        window.open(link)
+      } else {
+        bean.fire(link, 'click')
+      }
+    }
+  }
+}
+
+module.exports = AutoNavigate

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

@@ -0,0 +1,39 @@
+var bean = require('bean')
+var notify = require('notify')
+
+module.exports = {
+  notify: function(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(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() {
+    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))
+  }
+}

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

@@ -0,0 +1,112 @@
+var bean = require('bean')
+var CodeMirror = require('codemirror')
+var classie = require('classie')
+var Toggler = require('./toggler')
+var Messages = require('./messages')
+var AutoNavigate = require('./auto-navigate')
+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,
+  Classie: classie,
+  Toggler: Toggler,
+  Messages: Messages,
+  AutoNavigate: AutoNavigate,
+
+  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 (classie.has(element, 'language-'+lang)) {
+        classie.remove(element, 'language-'+lang)
+        classie.add(element, '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>"
+      classie.add(element, 'highlighted')
+    }
+  },
+
+  linkHeadings: function linkHeadings(){
+    var headings = document.querySelectorAll('h2, h3, h4')
+    for(let i = 0; i < headings.length; i++){
+      var heading = headings[i];
+      if (heading.id != ''){
+        heading.innerHTML = "<a href='#"+heading.id+"' class='heading-link'>"+ heading.innerHTML +"</a>"
+        heading.className = heading.className + " linked_heading";
+      }
+    }
+  },
+
+  autoSizeTextarea: function autoSizeTextarea() {
+
+    var autoHeight = function(node) {
+      if (!node.className.match(/fixed/)) {
+        var offset = node.offsetHeight - node.clientHeight;
+        node.style.height = 'auto';
+        node.style.height = (node.scrollHeight  + offset ) + 'px';
+      }
+    }
+    Array.prototype.forEach.call(document.querySelectorAll('textarea'), autoHeight)
+
+    bean.on(document.querySelector('body'), 'keyup', 'textarea', function(event){
+      autoHeight(event.currentTarget)
+    })
+  },
+
+  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())
+      classie.add(flash, 'hidden')
+    }
+  },
+
+  autofocus: function autofocus() {
+    var focus_el = document.querySelector('.autofocus')
+    if (focus_el) {
+      focus_el.focus()
+    }
+  }
+}

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

@@ -0,0 +1,97 @@
+var request = require('superagent')
+var bean = require('bean')
+
+var Messages = {
+  el: function(){
+    return document.querySelector('.pop-message')
+  },
+
+  fetch: function(){
+    request.get('/messages.json', this.success.bind(this));
+  },
+
+  dismiss: function(event){
+    self = this
+    event.preventDefault()
+    event.stopPropagation()
+
+    // Track dismissal
+    request.get(event.currentTarget.getAttribute('href')).end(function(response){
+      // Ask for any new messages
+      self.fetch()
+    })
+    
+    // Remove element and clear cache
+    this.el().remove()
+    window.Megatron.accountMessage = null
+
+  },
+
+  success: function(response) {
+    if (response.serverError) {
+      return
+    } else {
+      var options = JSON.parse(response.text)[0]
+      if(options) {
+        var html = this.messageHTML(options)
+        this.saveMessage(html)
+        this.showMessage(html)
+        bean.on(this.el(), 'click', '.dismiss', this.dismiss.bind(this))
+      }
+    }
+  },
+
+  messageHTML: function(options){
+    options.style = options.style || ''
+    var classnames = "message-content "
+    if (options.style) 
+      classnames += options.style
+    if (options.url)
+      classnames += " with-url"
+    if (options.dismissable)
+      classnames += " dismissable"
+
+    var html = "<div class='"+classnames+"'>"
+    if (options.dismissable)
+      html += "<a href='/messages/"+options.id+"/dismiss' class='dismiss' data-no-turbolink><span class='dismiss-icon x_circle_icon'></span><span class='hidden_label'>dismiss message</span></a>"
+
+    html += "<p>"
+    if (options.url)
+      html += "<a href='/messages/"+options.id+"/link'>"+options.body+"</a>"
+    else
+      html += options.body
+    html += "</p></div>"
+
+    return html
+  },
+
+  saveMessage: function(content){
+    window.Megatron.accountMessage = content
+  },
+
+  showMessage: function(content) {
+    if(this.el()) {
+      this.el().innerHTML = content
+    } else {
+      var header = document.querySelector('.site-header')
+      
+      // if message display isn't disabled by data-no-messages=true
+      if (header.dataset.noMessages == null) { 
+        header.innerHTML = "<div class='pop-message'>"+content+"</div>" + header.innerHTML
+      }
+    }
+  },
+
+  load: function(){
+    if(window.location.hostname.match(/app\.compose\.(io|dev)/)){
+      message = window.Megatron.accountMessage
+      if(!message) {
+        this.fetch()
+      } else {
+        this.showMessage(message)
+      }
+    }
+  }
+}
+
+module.exports = Messages