observejs 0.0.7 → 0.0.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 34f7e2b0d3b0c92e4a99b441e4e47ef15ad3744c
-  data.tar.gz: 0b4ca8788f5915d2b925d68a1131560315195865
+  metadata.gz: 2761d7377eeaa19bed746a3c8638135b1a5e1ffa
+  data.tar.gz: 045c433af158e4d738bb49d4a36d22b50cc11801
 SHA512:
-  metadata.gz: 3f74f38db3a194c310dc5dcfa10996fbf2d68691ee288ff62b1247508fecd2a2e261d74ae8d803e7a3645a4973f55899249d1baa61b4508bca4b72bcd090b982
-  data.tar.gz: c2eb85285421fdf3ef7e5b24c559e4967a5e090ee93d1f1a5a53890237f14c54ae1091ac63ae83c28bae6ec8205f451cabf8398f5a0da44860aaa1beff9ea815
+  metadata.gz: 723c9abade49bc513f23aa7e8bd526d7223389652452af425c8d2e3aeb6148e9a7f1c58acea02537a560fc7873d8e4cf3001299b7e854a149f804c05f5650ef4
+  data.tar.gz: 528c2585a2e94b8f74eaaaa5cf07c1e5e314c5f7f48516daa95cc7561b8a536242a1d873ed4ef16439fbd3477974fefc268eeae58e49f29af96fed925da30c07

data/README.md

@@ -1,65 +1,67 @@
 # ObserveJS
 
-Event based JavaScript framework tailored made for Ruby on rails.
+ObserveJS is an event-based library created for Ruby On Rails to help people build interactive application **without committing to a Single Page Application (SPA)**.
 
-## Installation
+Based on Custom Elements, ObserveJS takes an innovative approach that re-use views and partials and leverages custom events to make you change application to any server response.
 
-Add this line to your application's Gemfile:
+This framework is not like any other JS alternative. It brings concepts from different paradigms and merges them together. It's not as simple as building some JS classes and have everything fed via JSON. Obviously, this won't be for everyone.
 
-```ruby
-gem 'observejs'
-```
+To understand what ObserveJS is all about, you need to understand the foundation on which ObserveJS was built.
 
-Then add this line to application.js
+## Javascript Classes bound like Custom Elements
 
-```js
-//= require 'observejs'
-```
-## Usage
+You may not know about Custom elements, these guys aren't as popular as React but they aren't useless. Trust me. What you need to know here is that by defining an attribute on an element, you can let ObserveJS instantiate a JavaScript class that will be bound to this object. Here's an example:
 
-ObserveJS is an event based framework that manages the life cycle of JavaScript objects. Here's a simple Todo where you can dynamically add/remove items on the list.
+```html
+<div class='datepicker' as='Datepicker'>
+</div>
+```
 
-```erb
-<!-- views/todos/index.html.erb -->
-<%= content_tag :ol, as: 'Todo.List', do %>
-  <%= render @todos %>
-<% end %>
+Here, you defined an element with the ```as``` attribute. That attribute is special as it will be detected by ObserveJS. It will locate a Javascript class that has been declared the same name and instantiate it. Here's how it would look in JS:
+
+```javascript
+ObserveJS.bind('Datepicker', class {
+  // This method is called after the class is configured and attached to
+  // the element
+  loaded() {
+    console.log("I'm instantiated")
+    
+    this.element()
+    // <div class='datepicker' as='Datepicker'>
+    
+    //This look for data-loading
+    this.observe('loading', this.changeStatus)
+  }
+  
+  changeStatus(mutation) {
+  }
+})
 ```
 
-```coffee
-# assets/javascripts/todos/list.js.coffee 
-ObserveJS.bind 'Todo.List', class
-  # @element() always return the element to which your object is bound.
+The object instantiated inherit a few methods that are shown below. The most important method of all is probably the ```this.element()``` method. It returns the element that was bound to this class.
 
-  loaded: =>
-    @element().on 'todos:create', @add
-    @element().on 'todos:destroy', @delete
+Now, if you would have the DOM element rendered in a page, automatically, the associated JavaScript class would get instantiated and initialized. Those objects have default API that makes your life easier.
 
-  add: (e) =>
-    @element().appendChild(e.html)
+## JS Object's instance methods
 
-  delete: (e) =>
-    @element().querySelector("[tid=#{e.todoId}]")?.remove()
+### ```this.element()```
 
-```
+Returns the element bound to the JS object.
 
-```ruby
-  #views/todos/create.js.erb
-  e.html = "<%= j render(@todo) %>".toHTML()
-```
+### ```this.on(event_name, callback)```
 
-```ruby
-  #views/todos/destroy.js.erb
-  e.todoId = <%= @todo.id %> 
-```
+Bind an event to the specified callback. The event is bound to the element associated with the class. In the example above, this would mean that the event would be bound to the ```div``` element. The callback will be fired only if an event matching its name bubbles up to the element or if an event is fired directly on this event.
+
+### ```this.on(event_name, target, callback)```
+
+Bind an event on a **descendant** of the element associated with the given class. If the target is not a descendant, an Exception will be raised. This is basically the same thing as the previous method except that you can bind it to a descendant.
+
+### ```this.when(event_name, callback)```
 
-Some notes:
+Bind an event to ```document```. This should be used only when dealing with server side events or when you need to capture an event from another element that is not a descendant.
 
-- Automatic instantiation. No need to wrap things in DOMContentReady anymore.
-- Events are built following the "controller:action" pattern.
-- A callback (@loaded) is called right after ObserveJS has instantiated an object.
-- In *.js.erb, an event is created. You can set HTML to the event object.
-- To ease the process, a toHTML() method has been added to the String object (JS).
-- You need to register any class you create through the ```ObserveJS.bind 'name', Class```. The name is the attribute you set in your DOM.
+All those methods are available to configure your object at any time. You will probably find it useful to setup your callabcks in the ```loaded()``` method as it is **the callback used by ObserveJS when the object is configured**.
 
+### ```this.observe(attribute, callback)```
 
+Bind a callback to a change made to data-* attribute on ```this.element()```. You can call this on different attribute.

data/lib/observejs/app/assets/javascripts/observejs/base.js.coffee

@@ -15,14 +15,11 @@ class ObserveJS
   bind: (name, kls) =>
     @cache[name] = kls
 
-    kls.prototype.template = () ->
+    kls.prototype.template = (selector) ->
       tmpl = @element().querySelector("template[for='#{name}']")
       unless tmpl?
         throw "Template Error: Couldn't find a template matching #{name}"
         return
-      tmpl
-
-    kls.prototype.retrieve = (selector) ->
-      @element().querySelector(selector) || @template().content.querySelector(selector).cloneNode(true)
+      (tmpl.content || tmpl).querySelector(selector).cloneNode(true)
 
 window.ObserveJS = new ObserveJS()

data/lib/observejs/app/assets/javascripts/observejs/creator.js.coffee

@@ -11,7 +11,7 @@ class Creator
     model = el.getAttribute(ObserveJS.attributeName)
     if ObserveJS.cache[model]?
       if el.instance?
-        el.loaded()
+        el.instance.loaded()
         return
 
       el.instance = new ObserveJS.cache[model](el)
@@ -19,24 +19,47 @@ class Creator
       el.instance.element = ->
         el
 
+      observer = new ObserveJS.Observer(el.instance)
+
+      el.instance.observe = (observer, key, callback) ->
+        observer.bind(key, callback.bind(el.instance))
+
+      el.instance.observe = el.instance.observe.bind(el.instance, observer)
+      el.instance.observe.observer = observer
+
       el.instance.on = (event, target, callback) ->
-        if callback?
-          el.instance.on.events.push([event, target, callback])
-        else
+        if !callback?
           callback = target
           target = el
+
+        if !el.contains(target)
+          throw "error: #{model} is trying to bind an event on a target that isn't a children, or itself. If you desire to bind an event to the document, use when()"
+          return
+        callback = callback.bind(el.instance)
+
+        el.instance.on.events.push([event, target, callback])
         target.addEventListener(event, callback)
 
+      el.instance.when = (event, callback) ->
+        callback = callback.bind(el.instance)
+
+        el.instance.on.events.push([event, document, callback])
+        document.addEventListener(event, callback)
+
       el.instance.on.events = []
 
       if el.instance.loaded?
         el.instance.loaded()
 
     else
-      throw "error: #{model} is not registered. Add your model with ObserveJS.Models.add(#{model})"
+      throw "error: #{model} is not registered. Add your model with ObserveJS.bind(#{model}, {})"
 
   destroy: (el) =>
     el.instance.on.events?.forEach (event) ->
       event[1].removeEventListener(event[0], event[2])
 
+    el.instance.unloaded?()
+    el.instance.observe.observer.disconnect()
+    delete el.instance
+
 @ObserveJS.Creator = new Creator()

data/lib/observejs/app/assets/javascripts/observejs/observer.js.coffee

@@ -0,0 +1,22 @@
+class @ObserveJS.Observer
+  constructor: (model) ->
+    @keys = {}
+    @observer = new MutationObserver(@mutated.bind(this, model))
+    @observer.observe(model.element(), {
+      childList: false
+      characterData: false
+      attributes: true
+    })
+
+  bind: (key, callback) ->
+    @keys["data-#{key}"] = callback
+
+  mutated: (model, mutations) ->
+    for mutation in mutations
+      if (callback = @keys[mutation.attributeName])?
+        callback(mutation)
+
+  disconnect: =>
+    @observer.disconnect()
+
+

data/lib/observejs/app/assets/javascripts/observejs/xhr.js.coffee

@@ -31,6 +31,26 @@ class XHRData
 
     formData
 
+  urlEncoded: (action) =>
+    parser = document.createElement('a')
+    parser.href = action
+    params = parser.search.substring(1).split('&')
+
+    for key in @keys()
+      params.push "#{key}=#{@value(key)}"
+
+    if @form?
+      for element in @form.elements
+        unless element.hasAttribute('name')
+          continue
+
+        type = element.getAttribute("type").toUpperCase() || 'TEXT'
+        if (type != 'FILE' && type != 'RADIO' && type != 'CHECKBOX') || element.checked
+          params.push "#{encodeURIComponent(element.name)}=#{encodeURIComponent(element.value)}"
+
+    parser.search = "?#{params.join("&")}"
+    parser.href
+
 class Response
   constructor: (@xhr) ->
     @xhr.request.addEventListener 'load', @process
@@ -70,6 +90,11 @@ class XHR
 
     @method = el.getAttribute('method') || 'GET'
 
+  open: (method, action) =>
+    @request.open @method, action
+    @request.setRequestHeader 'accept', "*/*;q=0.5, #{@script}"
+    @request.setRequestHeader 'X-Requested-With', "XMLHttpRequest"
+
   send: =>
     action = @request.element.getAttribute('action') || @request.element.getAttribute('href')
 
@@ -77,27 +102,18 @@ class XHR
       throw "Cannot send a request to the server if the element isn't a Form or if the element doesn't have the HREF attributes: <div href>"
       return
 
-    if @method == 'GET' && @data.any()
-      parser = document.createElement('a')
-      parser.href = action
-      params = parser.search.substring(1).split('&')
-
-      for key in @data.keys()
-        params.push "#{key}=#{@data.value(key)}"
-
-      parser.search = "?#{params.join("&")}"
-
-      action = parser.href
 
-    @request.open @method, action
-    @request.setRequestHeader 'accept', "*/*;q=0.5, #{@script}"
-    @request.setRequestHeader 'X-Requested-With', "XMLHttpRequest"
+    if /post|put|delete/i.test(@method)
+      @open(@method, action)
 
-    if @method != 'GET'
       token = document.querySelector('meta[name=csrf-token]').getAttribute('content')
       @request.setRequestHeader 'X-CSRF-Token', token
 
-    @request.send(@data.serialize())
+      @request.send(@data.serialize())
+    else
+      action = @data.urlEncoded(action)
+      @open(@method, action)
+      @request.send()
 
 
 ObserveJS.XHR = XHR

data/lib/observejs/app/assets/javascripts/observejs.js.coffee

@@ -1,7 +1,9 @@
+#= require_tree './polyfills'
 #= require 'observejs/ext'
 #= require 'observejs/base'
 #= require 'observejs/watcher'
 #= require 'observejs/creator'
+#= require 'observejs/observer'
 #= require 'observejs/xhr'
 
 if document.readyState == 'complete'

data/lib/observejs/app/assets/javascripts/polyfills/event.coffee

@@ -0,0 +1,12 @@
+if typeof window.CustomEvent == "function"
+  return false
+
+CustomEvent = ( event, params ) ->
+  params = params || { bubbles: false, cancelable: false, detail: undefined }
+  evt = document.createEvent( 'CustomEvent' )
+  evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail )
+  return evt
+
+CustomEvent.prototype = window.Event.prototype
+
+window.CustomEvent = CustomEvent

data/lib/observejs/version.rb

@@ -1,3 +1,3 @@
 module ObserveJS
-  VERSION = "0.0.7"
+  VERSION = "0.0.8"
 end

data/test/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: /Users/pothibo/Develop/observejs
   specs:
-    observejs (0.0.6)
+    observejs (0.0.7)
 
 GEM
   remote: https://rubygems.org/
@@ -162,3 +162,6 @@ DEPENDENCIES
   turbolinks
   uglifier (>= 1.3.0)
   web-console (~> 2.0)
+
+BUNDLED WITH
+   1.11.2

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: observejs
 version: !ruby/object:Gem::Version
-  version: 0.0.7
+  version: 0.0.8
 platform: ruby
 authors:
 - Pier-Olivier Thibault
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-08-26 00:00:00.000000000 Z
+date: 2016-06-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -83,8 +83,10 @@ files:
 - lib/observejs/app/assets/javascripts/observejs/base.js.coffee
 - lib/observejs/app/assets/javascripts/observejs/creator.js.coffee
 - lib/observejs/app/assets/javascripts/observejs/ext.js.coffee
+- lib/observejs/app/assets/javascripts/observejs/observer.js.coffee
 - lib/observejs/app/assets/javascripts/observejs/watcher.js.coffee
 - lib/observejs/app/assets/javascripts/observejs/xhr.js.coffee
+- lib/observejs/app/assets/javascripts/polyfills/event.coffee
 - lib/observejs/app/views/layouts/application.js.erb
 - lib/observejs/railtie.rb
 - lib/observejs/version.rb
@@ -154,7 +156,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.4.5
+rubygems_version: 2.4.5.1
 signing_key: 
 specification_version: 4
 summary: Event based JavaScript framework tailored for Ruby on rails.