epi_js 0.0.21 → 0.0.22

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 92548e2a9cb43b50c4d16c6e75264219403fba2f
-  data.tar.gz: 017ca7d01de9abd91e0a7de5060813ef1830d97e
+  metadata.gz: bc857a298975eee6bc9d4d434d705b7e4e3a2e79
+  data.tar.gz: ca18662bf2e10f370660b61d527a80442dab5ede
 SHA512:
-  metadata.gz: eb859b9a19725f569a416aa8eb0137c9e60a65393530f127cfbc1015352caadf5cc70236f3be9395b621897cf18de2b89c03e142fd7968c99f67b39815c7a498
-  data.tar.gz: 80ba2a932d8516f8967c82c3607fe793d80101ae5f85364eeea92830f869734d1a9534ffdbbd690b663ee8d0070222dbfb4c3ada1ff49ea2140b03c613e70a96
+  metadata.gz: c715d378e65f514b37093f7e83300cf30850284db1f8a233f2e26381d9338554a951cdf219de6e94f3a951ea8d2ef50e3f1a690cf05fa543ff9dde8e081feed2
+  data.tar.gz: cd59faeed5a3071313c8c860a8082abe4ba8a2963f8f2e86166b0b56ca54b6698775d8d6400396592ec4af93bcb0ce1ec9826408e4af0993b2aa3b0a3976aaa4

data/README.md

@@ -25,42 +25,84 @@ Or install it yourself as:
 ### AJAX Modal
 Add to your `app/assets/javascripts/application.js`
 
-	//= require ajax_modal
+    //= require ajax_modal
+
+#### Via data attribute
+Add `data-toggle=ajax-modal` to your link
 #### Via class
 Add `ajax-modal` class to your link
 #### Via JavaScript
-	$.ajaxModal(url);
+
+    $.ajaxModal(url);
 
 ### Flash Message
 Add to your `app/assets/javascripts/application.js`
 
-	//= require flash_message
-And to your `app/assets/stylesheets/application.css`
+    //= require flash_message
 
-	*= require flash_message
 #### For Rails flash fessage
 Wrap your flash message in a div with `.flash_messages` class, e.g.
 
-	.flash-messages
+    .flash-messages
       - unless flash.blank?
         - flash.each do |name, msg|
           .alert.fade{ class: "alert-#{ name == :notice ? 'success' : 'error' }" }
             %a.close{ data: { dismiss: :alert } } ×
             = msg
+
 #### Via JavaScript
-	$.flashAlert(message, alert_class);
+
+    $.flashAlert(message, alert_class);
+
 `alert_class` is `alert-notice` etc.
 
+#### Customisation
+You can change the markup of the dismiss link by setting the following variable:
+
+    $.flashAlert.defaults.dismissLink
+
+### Option Filter
+Add to your `app/assets/javascripts/application.js`
+
+    //= require option_filter
+
+#### Via data attributes
+Add the jQuery selector of the target input as `data-option-filter-target` to the source input, e.g.
+
+    data-option-filter-target="#input-box-1"
+
+To show an option in the target input when an option is selected in the source input, add the value of the source input as `data-option-filter-value`, e.g.
+
+    data-option-filter-value="1"
+
+When the option with value 1 is selected in source input, only options with `data-option-filter-value="1"` will be displayed.
+
+You can also add `data-option-filter-disable-empty` to the source input, so that when there is no options available for the current value, the target input will be disabled.
+
+### Responsive Table
+
+Add to your `app/assets/javascripts/application.js`
+
+    //= require responsive_table
+
+And to your `app/assets/stylesheets/application.css`
+  
+    *= require responsive_table
+
+Then add `.table-responsive-xs` or `.table-responsive-sm` to tables.
+You can override the label for each table cell by adding `data-label` to the `td` element.
+
 ### Visibility Map
 Add to your `app/assets/javascripts/application.js`
 
-	//= require visibility_map
+    //= require visibility_map
+
 #### Via data attributes
-Set `data-visibility-map` of a select box or radio button group to a JSON string, e.g.
-	
-	data-visibility-map='{"foo":"#foo","bar":"#bar"}'
+Set `data-visibility-map` of a select box, radio button group or check boxes to a JSON string, e.g.
+
+    data-visibility-map='{"foo":"#foo","bar":"#bar"}'
 Or for SimpleForm, use:
-	
-	f.input :some_select, input_html: {data: {visibility_map: {foo: '#foo', bar: '#bar'}}}
-	
+
+    f.input :some_select, input_html: {data: {visibility_map: {foo: '#foo', bar: '#bar'}}}
+
 When the value of the input element is `foo`, the element `#foo` will be visible and `#bar` will be hidden, and vice versa. The value of the JSON key value pair can be any jQuery selectors.

