mtl 1.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: d9b073c97518294bc993c6cd712fee39740397f0
+  data.tar.gz: 9d6c66b39bb9948369fbd340c98b5a4ac1a54db3
+SHA512:
+  metadata.gz: 8f72c380af09be0c8bee8a8d94dd6a651d064da07e9b35018f8847a0bb5c7af4d7f506cd7dc6cb00d96b340d31d786d9a498ec00d5e6d5586715a83a538ff346
+  data.tar.gz: 8d1315bceb18bacec36926b18f42e34478ab13076f73c29d4fdfeb8b2ca1bef1792a1bf8ca217c1906ddbe5ec58ab74820cbf103a7440d8c292174215cb8476a

data/.gitignore

@@ -0,0 +1,12 @@
+/.bundle/
+/.yardoc
+/yard
+/Gemfile.lock
+/_yardoc/
+/coverage/
+/pkg/
+/spec/reports/
+/tmp/
+/node_modules/
+/doc/*
+!/doc/images

data/Gemfile

@@ -0,0 +1,9 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in mtl.gemspec
+gemspec
+
+# Linters
+gem 'rubocop', require: false
+gem 'scss_lint', require: false
+gem 'coffeelint', require: false

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2016 at-point ag (Baar, Switzerland) https://at-point.ch
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,104 @@
+# MTL: Materializer
+
+![Tardis: mtl](http://67.media.tumblr.com/5afe48c312ae01b8911eac26fa59dbb2/tumblr_ngya1wnTRm1sofmw0o1_500.gif)
+
+[![Build Status](https://travis-ci.org/at-point/mtl.svg?branch=master)](https://travis-ci.org/at-point/mtl)
+
+Welcome to **MTL: Materializer**, this is a Rails gem we use at [at-point](https://at-point.ch)
+to simplify UI designs for back-office heavy applications by leveraging the following
+tools:
+
+- [Materialize CSS][materialize]
+- [Material Icons][icons] font from Google
+- [Rails][rails] and it's asset pipeline
+- [Lodash][lodash] utilities
+- Google Material Design
+
+It requires jQuery (works very will with 3.x).
+
+## Installation
+
+Add this line to your Rails application's `Gemfile`, it supports Rails 4.2+
+(including Rails 5):
+
+```ruby
+gem 'mtl', git: 'https://github.com/at-point/mtl'
+```
+
+then execute:
+
+```bash
+$> bundle
+```
+
+And finally run the installer to copy the "base files" to your application:
+
+```
+$> ./bin/rails generate mtl:install [--skip-simple-form]
+# This copies the following files:
+#    - app/assets/stylesheets/mtl.scss
+#    - app/assets/stylesheets/mtl/_color.scss
+#    - app/assets/stylesheets/mtl/_variables.scss
+#    - config/initializers/simple_form.rb
+```
+
+Last but not least change your `application.css` to include:
+
+```
+//= require mtl
+```
+
+Ensure it **does not contain** any reference to `require_tree .`, as this leads
+to duplicate imports and weird asset pipeline errors.
+
+## Usage
+
+Customize and adapt your styling as wanted, feel free to modify things in
+`_variables.scss` to your liking. Try to avoid changing `_color.scss` when
+possible.
+
+## Development
+
+For development `node` and `npm` is required.
+
+After checking out the repo, run `bin/setup` to install dependencies. Then, run
+`rake spec` to run the tests. You can also run `bin/console` for an interactive
+prompt that will allow you to experiment.
+
+To install this gem onto your local machine, run `bundle exec rake install`.
+To release a new version, update the version number in `version.rb`, and then run
+`bundle exec rake release`, which will create a git tag for the version, push
+git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+
+### Update materialize-css or icons
+
+1. Change version in `package.json`
+2. Run `npm update` to fetch the new version
+3. Run `./bin/pull-all`: this copies all resources to vendor/assets
+4. Follow _NEXT STEPS_ closely as defined in output of `pull-all`
+
+### Documentation
+
+To generate the a browsable html documentation site, use following commands:
+
+- `./bin/yardoc`
+- `open doc/index.html`
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/at-point/mtl.
+This project is intended to be a safe, welcoming space for collaboration, and contributors
+are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org)
+code of conduct.
+
+### License
+
+[MIT License][license]. Copyright 2016 at-point ag. https://at-point.ch
+
+[materialize]: http://materializecss.com/
+[icons]: https://design.google.com/icons/
+[rails]: http://rubyonrails.org
+[lodash]: https://lodash.com/
+
+[header_helper.rb]: https://github.com/at-point/mtl/blob/master/lib/mtl/rails/header_helper.rb
+[license]: https://github.com/at-point/mtl/blob/master/LICENSE.txt

data/Rakefile

@@ -0,0 +1,6 @@
+require 'bundler/gem_tasks'
+require 'rspec/core/rake_task'
+
+RSpec::Core::RakeTask.new(:spec)
+
+task default: :spec

data/app/assets/javascripts/mtl/clickables.coffee

@@ -0,0 +1,25 @@
+oldHref = $.rails.href
+$.rails.href = (element) -> element.data('mtl-href') || oldHref(element)
+
+$(document).on 'click', '[data-mtl-href]', (e) ->
+  link = $(this)
+  method = link.data('method')
+
+  return $.rails.stopEverything(e) if !$.rails.allowAction(link)
+
+  if method
+    $.rails.handleMethod link
+    return $.rails.stopEverything(e)
+
+  if Turbolinks?.supported?
+    Turbolinks.visit($(this).data('mtl-href'))
+  else
+    window.location.href = $(this).data('mtl-href')
+
+$(document).on 'click', '[data-mtl-href] a', (ev) ->
+  ev.stopPropagation()
+
+$(document).on 'click', '[data-mtl-submit]', (ev) ->
+  ev.preventDefault()
+  selector = $(this).data('mtl-submit')
+  $(selector).submit()

data/app/assets/javascripts/mtl/collapsible.coffee

@@ -0,0 +1,43 @@
+# Hooks for collapsibles, with (external) triggers
+
+createTrigger = ($el) ->
+  $target = $($el.data('mtl-collapsible-toggle'))
+  currentIdx = $target.find('.collapsible-header.active:first').parent().index()
+  if currentIdx == -1
+    $target.find('.collapsible-header:first').addClass('active')
+    currentIdx = 0
+  else if currentIdx > 0
+    $el.addClass('active')
+
+  # hide collapsible-header and disable initial animation
+  $target.find('.collapsible-header').hide()
+  $target.find('.collapsible-header.active:first').siblings().css('display', 'block')
+
+  # enable accordion
+  createAccordion $target
+
+  # bind events
+  $el.off '.mtl-collapsible'
+  $el.on 'click.mtl-collapsible', (e) ->
+    e.preventDefault()
+    currentIdx = if currentIdx == 0
+      $el.addClass('active')
+      $target.find('.collapsible-header:last').trigger('click').parent().index()
+    else
+      $el.removeClass('active')
+      $target.find('.collapsible-header:first').trigger('click').parent().index()
+
+createAccordion = ($el) ->
+  $el.data('collapsible', 'accordion')
+    .collapsible(accordion: true)
+
+createExpandable = ($el) ->
+  $el.data('collapsible', 'expandable')
+    .collapsible(accordion: false)
+
+init = ->
+  $('[data-mtl-collapsible="accordion"]').each -> createAccordion($(this))
+  $('[data-mtl-collapsible="expandable"]').each -> createExpandable($(this))
+  $('[data-mtl-collapsible-toggle]').each -> createTrigger($(this))
+
+if Turbolinks? then $(document).on('turbolinks:load', init) else $(init)

data/app/assets/javascripts/mtl/configuration.coffee.erb

@@ -0,0 +1 @@
+@MTL.fileIcons = <%= Mtl.file_icons.to_json %>

data/app/assets/javascripts/mtl/document_modal.coffee

@@ -0,0 +1,130 @@
+IMAGE_EXTENSIONS = ['png', 'jpg', 'gif', 'bmp']
+MTL.templates.document_modal = """
+  <div class="document-modal">
+    <div class="document-modal-dimmer" data-mtl-document-modal="close"></div>
+    <div class="document-modal-header">
+      <div class="document-modal-title left white-text">
+        <%= MTL.fileIcon(filename, { class: 'left' }) %>
+        <%- title %>
+      </div>
+      <div class="document-modal-toolbar right">
+        <a href="<%- url %>" target="_blank" download="<%- filename %>">
+          <%= MTL.icon('file_download', { class: 'white-text left' }) %>
+        </a>
+        <a href="#" data-mtl-document-modal="close">
+          <%= MTL.icon('close', { class: 'white-text left' }) %>
+        </a>
+      </div>
+    </div>
+
+    <div class="document-modal-content">
+    </div>
+
+    <% if(hasNext) { %>
+      <div class="document-modal-next btn black">
+        <%= MTL.icon('keyboard_arrow_right', { class: 'white-text' }) %>
+      </div>
+    <% } %>
+
+    <% if(hasPrev) { %>
+      <div class="document-modal-prev btn black">
+        <%= MTL.icon('keyboard_arrow_left', { class: 'white-text' }) %>
+      </div>
+    <% } %>
+  </div>
+"""
+
+MTL.templates.no_preview = """
+  <div class="no-preview">
+    <p class="center">
+      <%= MTL.icon('visibility_off', { size: 'large grey-text' }) %>
+    </p>
+    <a href="<%- url %>" target="_blank" class="btn btn-primary truncate">
+      <%= MTL.icon('file_download', { class: 'left' }) %>
+      <%- title %>
+    </a>
+  </div>
+"""
+
+nextFileCard = ($fileCard) ->
+  $fileCard.next('[data-mtl-document-modal="open"]')
+
+prevFileCard = ($fileCard) ->
+  $fileCard.prev('[data-mtl-document-modal="open"]')
+
+hasNextFileCard = ($fileCard) ->
+  nextFileCard($fileCard).length > 0
+
+hasPrevFileCard = ($fileCard) ->
+  prevFileCard($fileCard).length > 0
+
+fileExtension = (filename) ->
+  String(filename).toLowerCase().split('.').pop()
+
+isImage = (filename) ->
+  _.includes(IMAGE_EXTENSIONS, fileExtension(filename))
+
+isPDF = (filename) ->
+  fileExtension(filename) == 'pdf'
+
+createPreview = ($container, title, filename, url) ->
+  switch
+    when isImage(filename)
+      $container.css 'height', 'auto'
+      $container.append($('<img/>', { src: url, alt: filename }))
+    when isPDF(filename) && PDFObject.supportsPDFs
+      $container.css 'height', '100%'
+      $pdfWrapper = $('<div/>').appendTo $container
+      PDFObject.embed(url, $pdfWrapper, { width: '800px' })
+    else
+      $container.css 'height', 'auto'
+      data = { title: title, filename: filename, url: url }
+      $container.append(MTL.renderTemplate('no_preview', data))
+
+findOrCreateDocumentModal = ->
+  return $('<div/>').appendTo('body') unless $('body > .document-modal').first().length
+  $('body > .document-modal').first()
+
+initDocumentModal = ($fileCard) ->
+  filename = $fileCard.data('mtl-document-name')
+  title = $fileCard.prop('title')
+  url = $fileCard.prop('href')
+  $modal = $(
+    MTL.renderTemplate(
+      'document_modal',
+      filename: filename,
+      title: title,
+      url: url,
+      hasNext: hasNextFileCard($fileCard),
+      hasPrev: hasPrevFileCard($fileCard)
+    )
+  )
+  $modal.find('.document-modal-next').on('click', -> initDocumentModal(nextFileCard($fileCard)))
+  $modal.find('.document-modal-prev').on('click', -> initDocumentModal(prevFileCard($fileCard)))
+  createPreview($modal.find('.document-modal-content'), title, filename, url)
+  findOrCreateDocumentModal().replaceWith($modal)
+  $('body').addClass('no-scroll')
+
+closeDocumentModal = ->
+  findOrCreateDocumentModal().remove()
+  $('body').removeClass('no-scroll')
+  $(document).off 'keydown.mtl-document-modal'
+
+$(document).on 'click', '[data-mtl-document-modal="open"]', (e) ->
+  e.preventDefault()
+  initDocumentModal($(e.currentTarget))
+  $(document).on 'keydown.mtl-document-modal', (e) ->
+    switch e.keyCode
+      when 27 # esc
+        closeDocumentModal()
+      when 37 # left
+        findOrCreateDocumentModal().find('.document-modal-prev').trigger 'click'
+      when 39 # right
+        findOrCreateDocumentModal().find('.document-modal-next').trigger 'click'
+
+$(document).on 'click', '[data-mtl-document-modal="close"]', (e) ->
+  e.preventDefault()
+  closeDocumentModal()
+
+
+

data/app/assets/javascripts/mtl/dropdown.coffee

@@ -0,0 +1,24 @@
+updateAttrs = ($el) ->
+  $el
+    .on('click', -> false)
+    .attr('data-constrainwidth', 'false')
+    .attr('data-beloworigin', 'true')
+    .attr('data-alignment', alignment($el))
+    .attr('data-activates', activator($el))
+
+alignment = ($el) -> $el.data('alignment') || 'right'
+
+activator = ($el) ->
+  id = $el.data('activates') || $el.attr('href') || $el.data('mtl-dropdown')
+  String(id).replace(/^#/, '')
+
+init = ->
+  $('[data-mtl-dropdown]').each ->
+    $el = $(this)
+    updateAttrs($el).dropdown()
+
+closeAll = ->
+  setTimeout -> $('[data-mtl-dropdown]').dropdown('close')
+
+if Turbolinks? then $(document).on('turbolinks:load', init) else $(init)
+$(window).on 'resize orientationchange', closeAll

data/app/assets/javascripts/mtl/hooks.coffee

@@ -0,0 +1,14 @@
+# Hooks for Turbolinks / jQuery et all
+
+# Hooks for data-mtl-*
+initMtlHooks = ->
+  $('[data-mtl-nav="side"]').each -> $(this).sideNav()
+  $('[data-mtl-tabs]').tabs()
+
+if Turbolinks? then $(document).on('turbolinks:load', initMtlHooks) else $(initMtlHooks)
+
+# Things to run only once via on('ready') and need to be re-run in turbolinks
+$ ->
+  $(document).on 'turbolinks:load', ->
+    Materialize.updateTextFields()
+    Waves.displayEffect()

data/app/assets/javascripts/mtl/icon.coffee.erb

@@ -0,0 +1,17 @@
+icon = (code, options = {}) ->
+  options.class = [<%= Mtl.icon_class.to_json %>, options.size, options.class].join ' '
+  delete options.size
+  $("<i/>", options).html(code)[0].outerHTML
+
+fileIcon = (filename, options = {}) ->
+  extension = String(filename).toLowerCase().split('.').pop();
+  [code, icon_class] = if MTL.fileIcons.hasOwnProperty(extension)
+    MTL.fileIcons[extension]
+  else
+    MTL.fileIcons.other
+
+  options.class = [icon_class, options.class].join ' '
+  icon(code, options)
+
+@MTL.icon = icon
+@MTL.fileIcon = fileIcon

data/app/assets/javascripts/mtl/modal.coffee

@@ -0,0 +1,32 @@
+MODAL_IDS = 1
+MODAL_TEMPLATE = '
+<div class="modal">
+  <div class="modal-content modal-loading">
+    Loading&hellip;
+  </div>
+</div>
+'
+
+initModal = ($el) ->
+  return initXhrModal($el) if $el.data('mtl-modal') == 'xhr'
+  return initDefaultModal($el) if $el.data('mtl-modal') == 'default'
+
+initXhrModal = ($el) ->
+  modalId = 'mtl-modal-' + (MODAL_IDS++)
+  ds = $el.prop('href')
+  $modal = $(MODAL_TEMPLATE).prop('id', modalId)
+  $modal.appendTo('body')
+  $modal.addClass(modalClass) if modalClass = $el.data('mtl-modal-class')
+  $el.prop('href', "##{modalId}")
+
+  initDefaultModal $el,
+    ready: -> $modal.load(ds)
+
+initDefaultModal = ($el, options = {}) -> $el.leanModal(options)
+
+$(document).on 'click', '[data-mtl-modal="close"]', (e) ->
+  e.preventDefault()
+  $(this).parents('.modal:first').closeModal()
+
+init = -> $('[data-mtl-modal]').each -> initModal($(this))
+if Turbolinks? then $(document).on('turbolinks:load', init) else $(init)

data/app/assets/javascripts/mtl/select.coffee

@@ -0,0 +1,44 @@
+prepareSelect = ($el) ->
+  val = $el.val()
+  index = $el.prop('selectedIndex')
+
+  if !val || val.length == 0 || index == 0
+    $el.prop('selectedIndex', 0)
+    $el.data('mtl-select:is-all-selected', true)
+
+  $el
+
+createSelectCallback = ($el) ->
+  ->
+    return unless $el.data('mtl-select') == 'multiple'
+
+    $dropdown = $el.prev('.multiple-select-dropdown')
+    val = $el.val()
+    index = $el.prop('selectedIndex')
+    isSelected = $el.data('mtl-select:is-all-selected')
+
+    # 1: Nothing has been selected => select "all"
+    if !val || val.length == 0
+      $el.data('mtl-select:is-all-selected', true)
+      $dropdown.find('li:first').trigger('click')
+    # 2: More than one item is selected and previously "all" was selected =>
+    #    disable select "all"
+    else if val.length > 1 && isSelected
+      $el.data('mtl-select:is-all-selected', false)
+      $dropdown.find('li:first').trigger('click')
+    # 3: More than one item is selected and previously "all" was not selected =>
+    #    select "all" again
+    else if val.length > 1 && index == 0
+      $el.data('mtl-select:is-all-selected', true)
+      $dropdown.find('li.active:not(:first)').trigger('click')
+
+init = ->
+  $('select[data-mtl-select], .simple_form .input-field.select > select.select').each ->
+    $this = prepareSelect $(this)
+    $this.material_select(createSelectCallback($this))
+
+teardown = ->
+  $('select.initialized').each -> $(this).material_select('destroy')
+
+if Turbolinks? then $(document).on('turbolinks:load', init) else $(init)
+$(document).on 'turbolinks:before-cache', teardown

data/app/assets/javascripts/mtl/templates.coffee

@@ -0,0 +1,4 @@
+@MTL.templates = {}
+@MTL.renderTemplate = (name, data) ->
+  MTL.templates[name] = _.template(MTL.templates[name]) unless _.isFunction(MTL.templates[name])
+  MTL.templates[name](data)

data/app/assets/javascripts/mtl/toc.coffee

@@ -0,0 +1,31 @@
+TEMPLATE = _.template '''
+<li>
+  <a href="#<%- id %>"><%- title %></a>
+</li>
+'''
+
+createTocEntry = ($el) ->
+  # Ensure id and get title
+  title = $el.data('mtl-section')
+  id = $el.prop('id') || "mtl-toc-#{Materialize.guid()}"
+  $el.prop('id', id)
+
+  # Render
+  TEMPLATE(id: id, title: title)
+
+initToc = ($wrapper) ->
+  # Clear
+  $wrapper.children().remove()
+
+  # Pin wrapper to top, if data-mtl-toc="pin"
+  $wrapper.pushpin(top: $wrapper.offset().top) if $wrapper.data('mtl-toc') == 'pin'
+
+  # Add entries
+  $sections = $('[data-mtl-section]').each ->
+    $wrapper.append createTocEntry($(this))
+
+  # Enable scrollspy
+  $sections.scrollSpy()
+
+init = -> $('[data-mtl-toc]').each -> initToc($(this))
+if Turbolinks? then $(document).on('turbolinks:load', init) else $(init)

data/app/assets/javascripts/mtl.js

@@ -0,0 +1,42 @@
+//=require "materialize/jquery.easing.1.3"
+//=require "materialize/velocity.min"
+//=require "materialize/hammer.min"
+//=require "materialize/jquery.hammer"
+//=require "lodash"
+//=require "pdfobject"
+
+//=require "materialize/global"
+
+//=require "materialize/collapsible"
+//=require "materialize/dropdown"
+//=require "materialize/leanModal"
+//=require "materialize/materialbox"
+//=require "materialize/parallax"
+//=require "materialize/tabs"
+//=require "materialize/tooltip"
+//=require "materialize/waves"
+//=require "materialize/toasts"
+//=require "materialize/sideNav"
+//=require "materialize/scrollspy"
+//=require "materialize/forms"
+//=require "materialize/slider"
+//=require "materialize/date_picker/picker"
+//=require "materialize/date_picker/picker.date"
+//=require "materialize/pushpin"
+
+//= require_self
+//= require "mtl/configuration"
+//= require "mtl/templates"
+//= require "mtl/hooks"
+//= require "mtl/clickables"
+//= require "mtl/collapsible"
+//= require "mtl/dropdown"
+//= require "mtl/modal"
+//= require "mtl/select"
+//= require "mtl/toc"
+//= require "mtl/icon"
+//= require "mtl/document_modal"
+
+
+// Export
+window.MTL = {}

data/app/assets/stylesheets/mtl/all.scss

@@ -0,0 +1,69 @@
+@charset 'UTF-8';
+
+// Reset
+@import 'materialize/normalize';
+
+// components
+@import 'materialize/global';
+@import './extend/global';
+
+@import './extend/material-icons';
+
+@import 'materialize/grid';
+@import './extend/grid';
+
+@import 'materialize/navbar';
+
+// @import 'materialize/roboto';
+@import './extend/roboto-rails'; // using asset_url's
+
+@import 'materialize/typography';
+
+@import 'materialize/cards';
+@import './extend/cards';
+
+@import 'materialize/toast';
+
+@import 'materialize/tabs';
+
+@import 'materialize/tooltip';
+@import 'materialize/buttons';
+@import './extend/buttons';
+@import 'materialize/dropdown';
+@import 'extend/dropdown';
+@import 'materialize/waves';
+@import 'materialize/modal';
+@import 'materialize/collapsible';
+
+@import 'materialize/chips';
+@import './extend/chips';
+
+@import 'materialize/materialbox';
+@import 'materialize/forms/forms';
+@import './extend/forms';
+@import './extend/forms/input-fields';
+@import 'materialize/table_of_contents';
+@import './extend/toc';
+
+@import 'materialize/sideNav';
+@import './extend/side-nav';
+
+@import './extend/avatars';
+
+@import 'materialize/preloader';
+@import 'materialize/slider';
+@import 'materialize/carousel';
+@import 'materialize/date_picker/default';
+@import 'materialize/date_picker/default.date';
+@import 'materialize/date_picker/default.time';
+
+// extending the materializer library even more
+@import './extend/mixins';
+@import './extend/collection-files';
+@import './extend/typography';
+@import './extend/document-modals';
+
+// including layouts
+html { height: 100%; } // yes, necessary
+@import './layouts/default';
+@import './layouts/single';