joosy 1.1.2 → 1.2.0.alpha.4

data/src/vendor/metamorph.coffee

@@ -0,0 +1,410 @@
+# ==========================================================================
+# Project:   metamorph
+# Copyright: ©2013 Tilde, Inc. All rights reserved.
+# ==========================================================================
+((window) ->
+  K = ->
+
+  guid = 0
+  document = window.document
+  
+  # Feature-detect the W3C range API, the extended check is for IE9 which only partially supports ranges
+  supportsRange = document and ("createRange" of document) and (typeof Range isnt "undefined") and Range::createContextualFragment
+  
+  # Internet Explorer prior to 9 does not allow setting innerHTML if the first element
+  # is a "zero-scope" element. This problem can be worked around by making
+  # the first node an invisible text node. We, like Modernizr, use ­
+  needsShy = document and (->
+    testEl = document.createElement("div")
+    testEl.innerHTML = "<div></div>"
+    testEl.firstChild.innerHTML = "<script></script>"
+    testEl.firstChild.innerHTML is ""
+  )()
+  
+  # IE 8 (and likely earlier) likes to move whitespace preceeding
+  # a script tag to appear after it. This means that we can
+  # accidentally remove whitespace when updating a morph.
+  movesWhitespace = document and (->
+    testEl = document.createElement("div")
+    testEl.innerHTML = "Test: <script type='text/x-placeholder'></script>Value"
+    testEl.childNodes[0].nodeValue is "Test:" and testEl.childNodes[2].nodeValue is " Value"
+  )()
+  
+  # Constructor that supports either Metamorph('foo') or new
+  # Metamorph('foo');
+  # 
+  # Takes a string of HTML as the argument.
+  Metamorph = (html) ->
+    self = undefined
+    if this instanceof Metamorph
+      self = this
+    else
+      self = new K()
+    self.innerHTML = html
+    myGuid = "metamorph-" + (guid++)
+    self.start = myGuid + "-start"
+    self.end = myGuid + "-end"
+    self
+
+  K:: = Metamorph::
+  rangeFor = undefined
+  htmlFunc = undefined
+  removeFunc = undefined
+  outerHTMLFunc = undefined
+  appendToFunc = undefined
+  afterFunc = undefined
+  prependFunc = undefined
+  startTagFunc = undefined
+  endTagFunc = undefined
+  outerHTMLFunc = ->
+    @startTag() + @innerHTML + @endTag()
+
+  startTagFunc = ->
+    
+    #
+    #     * We replace chevron by its hex code in order to prevent escaping problems.
+    #     * Check this thread for more explaination:
+    #     * http://stackoverflow.com/questions/8231048/why-use-x3c-instead-of-when-generating-html-from-javascript
+    #     
+    "<script id='" + @start + "' type='text/x-placeholder'></script>"
+
+  endTagFunc = ->
+    
+    #
+    #     * We replace chevron by its hex code in order to prevent escaping problems.
+    #     * Check this thread for more explaination:
+    #     * http://stackoverflow.com/questions/8231048/why-use-x3c-instead-of-when-generating-html-from-javascript
+    #     
+    "<script id='" + @end + "' type='text/x-placeholder'></script>"
+
+  
+  # If we have the W3C range API, this process is relatively straight forward.
+  if supportsRange
+    
+    # Get a range for the current morph. Optionally include the starting and
+    # ending placeholders.
+    rangeFor = (morph, outerToo) ->
+      range = document.createRange()
+      before = document.getElementById(morph.start)
+      after = document.getElementById(morph.end)
+      if outerToo
+        range.setStartBefore before
+        range.setEndAfter after
+      else
+        range.setStartAfter before
+        range.setEndBefore after
+      range
+
+    htmlFunc = (html, outerToo) ->
+      
+      # get a range for the current metamorph object
+      range = rangeFor(this, outerToo)
+      
+      # delete the contents of the range, which will be the
+      # nodes between the starting and ending placeholder.
+      range.deleteContents()
+      
+      # create a new document fragment for the HTML
+      fragment = range.createContextualFragment(html)
+      
+      # insert the fragment into the range
+      range.insertNode fragment
+
+    removeFunc = ->
+      
+      # get a range for the current metamorph object including
+      # the starting and ending placeholders.
+      range = rangeFor(this, true)
+      
+      # delete the entire range.
+      range.deleteContents()
+
+    appendToFunc = (node) ->
+      range = document.createRange()
+      range.setStart node
+      range.collapse false
+      frag = range.createContextualFragment(@outerHTML())
+      node.appendChild frag
+
+    afterFunc = (html) ->
+      range = document.createRange()
+      after = document.getElementById(@end)
+      range.setStartAfter after
+      range.setEndAfter after
+      fragment = range.createContextualFragment(html)
+      range.insertNode fragment
+
+    prependFunc = (html) ->
+      range = document.createRange()
+      start = document.getElementById(@start)
+      range.setStartAfter start
+      range.setEndAfter start
+      fragment = range.createContextualFragment(html)
+      range.insertNode fragment
+  else
+    
+    ###
+    This code is mostly taken from jQuery, with one exception. In jQuery's case, we
+    have some HTML and we need to figure out how to convert it into some nodes.
+    
+    In this case, jQuery needs to scan the HTML looking for an opening tag and use
+    that as the key for the wrap map. In our case, we know the parent node, and
+    can use its type as the key for the wrap map.
+    ###
+    wrapMap =
+      select: [1, "<select multiple='multiple'>", "</select>"]
+      fieldset: [1, "<fieldset>", "</fieldset>"]
+      table: [1, "<table>", "</table>"]
+      tbody: [2, "<table><tbody>", "</tbody></table>"]
+      tr: [3, "<table><tbody><tr>", "</tr></tbody></table>"]
+      colgroup: [2, "<table><tbody></tbody><colgroup>", "</colgroup></table>"]
+      map: [1, "<map>", "</map>"]
+      _default: [0, "", ""]
+
+    findChildById = (element, id) ->
+      return element  if element.getAttribute("id") is id
+      len = element.childNodes.length
+      idx = undefined
+      node = undefined
+      found = undefined
+      idx = 0
+      while idx < len
+        node = element.childNodes[idx]
+        found = node.nodeType is 1 and findChildById(node, id)
+        return found  if found
+        idx++
+
+    setInnerHTML = (element, html) ->
+      matches = []
+      if movesWhitespace
+        
+        # Right now we only check for script tags with ids with the
+        # goal of targeting morphs.
+        html = html.replace(/(\s+)(<script id='([^']+)')/g, (match, spaces, tag, id) ->
+          matches.push [id, spaces]
+          tag
+        )
+      element.innerHTML = html
+      
+      # If we have to do any whitespace adjustments do them now
+      if matches.length > 0
+        len = matches.length
+        idx = undefined
+        idx = 0
+        while idx < len
+          script = findChildById(element, matches[idx][0])
+          node = document.createTextNode(matches[idx][1])
+          script.parentNode.insertBefore node, script
+          idx++
+
+    
+    ###
+    Given a parent node and some HTML, generate a set of nodes. Return the first
+    node, which will allow us to traverse the rest using nextSibling.
+    
+    We need to do this because innerHTML in IE does not really parse the nodes.
+    ###
+    firstNodeFor = (parentNode, html) ->
+      arr = wrapMap[parentNode.tagName.toLowerCase()] or wrapMap._default
+      depth = arr[0]
+      start = arr[1]
+      end = arr[2]
+      html = "&shy;" + html  if needsShy
+      element = document.createElement("div")
+      setInnerHTML element, start + html + end
+      i = 0
+
+      while i <= depth
+        element = element.firstChild
+        i++
+      
+      # Look for &shy; to remove it.
+      if needsShy
+        shyElement = element
+        
+        # Sometimes we get nameless elements with the shy inside
+        shyElement = shyElement.firstChild  while shyElement.nodeType is 1 and not shyElement.nodeName
+        
+        # At this point it's the actual unicode character.
+        shyElement.nodeValue = shyElement.nodeValue.slice(1)  if shyElement.nodeType is 3 and shyElement.nodeValue.charAt(0) is "­"
+      element
+
+    
+    ###
+    In some cases, Internet Explorer can create an anonymous node in
+    the hierarchy with no tagName. You can create this scenario via:
+    
+    div = document.createElement("div");
+    div.innerHTML = "<table>&shy<script></script><tr><td>hi</td></tr></table>";
+    div.firstChild.firstChild.tagName //=> ""
+    
+    If our script markers are inside such a node, we need to find that
+    node and use *it* as the marker.
+    ###
+    realNode = (start) ->
+      start = start.parentNode  while start.parentNode.tagName is ""
+      start
+
+    
+    ###
+    When automatically adding a tbody, Internet Explorer inserts the
+    tbody immediately before the first <tr>. Other browsers create it
+    before the first node, no matter what.
+    
+    This means the the following code:
+    
+    div = document.createElement("div");
+    div.innerHTML = "<table><script id='first'></script><tr><td>hi</td></tr><script id='last'></script></table>
+    
+    Generates the following DOM in IE:
+    
+    + div
+    + table
+    - script id='first'
+    + tbody
+    + tr
+    + td
+    - "hi"
+    - script id='last'
+    
+    Which means that the two script tags, even though they were
+    inserted at the same point in the hierarchy in the original
+    HTML, now have different parents.
+    
+    This code reparents the first script tag by making it the tbody's
+    first child.
+    ###
+    fixParentage = (start, end) ->
+      end.parentNode.insertBefore start, end.parentNode.firstChild  if start.parentNode isnt end.parentNode
+
+    htmlFunc = (html, outerToo) ->
+      
+      # get the real starting node. see realNode for details.
+      start = realNode(document.getElementById(@start))
+      end = document.getElementById(@end)
+      parentNode = end.parentNode
+      node = undefined
+      nextSibling = undefined
+      last = undefined
+      
+      # make sure that the start and end nodes share the same
+      # parent. If not, fix it.
+      fixParentage start, end
+      
+      # remove all of the nodes after the starting placeholder and
+      # before the ending placeholder.
+      node = start.nextSibling
+      while node
+        nextSibling = node.nextSibling
+        last = node is end
+        
+        # if this is the last node, and we want to remove it as well,
+        # set the `end` node to the next sibling. This is because
+        # for the rest of the function, we insert the new nodes
+        # before the end (note that insertBefore(node, null) is
+        # the same as appendChild(node)).
+        #
+        # if we do not want to remove it, just break.
+        if last
+          if outerToo
+            end = node.nextSibling
+          else
+            break
+        node.parentNode.removeChild node
+        
+        # if this is the last node and we didn't break before
+        # (because we wanted to remove the outer nodes), break
+        # now.
+        break  if last
+        node = nextSibling
+      
+      # get the first node for the HTML string, even in cases like
+      # tables and lists where a simple innerHTML on a div would
+      # swallow some of the content.
+      node = firstNodeFor(start.parentNode, html)
+      
+      # copy the nodes for the HTML between the starting and ending
+      # placeholder.
+      while node
+        nextSibling = node.nextSibling
+        parentNode.insertBefore node, end
+        node = nextSibling
+
+    
+    # remove the nodes in the DOM representing this metamorph.
+    #
+    # this includes the starting and ending placeholders.
+    removeFunc = ->
+      start = realNode(document.getElementById(@start))
+      end = document.getElementById(@end)
+      @html ""
+      start.parentNode.removeChild start
+      end.parentNode.removeChild end
+
+    appendToFunc = (parentNode) ->
+      node = firstNodeFor(parentNode, @outerHTML())
+      nextSibling = undefined
+      while node
+        nextSibling = node.nextSibling
+        parentNode.appendChild node
+        node = nextSibling
+
+    afterFunc = (html) ->
+      
+      # get the real starting node. see realNode for details.
+      end = document.getElementById(@end)
+      insertBefore = end.nextSibling
+      parentNode = end.parentNode
+      nextSibling = undefined
+      node = undefined
+      
+      # get the first node for the HTML string, even in cases like
+      # tables and lists where a simple innerHTML on a div would
+      # swallow some of the content.
+      node = firstNodeFor(parentNode, html)
+      
+      # copy the nodes for the HTML between the starting and ending
+      # placeholder.
+      while node
+        nextSibling = node.nextSibling
+        parentNode.insertBefore node, insertBefore
+        node = nextSibling
+
+    prependFunc = (html) ->
+      start = document.getElementById(@start)
+      parentNode = start.parentNode
+      nextSibling = undefined
+      node = undefined
+      node = firstNodeFor(parentNode, html)
+      insertBefore = start.nextSibling
+      while node
+        nextSibling = node.nextSibling
+        parentNode.insertBefore node, insertBefore
+        node = nextSibling
+  Metamorph::html = (html) ->
+    @checkRemoved()
+    return @innerHTML  if html is `undefined`
+    htmlFunc.call this, html
+    @innerHTML = html
+
+  Metamorph::replaceWith = (html) ->
+    @checkRemoved()
+    htmlFunc.call this, html, true
+
+  Metamorph::remove = removeFunc
+  Metamorph::outerHTML = outerHTMLFunc
+  Metamorph::appendTo = appendToFunc
+  Metamorph::after = afterFunc
+  Metamorph::prepend = prependFunc
+  Metamorph::startTag = startTagFunc
+  Metamorph::endTag = endTagFunc
+  Metamorph::isRemoved = ->
+    before = document.getElementById(@start)
+    after = document.getElementById(@end)
+    not before or not after
+
+  Metamorph::checkRemoved = ->
+    throw new Error("Cannot perform operations on a Metamorph that is not in the DOM.")  if @isRemoved()
+
+  window.Metamorph = Metamorph
+) this

data/tasks/joosy.coffee

@@ -0,0 +1,63 @@
+module.exports = (grunt) ->
+
+  Path = require('path')
+
+  grunt.loadNpmTasks 'grunt-mincer'
+  grunt.loadNpmTasks 'grunt-contrib-connect'
+  grunt.loadNpmTasks 'grunt-contrib-uglify'
+  grunt.loadNpmTasks 'grunt-contrib-stylus'
+  grunt.loadNpmTasks 'grunt-contrib-cssmin'
+  grunt.loadNpmTasks 'grunt-bower-task'
+
+  grunt.registerTask 'joosy:compile', ['joosy:compile:code', 'joosy:compile:styles', 'joosy:compile:playground']
+  grunt.registerTask 'joosy:compile:code', ['mince:application', 'uglify:application']
+  grunt.registerTask 'joosy:compile:styles', ['stylus:application', 'cssmin:application']
+
+  grunt.registerTask 'joosy:compile:playground', ->
+    hamlc = require 'haml-coffee'
+    grunt.file.write 'public/index.html', hamlc.compile(grunt.file.read 'source/index.haml')()
+
+  grunt.registerTask 'joosy:server', ->
+    @async()
+    connect = require('connect')
+    mincer  = require('mincer')
+    hamlc   = require('haml-coffee')
+
+    mincer.StylusEngine.registerConfigurator (stylus) ->
+      stylus.options.paths.push Path.join(process.cwd(), 'public')
+      stylus.use require('nib')()
+
+    server = connect()
+    assets = new mincer.Environment(process.cwd())
+    assets.appendPath 'source',
+    assets.appendPath 'stylesheets',
+    assets.appendPath 'components'
+    assets.appendPath 'vendor'
+    assets.appendPath 'node_modules/joosy/lib'
+
+    server.use '/assets', mincer.createServer(assets)
+
+    server.use '/', (req, res, next) ->
+      if req.url == '/'
+        res.end hamlc.compile(grunt.file.read 'source/index.haml')()
+      else
+        next()
+  
+    server.use connect.static('public')
+    server.listen 4000
+
+  grunt.registerTask 'joosy:server:production', ->
+    @async()
+    connect = require('connect')
+    server = connect()
+    server.use require('gzippo').staticGzip('public')
+    server.listen process.env['PORT'] ? 4000
+
+  grunt.registerTask 'joosy:postinstall', ->
+    @async
+
+    if grunt.file.exists('bower.json')
+      grunt.task.run 'bower:install'
+
+    if process.env['NODE_ENV'] == 'production'
+      grunt.task.run 'joosy:compile'

