jQueryML plugin factory

harmonize.coffee

  $.plugins.add
    name: 'harmonize'
    api:
      itemClass: 'harmonized'
      itemSelector: null      
      properties: ['width', 'height', 'class'] # 'class', 'attr', 'plugin', css atributes
      units: [80, 50, 'harmony']
      harmonies: 
        [
          [[12,12]]
          #[[9,8], [3,4], [3,4]]
          [[8,4], [4,8], [4,8], [4,4], [8,4]]
          [[4,4], [4,4], [4,4]]
          #[[6,6], [6,6]]        
          [[3,6], [9,6]]
          [[6,4], [6,4]]        
          [[3,4], [9,8], [3,4]]
          [[3,6], [3,6], [3,6], [3,6]]
        ]
    update: (el) ->
      $el = $(el)
      itemSelector = @get('itemSelector')
      
      if itemSelector?
        $items = $el.find(itemSelector)
      else
        $items = $el.children()
      
      for item in $items
        $item = $(item)
        $item.width()
      
    presets:
      {
        'ef': [[[8,6],[4,6]]]
        'royaTribune': [[[4,20]]]
        'd3': [[[3,6]]
               [[3,6]]
               [[3,6]]
               [[3,6]]
               [[6,6]]]
        'default': 
          [ 
            [[12,12]]
            #[[9,8], [3,4], [3,4]]
            [[8,4], [4,8], [4,8], [4,4], [8,4]]
            [[4,4], [4,4], [4,4]]
            #[[6,6], [6,6]]        
            [[3,6], [9,6]]
            [[6,4], [6,4]]        
            [[3,4], [9,8], [3,4]]
            [[3,6], [3,6], [3,6], [3,6]]               
          ]
        'croi':
          [        
            [[9,6], [3,6]]   
            [[6,6], [3,6], [3,6]]   
            [[3,6], [3,6], [3,6], [3,6]] 
            [[3,6], [3,6], [6,6]]            
            [[3,6], [9,6]]     
            [[12,6]] 
            [[3,6], [3,6], [3,6], [3,6]]        
          ]
      }
      

responsive.coffee

  $.plugins.add
    name: 'responsive'
    api:
      queries: 
        [ 
          {
            query: (el) ->
              if $(el).width() > 960 then return true else return false
            response: (el) ->
              alert '960'             
            
          }
          {
            query: (el) ->
              if $(el).width() > 300 then return true else return false
            response: (el) ->      
              alert '300'
          }
          {
            query: (el) ->
              if $(el).width() < 300 then return true else return false
            response: (el) ->
              alert 'smallest'
          }
        ]

    setup: (el, that) ->
    
    update: (el, plugin) ->   
      that = this      
      el = this.el
      queries = this.get('queries')
      
      # iterate through queries
      if _.isArray queries
        for q in queries
          queryFunction = q.query
          if _.isFunction queryFunction
            success = queryFunction(el)
            if success
              q.response(el)
              break
          else
            ERROR '$.responsive() : query must be function'