material_raingular 0.0.3 → 0.0.3.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: cbdd155f510682affee2271e8eb83df2446ad959
-  data.tar.gz: b1ee0aed082d80b1f9145cd3d00fdacb178bd1a9
+  metadata.gz: 7ea94f133f48652bdd35aad89979c597ce1c7893
+  data.tar.gz: 203d64c5846c918081873b6441732814db7aa025
 SHA512:
-  metadata.gz: ae067161369d177749ee9767d0e490d0522c58c33eff3d94f6eb24bce45bde3ce446649b9155f5846bd852e07375bb4c04ba45452a9fc23728a9520050d80c4f
-  data.tar.gz: 4a15effbbd28995118f464612fcd0effab1cd5c96d126ef23edf9ec564b8f0544929c0d92bd6955be3a9dc14dcbd2aa11904e251e1ccbcc09201e6baf9d26335
+  metadata.gz: d5e66387e6d9135d424b33ba1c9db028124063222aad8771e1ae6da31c53929e45f569fdcc1f2c88e653e208fae99d49344ad47b68f4f83adc41630f87e56b9f
+  data.tar.gz: fb439a409e1bfcbe33f3445cf4ef730075f5bd41b2c6d42e8d4e87876909bbbdf123dc917ef3cb0c4c20722f4267e59489c977016ce2e9a30ecd5f9284c22445

data/lib/assets/javascripts/directives/filteredselect.js.coffee

@@ -1,4 +1,5 @@
-REGEXP = /^\s*([\s\S]+?)(?:\s+as\s+([\s\S]+?))?(?:\s+group\s+by\s+([\s\S]+?))?(?:\s+disable\s+when\s+([\s\S]+?))?\s+for\s+(?:([\$\w][\$\w]*)|(?:\(\s*([\$\w][\$\w]*)\s*,\s*([\$\w][\$\w]*)\s*\)))\s+in\s+([\s\S]+?)(?:\s+track\s+by\s+([\s\S]+?))?$/;
+class SelectOptions
+  REGEXP: /^\s*([\s\S]+?)(?:\s+as\s+([\s\S]+?))?(?:\s+group\s+by\s+([\s\S]+?))?(?:\s+disable\s+when\s+([\s\S]+?))?\s+for\s+(?:([\$\w][\$\w]*)|(?:\(\s*([\$\w][\$\w]*)\s*,\s*([\$\w][\$\w]*)\s*\)))\s+in\s+([\s\S]+?)(?:\s+track\s+by\s+([\s\S]+?))?$/;
       # 1: Model Value
       # 2: Display Value
       # 3: group by expression (groupByFn)