data/templates/application/base/application.coffee

@@ -0,0 +1,11 @@
+#= require jquery/jquery.js
+#= require jquery-form/jquery.form.js
+#= require sugar/release/sugar-full.min.js
+#
+#= require joosy
+#
+#= require_tree ./
+#= require_self
+
+$ ->
+  Joosy.Application.initialize '<%= application %>', 'body'

data/{lib/rails/generators/joosy/templates/app/pages/welcome/index.js.coffee → templates/application/base/pages/welcome/index.coffee}

@@ -6,8 +6,8 @@ Joosy.namespace 'Welcome', ->
 
     @afterLoad ->
       @startHeartbeat()
-      @content.css
-        'padding-top': "#{$(window).height() / 2 - 160}px"
+      @$content.css
+        'padding-top': "#{$(window).height() / 2 - 80}px"
 
     elements:
       content: '#content'
@@ -19,4 +19,4 @@ Joosy.namespace 'Welcome', ->
 
     startHeartbeat: ->
       @heartbeat = @setInterval 1500, =>
-        @joosy.animate({opacity: 0.8}, 300).animate({opacity: 1}, 300)
+        @$joosy.animate({opacity: 0.8}, 300).animate({opacity: 1}, 300)

data/templates/application/base/routes.coffee

@@ -0,0 +1,3 @@
+Joosy.Router.map
+  404             : (path) -> alert "Page '#{path}' was not found :("
+  '/'             : Welcome.IndexPage

data/{lib/rails/generators/joosy/templates/app → templates/application/base}/templates/pages/welcome/index.jst.hamlc

@@ -1,7 +1,6 @@
 #wrapper
   #content
     %h1 Welcome aboard
-    %h2{:style => 'margin-bottom: 30px'} You’re still riding Ruby on Rails.
     .joosy{:style => 'background: #F71; border-radius: 10px; width: 250px; display: inline-block'}
       %div{:style => 'color: #FFF; padding: 10px;'}
-        But it's so joosy this time!
+        It's Joosy time!

data/templates/application/standalone/.gitignore

@@ -0,0 +1,5 @@
+components
+node_modules
+.DS_Store
+public/assets
+public/index.html

data/templates/application/standalone/Gruntfile.coffee

@@ -0,0 +1,40 @@
+module.exports = (grunt) ->
+
+  grunt.loadNpmTasks 'joosy'
+
+  grunt.initConfig      
+    bower:
+      install:
+        options:
+          copy: false
+          verbose: true
+
+    connect:
+      server:
+        options:
+          port: 4000
+          base: 'public'
+
+    mince:
+      application:
+        include: ['source', 'components', 'vendor', 'node_modules/joosy/src']
+        src: 'application.coffee'
+        dest: 'public/assets/application.js'
+
+    stylus:
+      application:
+        options:
+          paths: ['stylesheets', 'public']
+        files: 'public/assets/application.css': 'stylesheets/application.styl'
+
+    uglify:
+      application:
+        options:
+          sourceMap: 'public/assets/application.js.map'
+        files:
+          'public/assets/application.js': 'public/assets/application.js'
+
+    cssmin:
+      application:
+        files:
+          'public/assets/application.css': 'public/assets/application.css'

data/templates/application/standalone/Procfile

@@ -0,0 +1 @@
+web: node_modules/.bin/grunt joosy:server:production

data/templates/application/standalone/bower.json

@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jquery": "~2.0.2",
+    "sugar": "~1.3.9",
+    "jquery-form": "~3.32.0-2013.04.09"
+  }
+}

data/templates/application/standalone/package.json

@@ -0,0 +1,24 @@
+{
+  "dependencies": {
+    "joosy": "~<%= joosy_version %>",
+    "connect": "~2.7.11",
+    "gzippo": "~0.2.0",
+    "mincer": "~0.4.6",
+    "coffee-script": "~1.6.3",
+    "stylus": "~0.32.1",
+    "nib": "~0.9.1",
+    "haml-coffee": "~1.11.1",
+    "grunt": "~0.4.1",
+    "grunt-mincer": "~0.3.1",
+    "grunt-contrib-connect": "~0.3.0",
+    "grunt-contrib-uglify": "~0.2.2",
+    "grunt-contrib-watch": "~0.4.4",
+    "grunt-contrib-stylus": "~0.5.0",
+    "grunt-contrib-cssmin": "~0.6.1",
+    "grunt-bower-task": "~0.2.3",
+    "grunt-cli": "~0.1.9"
+  },
+  "scripts": {
+    "postinstall": "node_modules/.bin/grunt joosy:postinstall"
+  }
+}

data/templates/application/standalone/source/index.haml

@@ -0,0 +1,7 @@
+!!!
+%html
+  %head
+    %title
+    %link{:href => "assets/application.css", :media => "screen", :rel => "stylesheet", :type => "text/css"}/
+    %script{:src => "assets/application.js", :type => "text/javascript"}
+  %body

data/templates/application/standalone/stylesheets/application.styl

@@ -0,0 +1,2 @@
+body
+  font-family arial,sans-serif

data/templates/layout/basic.coffee

@@ -0,0 +1,2 @@
+class @<%= class_name %>Layout extends ApplicationLayout
+  @view '<%= view_name %>'

data/templates/layout/namespaced.coffee

@@ -0,0 +1,4 @@
+Joosy.namespace '<%= namespace_name %>', ->
+
+  class @<%= class_name %>Layout extends ApplicationLayout
+    @view '<%= view_name %>'

data/templates/page/basic.coffee

@@ -0,0 +1,3 @@
+class @<%= class_name %>Page extends ApplicationPage
+  @layout ApplicationLayout
+  @view   '<%= view_name %>'

data/templates/page/namespaced.coffee

@@ -0,0 +1,5 @@
+Joosy.namespace '<%= namespace_name %>', ->
+
+  class @<%= class_name %>Page extends ApplicationPage
+    @layout ApplicationLayout
+    @view   '<%= view_name %>'

data/templates/widget/basic.coffee

@@ -0,0 +1,2 @@
+class @<%= class_name %>Widget extends Joosy.Widget
+  @view '<%= view_name %>'

data/templates/widget/namespaced.coffee

@@ -0,0 +1,4 @@
+Joosy.namespace '<%= namespace_name %>', ->
+
+  class @<%= class_name %>Widget extends Joosy.Widget
+    @view '<%= view_name %>'