data/lib/epi_js/version.rb

@@ -1,3 +1,3 @@
 module EpiJs
-  VERSION = "0.0.21"
+  VERSION = "0.0.22"
 end

data/vendor/assets/javascripts/ajax_modal.coffee

@@ -1,4 +1,5 @@
 (($) ->
+  'use strict'
   $.ajaxModal = (url, params) ->
     $.get url, params, (data) ->
       $modal = if $('#modalWindow').size() > 0 then $('#modalWindow') else $('<div>').addClass('modal fade').attr('id', 'modalWindow')
@@ -19,9 +20,9 @@
       .on 'shown.bs.modal shown', (e) ->
         setTimeout("$('#modalWindow [autofocus]').first().focus()", 0)
         $(document).trigger('ajax-modal-shown')
-) jQuery
-
-$ ->
-  $(document.body).on 'click', 'a.ajax-modal', (e) ->
-    e.preventDefault()
-    $.ajaxModal $(@).attr('href'), $(@).data('params')
+        
+  $ ->
+    $(document.body).on 'click', 'a.ajax-modal, a[data-toggle="ajax-modal"]', (e) ->
+      e.preventDefault()
+      $.ajaxModal $(@).attr('href'), $(@).data('params')
+) jQuery

data/vendor/assets/javascripts/flash_message.coffee

@@ -1,4 +1,5 @@
 (($) ->  
+  'use strict'
   $.flashAlert = (message, type, timeout = 6000, dismissLink) ->
     dismissLink ?= $.flashAlert.defaults.dismissLink
     $alert = $('<div>').addClass("alert fade in #{type}").append(message).append(dismissLink)
@@ -11,10 +12,18 @@
     true
   $.flashAlert.defaults = {
     dismissLink: '<a href="#" title="Hide this message" data-dismiss="alert" class="dismiss-flash">Dismiss</a>'
+    affix: false
   }
+  
+  $ ->
+    if $.flashAlert.defaults.affix and $('.navbar-static-top').size() > 0
+      $('.flash-messages').affix
+        offset:
+          top: ->
+            $('.navbar-static-top').outerHeight(true)
+    
+    if $('.flash-messages .alert').size() > 0
+      $('.flash-messages .alert').addClass('in')
+      setTimeout("$('.flash-messages .alert').alert('close');", 6000)
 ) jQuery
 
-$ ->
-  if $('.flash-messages .alert').size() > 0
-    $('.flash-messages .alert').addClass('in')
-    setTimeout("$('.flash-messages .alert').alert('close');", 6000)

data/vendor/assets/javascripts/option_filter.coffee

@@ -0,0 +1,39 @@
+(($) ->
+  'use strict'
+  class OptionFilter
+    constructor: (element) ->
+      @element      = element
+      @filterTarget = $(@element.data('option-filter-target'))
+      @allOptions   = $('[data-option-filter-value]', @filterTarget)
+      
+      @disableEmpty = @element.data('option-filter-disable-empty')?
+      
+    filter: ->
+      valueSelected = @element.val().toString()
+      
+      filteredOptionsCount = 0
+
+      if valueSelected is ''
+        @allOptions.hide()
+      else
+        $toShow = @allOptions.filter("[data-option-filter-value='#{valueSelected}']").show()
+        @allOptions.not($toShow).hide()
+        filteredOptionsCount = $toShow.size()
+        
+      @filterTarget.val('').trigger('change.option-filter')
+      @filterTarget.prop('disabled', @disableEmpty and (filteredOptionsCount is 0))
+    
+  $.fn.optionFilter = ->
+    @each ->
+      data = $(this).data('option-filter')
+      unless data?
+        $(this).data('option-filter', data = new OptionFilter $(this))
+      data.filter()
+      
+  $ ->
+    $('[data-option-filter-target]').optionFilter()
+    
+    $(document.body).on 'change', '[data-option-filter-target]', (e) ->
+      $(this).optionFilter()
+    
+) jQuery

data/vendor/assets/javascripts/responsive_table.coffee

@@ -0,0 +1,11 @@
+(($) ->
+  'use strict'
+  $(document).on('set-label', 'table.table-responsive-xs, .table-responsive-sm', ->
+    $('thead th', $(this)).each (index) ->
+      label = if $(this).data('label')? then $(this).data('label') else $(this).text()
+      $("tr td:nth-child(#{index + 1})", $(this).closest('thead').next('tbody')).attr('data-label', label)
+  )
+  
+  $('table.table-responsive-xs, table..table-responsive-sm').each ->
+    $(this).trigger('set-label')
+) jQuery

data/vendor/assets/stylesheets/epi_utilities.sass

@@ -0,0 +1,37 @@
+@import 'bootstrap/variables'
+
+@mixin responsive-margins-and-paddings($gap-size, $screen-size-suffix: '')
+  $positions: top right bottom left
+  @each $position in $positions
+    .margin-#{$position}-#{$gap-size}#{$screen-size-suffix}
+      margin-#{$position}: #{$gap-size}px !important
+    
+    .padding-#{$position}-#{$gap-size}#{$screen-size-suffix}
+      padding-#{$position}: #{$gap-size}px !important
+    
+@for $i from 0 through 12
+  @include responsive-margins-and-paddings(($i * 5))
+  @media (max-width: $screen-xs-max)
+    @include responsive-margins-and-paddings(($i * 5), '-xs')
+  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max)
+    @include responsive-margins-and-paddings(($i * 5), '-sm')
+  @media (min-width: $screen-md-min) and (max-width: $screen-md-max)
+    @include responsive-margins-and-paddings(($i * 5), '-md')
+  @media (min-width: $screen-lg-min)
+    @include responsive-margins-and-paddings(($i * 5), '-lg')
+    
+.mini
+  width: 1px
+  
+.nowrap
+  white-space: nowrap
+  
+.display-none        
+  display: none
+
+@media print
+  .no-print
+    &:before
+      content: 'This page cannot be printed. Please view the document online.'
+    *
+      display: none !important

data/vendor/assets/stylesheets/responsive_table.sass

@@ -0,0 +1,41 @@
+@import 'bootstrap/variables'
+
+@mixin responsive-table()
+  &, thead, tbody, th, td, tr
+    display: block
+  td
+    border: none
+  thead
+    position: absolute
+    top: -9999px
+    left: -9999px
+    border: none
+    tr
+      border: none
+      td, th
+        border: none
+  tbody
+    tr
+      border: 1px solid $table-border-color
+      & + tr
+        margin-top: 5px
+      td, th
+        border-top: none
+        text-align: left
+        width: 100% !important
+        & + td
+          border-top: 1px dotted lighten($table-border-color, 8%)
+        &:before
+          display: block
+          white-space: nowrap
+          font-weight: bold
+          text-transform: uppercase
+          content: attr(data-label)
+
+@media (max-width: $screen-xs-max)
+  table.table-responsive-xs
+    @include responsive-table()
+
+@media (max-width: $screen-sm-max)
+  table.table-responsive-sm
+    @include responsive-table()

metadata

@@ -1,97 +1,97 @@
 --- !ruby/object:Gem::Specification
 name: epi_js
 version: !ruby/object:Gem::Version
-  version: 0.0.21
+  version: 0.0.22
 platform: ruby
 authors:
 - Shuo Chen
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-03-24 00:00:00.000000000 Z
+date: 2016-04-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '3.0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '3.0'
 - !ruby/object:Gem::Dependency
   name: coffee-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '3.2'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '3.2'
 - !ruby/object:Gem::Dependency
   name: sass-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '3.2'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '3.2'
 - !ruby/object:Gem::Dependency
   name: bootstrap-sass
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
   name: bundler
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '1.0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '1.0'
 - !ruby/object:Gem::Dependency
   name: rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '3.0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '3.0'
 description: jQuery scripts used in various projects
@@ -101,7 +101,7 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
-- .gitignore
+- ".gitignore"
 - Gemfile
 - LICENSE.txt
 - README.md
@@ -113,8 +113,12 @@ files:
 - lib/epi_js/version.rb
 - vendor/assets/javascripts/ajax_modal.coffee
 - vendor/assets/javascripts/flash_message.coffee
+- vendor/assets/javascripts/option_filter.coffee
+- vendor/assets/javascripts/responsive_table.coffee
 - vendor/assets/javascripts/visibility_map.coffee
+- vendor/assets/stylesheets/epi_utilities.sass
 - vendor/assets/stylesheets/flash_message.sass
+- vendor/assets/stylesheets/responsive_table.sass
 homepage: ''
 licenses: []
 metadata: {}
@@ -124,17 +128,17 @@ require_paths:
 - lib
 required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
-  - - '>='
+  - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - '>='
+  - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.4.6
+rubygems_version: 2.4.8
 signing_key: 
 specification_version: 4
 summary: jQuery scripts used in various projects