@@ -8,126 +9,261 @@ REGEXP = /^\s*([\s\S]+?)(?:\s+as\s+([\s\S]+?))?(?:\s+group\s+by\s+([\s\S]+?))?(?
       # 7: object item value variable name
       # 8: collection
       # 9: track by expressionj
+  constructor: (@unparsed,@html) ->
+    @filters  = @unparsed.split('|')
+    @options  = @filters.shift()
+    @match    = @options.match(@REGEXP)
+    @raiseError() if !@match
+  raiseError: ->
+    throw new Error(
+      "Expected expression in form of " +
+      "'_select_ (as _label_)? for (_key_,)?_value_ in _collection_'" +
+      " but got '" + @unparsed + "'. Element: " + @html)
+class SelectFunctions
+  constructor: (match,parse) ->
+    @collection   = parse(match[8])
+    @modelValue   = match[1].replace(match[5] + '.','')
+    @viewValue    = if match[2] then match[2].replace(match[5] + '.','') else @modelValue
+    @viewValueFn  = parse(@viewValue || @modelValue)
+    @modelValueFn = parse(@modelValue || @viewValue)
+
+class MobileTemplate
+  constructor: (@element,functions) ->
+    @template          = angular.element("<ul> </ul>")
+    @search            = angular.element "<input type='search' placeholder='Search'>"
+    @tempHolder        = angular.element("<div class='filtered-select' ></div>")
+    @body              = angular.element(document.body)
+    @mousedownFunction = functions[0]
+    @keydownFunction   = functions[1]
+    @inputFunction     = functions[2]
+
+    @bind()
+    @stylize()
+    @attachElements()
+  attachElements: ->
+    @tempHolder.append @search
+    @tempHolder.append @template
+    @body.append @tempHolder
+  stylize: ->
+    ulHeight = =>
+      full = window.innerHeight
+      full = full/2 if @element.hasClass('bottom')
+      full - @search[0].offsetHeight + 'px'
+    @tempHolder.addClass('bottom') if @element.hasClass('bottom')
+    @template.css('height',ulHeight())
+
+  bind: ->
+    @element.bind 'mousedown', (event) =>
+      @mousedownFunction(@tempHolder,@search,event)
+    @body.bind 'keydown', (event) =>
+      @keydownFunction(@tempHolder,event)
+    @search.bind 'input', (event) =>
+      @inputFunction(event)
+
+class StandardTemplate
+  constructor: (@element,attrs,functions,@disabled) ->
+    @span            = angular.element "<span></span>"
+    @search          = angular.element "<input style='opacity:0.5'class='autocomplete' type='search' placeholder='" + attrs.placeholder + "'>"
+    @tempHolder      = angular.element "<div class='autocomplete menu md-whiteframe-z1'>"
+    @template        = @tempHolder
+    @typeAhead       = angular.element "<span style='position:absolute;'></span>"
+    @inputFunction   = functions[0]
+    @focusFunction   = functions[1]
+    @blurFunction    = functions[2]
+    @keydownFunction = functions[3]
+    @attachElements()
+    @stylize()
+    @bind()
+  stylize: ->
+    @search.addClass('md-input') if @element.hasClass('md-input')
+    @search.css({'width': '100%','color': 'black'})
+    searchCss = window.getComputedStyle(@search[0])
+    @typeAhead.css('padding-left', parseFloat(searchCss["padding-left"]) + parseFloat(searchCss["margin-left"]) + parseFloat(searchCss["border-left-width"]) + 'px')
+    @typeAhead.css('padding-top',  parseFloat(searchCss["padding-top"])  + parseFloat(searchCss["margin-top"])  + parseFloat(searchCss["border-top-width"])  + 'px')
+
+  bind: ->
+    @search.bind 'input', (event)=>
+      @inputFunction(@search,@typeAhead,event)
+    @search.bind 'focus', (event)=>
+      @focusFunction(event)
+    @search.bind 'blur', (event)=>
+      @blurFunction(@search,event)
+    @search.bind 'keydown', (event)=>
+      @keydownFunction(@search,@typeAhead,@template,event)
+  attachElements: ->
+    @span.append @typeAhead
+    @span.append @search
+    @span.append @tempHolder
+    @element.append @span
+
+class EventFunctions
+  constructor: (@functions,@buildTemplate,@updateValue,@filteredList,@filter,@timeout,@parse,@scope,@disabled) ->
+
+  inputFunction: (search,typeAhead,event) =>
+    location = search[0].selectionStart
+    if location > 3
+      if @functions.viewValueFn(@filteredList()[0])
+        search.val(@functions.viewValueFn(@filteredList()[0]))
+      else
+        search.val(search.val()[0..location - 1])
+      search[0].setSelectionRange(location,location)
+    else
+      search.val(search.val()[0..2])
+    typeAhead.html(search.val()[0..location - 1])
+    @buildTemplate()
+  focusFunction: (event) =>
+    @buildTemplate()
+  blurFunction: (search,event) =>
+    obj={}
+    obj[@functions.viewValue] = search.val()
+    val = @filter('filter')(@functions.collection(@scope), obj)[0]
+    @updateValue @functions.modelValueFn(val)
+    search.css
+    search.val(@functions.viewValueFn(val))
+  keydownFunction: (search,typeAhead,template,input) =>
+    keypress = (direction) ->
+      index = if direction == 'next' then 0 else template.find('a').length - 1
+      selected = angular.element(template[0].getElementsByClassName('active')[0])
+      if selected.hasClass('active')
+        selected.removeClass('active')
+        until complete
+          selected = angular.element(selected[0][direction + 'Sibling']) if selected[0]
+          complete = !!selected[0]
+          complete = selected[0].tagName == 'A' if complete
+          complete = true if !selected[0]
+      selected = angular.element(template.find('a')[index]) unless selected[0]
+      ind = 0
+      for el,i in template[0].getElementsByTagName('a')
+        ind = i if el == selected[0]
+      scroll = selected[0].scrollHeight * ind
+      selected[0].parentElement.scrollTop = scroll
+      selected.addClass('active')
+      location = search[0].selectionStart
+      search.val(selected.text())
+      search[0].setSelectionRange(location,location)
+      typeAhead.html(selected.text()[0..location - 1])
+    if input.keyCode == 40
+      input.preventDefault()
+      keypress('next')
+    if input.keyCode == 38
+      input.preventDefault()
+      keypress('previous')
+  mkeydownFunction: (tempHolder,event) =>
+    tempHolder.removeClass('active') if event.keyCode == 27
+  mousedownFunction: (tempHolder,search,event) =>
+    return if tempHolder.hasClass('active')
+    return if @disabled
+    search.val('')
+    @buildTemplate()
+    tempHolder.css('top',event.clientY)
+    tempHolder.css('transition','none')
+    @timeout ->
+      tempHolder.css('transition','')
+      tempHolder.css('top','')
+      tempHolder.addClass('active')
+  minputFunction: (event) =>
+    @buildTemplate()
+
+  standard: ->
+    [@inputFunction,@focusFunction,@blurFunction,@keydownFunction]
+  mobile: ->
+    [@mousedownFunction,@mkeydownFunction,@minputFunction]
+
 
 angular.module('FilteredSelect', [])
   .directive 'ngFilteredSelect', ($parse,$filter,$timeout)->
     require: 'ngModel'
     link: (scope,element,attrs,ngModel) ->
-      filters = attrs.ngSelectOptions.split('|')
-      options = filters.shift()
-      match = options.match(REGEXP);
-      if !match
-        throw new Error(
-          "Expected expression in form of " +
-          "'_select_ (as _label_)? for (_key_,)?_value_ in _collection_'" +
-          " but got '" + attrs.ngSelectOptions + "'. Element: " + element[0].outerHTML)
-      collection   = $parse(match[8])
-      modelValue   = match[1].replace(match[5] + '.','')
-      viewValue    = if match[2] then match[2].replace(match[5] + '.','') else modelValue
-      template     = angular.element("<ul> </ul>")
-      search       = angular.element "<input type='search' placeholder='Search'>"
-      tempHolder   = angular.element("<div class='filtered-select' ></div>")
-      viewValueFn  = $parse(viewValue || modelValue)
-      modelValueFn = $parse(modelValue || viewValue)
-      tempHolder.addClass('bottom') if element.hasClass('bottom')
-      template.bind 'mousewheel DOMMouseScroll', (event)->
-        delta = event.wheelDelta or event.originalEvent and event.originalEvent.wheelDelta or -event.detail
-        bottomOverflow = template[0].scrollTop + template.outerHeight() - template[0].scrollHeight >= 0
-        topOverflow = template[0].scrollTop <= 0
-        if delta < 0 and bottomOverflow or delta > 0 and topOverflow
-          event.preventDefault()
-      scrollStart = null
-      scrollTop   = null
-      template.bind 'touchstart', (event)->
-        event.stopPropagation()
-        scrollStart = event.originalEvent.touches[0].clientY
-      template.bind 'touchmove', (event) ->
-        event.stopPropagation()
-        scroll = event.originalEvent.touches[0].clientY
-        scrollStart = scroll unless scrollStart
-        if scroll > scrollStart
-          event.preventDefault() if template.scrollTop() == 0
-        else if scroll < scrollStart
-          newScrollTop = template.scrollTop()
-          event.preventDefault() if scrollTop == newScrollTop
-          scrollTop = newScrollTop
-        scrollStart = scroll
-        return true
-      template.bind 'touchend', ->
-        event.stopPropagation()
-        scrollStart = null
-      body = angular.element('body')
-      body.bind 'keydown', (event) ->
-        tempHolder.removeClass('active') if event.keyCode == 27
-      tempHolder.append search
-      tempHolder.append template
-      body.append tempHolder
-      ulHeight = ->
-        full = window.innerHeight
-        full = full/3 if element.hasClass('bottom')
-        full - search[0].offsetHeight + 'px'
-      template.css('height',ulHeight())
-      scope.$watch collection, (newVal,oldVal) ->
-        return if newVal == oldVal
-        setInitialValue()
-        buildTemplate()
-      scope.$watch attrs.ngModel, (newVal,oldVal) ->
-        return if newVal == oldVal
-        setInitialValue()
-      search.bind 'input', ->
-        buildTemplate()
-      buildTemplate = ->
-        list= []
+      equiv = (left,right) ->
+        return true if left == right
+        return true if (!!left && !!right) == false
+        if !isNaN(left) && !isNaN(right)
+          return true if parseFloat(left) == parseFloat(right)
+        false
+      filteredList = (bool)->
+        if bool
+          bool = (left,right) ->
+            !!left.match(new RegExp("^" + right))
+        location = elements.search[0].selectionStart || elements.search.val().length
         obj={}
-        obj[viewValue] = search.val() || ''
-        return unless collection(scope)
-        filteredList = $filter('orderBy')($filter('filter')(collection(scope), obj), viewValue)
-        for filter in filters
+        obj[functions.viewValue] = elements.search.val()[0..location - 1] || ''
+        return unless functions.collection(scope)
+        fList = $filter('orderBy')($filter('filter')(functions.collection(scope), obj,bool), functions.viewValue)
+        for filter in options.filters
           [filterType,value] = filter.replace(/\s+/,'').split(':')
-          filteredList = $filter(filterType)(filteredList, value)
-        for item in filteredList
-          li = angular.element '<li ng-model-value="' + modelValueFn(item) + '">' + viewValueFn(item) + '</li>'
+          fList = $filter(filterType)(fList, value)
+        fList
+      buildTemplate = ->
+        elements.template.empty()
+        return unless filteredList()
+        for item in filteredList()
+          if isMobile
+            li = angular.element '<li>' + functions.viewValueFn(item) + '</li>'
+          else
+            li = angular.element '<a class="item">' + functions.viewValueFn(item) + '</a>'
+          ip = angular.element '<input type="hidden">'
+          ip.val(functions.modelValueFn(item))
+          li.append(ip)
           li.bind 'mousedown', ($event)->
-            updateValue($event.target.attributes['ng-model-value'].value)
-          list.push li
-        template.empty()
-        template.append(list)
+            updateValue($event.target.children[0].value)
+          elements.template.append(li)
       setInitialValue = ->
-        unless model = ngModel.$modelValue
-          view = attrs.placeholder
-          element.css('color','rgba(0,0,0,0.4)')
-        else
-          element.css('color','')
+        unless isMobile
           obj = {}
-          obj[modelValue] = model
-          list = $filter('filter')(collection(scope), obj)
+          obj[functions.modelValue] = ngModel.$modelValue
+          list = $filter('filter')(functions.collection(scope), obj,equiv)
           viewScope = list[0] if list
-          view = if viewScope then viewValueFn(viewScope) else attrs.placeholder
-        element.html('')
-        element.html(view)
-      setInitialValue()
-      buildTemplate()
+          elements.search.val(if viewScope then functions.viewValueFn(viewScope) else '')
+          elements.typeAhead.html(elements.search.val())
+        else
+          unless model = ngModel.$modelValue
+            view = attrs.placeholder
+            element.css('color','rgba(0,0,0,0.4)')
+          else
+            element.css('color','')
+            obj = {}
+            obj[functions.modelValue] = model
+            list = $filter('filter')(functions.collection(scope), obj,true)
+            viewScope = list[0] if list
+            view = if viewScope then functions.viewValueFn(viewScope) else attrs.placeholder
+          element.html('')
+          element.html(view)
+
       updateValue = (model) ->
         ngModel.$setViewValue(model)
-        tempHolder.removeClass('active')
-      done = false
-      fieldset = element
-      until done
-        fieldset = fieldset.parent()
-        unless done = typeof fieldset[0] == 'undefined'
-          done = fieldset[0].tagName == 'FIELDSET'
-      element.parent('fieldset')
-      element.bind 'mousedown', (event)->
-        return if tempHolder.hasClass('active')
-        return if attrs.disabled || $parse(attrs.ngDisabled)(scope)
-        if fieldset
+        elements.tempHolder.removeClass('active')
+        setInitialValue()
+      disabled = ->
+        unless typeof fieldset != 'undefined'
+          done = false
+          fieldset = element
+          until done
+            fieldset = fieldset.parent()
+            unless done = typeof fieldset[0] == 'undefined'
+              done = fieldset[0].tagName == 'FIELDSET'
+        return true if typeof element[0].attributes.disabled != 'undefined' || $parse(attrs.ngDisabled)(scope)
+        if fieldset.length > 0
           ngdis = if fieldset[0].attributes.ngDisabled then fieldset[0].attributes.ngDisabled.value else ''
-          return if fieldset[0].attributes.disabled || $parse(ngdis)(scope)
-        search.val('')
+          return true if fieldset[0].attributes.disabled || $parse(ngdis)(scope)
+        return false
+
+      options     = new SelectOptions(attrs.ngSelectOptions,element[0].outerHTML)
+      functions   = new SelectFunctions(options.match,$parse)
+      eFunctions  = new EventFunctions(functions,buildTemplate,updateValue,filteredList,$filter,$timeout,$parse,scope,disabled())
+      if isMobile = typeof attrs.ngMobile != 'undefined'
+        elements  = new MobileTemplate(element,eFunctions.mobile())
+      else
+        elements  = new StandardTemplate(element,attrs,eFunctions.standard(),disabled())
+      scope.$watchCollection functions.collection, (newVal,oldVal) ->
+        return if newVal == oldVal
+        setInitialValue()
         buildTemplate()
-        tempHolder.css('top',event.clientY)
-        tempHolder.css('transition','none')
-        $timeout ->
-          tempHolder.css('transition','')
-          tempHolder.css('top','')
-          tempHolder.addClass('active')
+      scope.$watch attrs.ngModel, (newVal,oldVal) ->
+        return if newVal == oldVal
+        setInitialValue()
+      scope.$watch disabled, (newVal,oldVal) ->
+        return if newVal == oldVal
+        elements.search[0].disabled = newVal
+
+      setInitialValue()
+      buildTemplate()

data/lib/assets/stylesheets/material-raingular.sass

@@ -1,3 +1,4 @@
+@import "angular-material.min"
 div.filtered-select
   position: fixed
   z-index: 1001
@@ -33,12 +34,54 @@ div.filtered-select
       cursor: pointer
       box-shadow: 0 4px 2px -2px rgba(0,0,0,0.14)
   &.bottom
-    top: 67%
+    top: 50%
     z-index: 1000
     &.active
-      height: 33%
+      height: 50%
 ng-filtered-select
   display: block
   width: 100%
   overflow: hidden
   text-overflow: ellipsis
+md-autocomplete
+  background: none
+  md-autocomplete-wrap.md-whiteframe-z1
+    box-shadow: none
+    button
+      display: none
+.autocomplete.menu
+  text-align: left
+  &:empty
+    display: none
+  a
+    overflow: hidden
+    width: 100%
+    text-overflow: ellipsis
+    display: block
+    line-height: 48px
+    height: 48px
+    font-size: 14px
+    white-space: nowrap
+    cursor: pointer
+    &.active
+      font-weight: bolder
+  &:hover
+    max-height: 30rem
+    padding: 0.5rem
+    opacity: 1
+  z-index: 10
+  max-height: 0
+  overflow-y: hidden
+  overflow-x: hidden
+  position: absolute
+  background-color: white
+  opacity: 0
+  border-radius: 0.25rem
+  text-overflow: ellipsis
+  transition: all 0.55s cubic-bezier(0.25, 0.8, 0.25, 1)
+  padding: 0
+
+input.autocomplete:focus + div
+  max-height: 30rem
+  padding: 0.5rem
+  opacity: 1

data/lib/material_raingular/version.rb

@@ -1,3 +1,3 @@
 module MaterialRaingular
-  VERSION = "0.0.3"
+  VERSION = "0.0.3.1"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: material_raingular
 version: !ruby/object:Gem::Version
-  version: 0.0.3
+  version: 0.0.3.1
 platform: ruby
 authors:
 - Chris Moody
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-10-26 00:00:00.000000000 Z
+date: 2015-10-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler