cosy-js - npm Package Compare versions

Comparing version 0.3.7 to 0.3.8

docs/snuggle/control-object.md

@@ -11,3 +11,3 @@
 `Control.container( name [, element] )`
--------------------
+---------------------------------------
 
@@ -25,10 +25,3 @@ The container method is used to select a parent element with a `data-container` attribute. The `name` argument specifies the name of the container we wish to select, and the `element` argument allows us to specify an element to query the parents of (defaulting to the control element).
 function complete () {
-    var control = this;
-    control.element.on('change', function () {
-        if (control.element.is(':checked')) {
-            this.container('todo').addClass('done');
-        } else {
-            this.container('todo').removeClass('done');
-        }
-    })
+    var todo = this.container('todo'); // the containing div
 }
@@ -41,3 +34,3 @@ ```
 
-Todo.
+Alias of `cosy.core.reference.copy`.
 
@@ -54,3 +47,3 @@
 
-Todo.
+Alias of `cosy.core.reference.get`.
 
@@ -64,8 +57,20 @@
 
-`Control.html`
---------------
+`Control.html.<tag>( [attrs [, content]] )`
+-------------------------------------------
 
-Todo.
+The HTML object contains methods for every HTML element, which are used to construct new elements. The `attrs` argument is expected to be an object with properties mapping to attribute names/values. The `content` argument is the content of the new element. A jQuery object is returned by these methods.
 
+```html
+<div data-cosy-control="form"></div>
+```
 
+```js
+function form () {
+    var input = this.html.input({type: 'text', name: 'todo'});
+    var button = this.html.button(null, 'Add');
+    this.element.append(input).append(button);
+}
+```
+
+
 `Control.list`
@@ -89,5 +94,22 @@ --------------
 
-`Control.query`
----------------
+`Control.query( name [, element] )`
+-----------------------------------
 
+The query method is used to query all DOM elements. In most cases, you can consider this an alias of the `jQuery` function. Use this as a last resort when the container and role methods won't cut it.
+
+```html
+<ul id="todo-list"></ul>
+
+<input type="text" name="todo"/>
+<button data-cosy-control="add">Add todo</button>
+```
+
+```js
+function add () {
+    var value = this.query('[name=todo]').val();
+    var list = this.query('#todo-list');
+    list.append('<li>' + value + '</li>');
+}
+```
+
 Todo.
@@ -108,26 +130,76 @@
 
-`Control.role`
---------------
+`Control.role( name [, element] )`
+----------------------------------
 
-Todo.
+The role method is used to select a (single) child element with a `data-role` attribute. The `name` argument specifies the name of the role we wish to select, and the `element` argument allows us to specify an element to query the children of (defaulting to the control element).
 
+```html
+<div data-cosy-control="todo">
+    Buy some milk and eggs
+    <input type="checkbox" data-role="complete"/>
+</div>
+```
 
-`Control.roles`
----------------
+```js
+function todo () {
+    var checkbox = this.role('complete'); // the checkbox element
+}
+```
 
-Todo.
 
+`Control.roles( name [, element] )`
+-----------------------------------
 
+The roles method is exactly the same as `role` except that it selects multiple elements.
+
+```html
+<ul data-cosy-control="todos">
+    <li data-role="todo"> ... </li>
+    <li data-role="todo"> ... </li>
+    <li data-role="todo"> ... </li>
+</ul>
+```
+
+```js
+function todos () {
+    var todo = this.roles('todo'); // the three list items
+}
+```
+
+
 `Control.set`
 -------------
 
-Todo.
+Alias of `cosy.core.reference.set`.
 
 
-`Control.state`
----------------
+`Control.state( name, def [, element] )`
+----------------------------------------
 
-Todo.
+The state method returns a state object which can be used to add/remove state classes on an element. The `name` argument specifies the name of the state we wish to manipulate, and the `def` argument specifies a default boolean value. The `element` argument allows us to specify an element to apply the state to (defaulting to the control element).
 
+The object returned by the state method has the following methods itself:
 
+  - **on**: Set the state to 'on' (adds `is-<name>` to the element)
+  - **off**: Set the state to 'off' (adds `is-not-<name>` to the element)
+  - **toggle**: Toggles between 'on' and 'off' states
+  - **get**: Get the current state as a boolean
+
+```html
+<div data-cosy-control="todo">
+    Buy some milk and eggs
+    <input type="checkbox" data-role="complete"/>
+</div>
+```
+
+```js
+function todo () {
+    var done = this.state('done', false); // apply state classes to the control element
+    this.role('complete').on('change', function () {
+        done.toggle(); // toggles between `is-done` and `is-not-done` classes
+    });
+}
+```
+
+
 `Control.template`
@@ -142,3 +214,3 @@ ------------------
 
-Todo.
+Alias of `cosy.core.reference.watch`.
 
@@ -149,2 +221,2 @@
 
-Todo.
+Alias of `cosy.core.reference.watchRef`.

lib/snuggle/cosy/props.js

@@ -5,8 +5,8 @@ // Generated by CoffeeScript 1.3.3
 
-  var assoc, get, props, ref, _ref,
+  var assoc, get, isRef, props, ref, _ref, _ref1,
     __slice = [].slice;
 
-  ref = require('../../core/reference').ref;
+  _ref = require('../../core/reference'), ref = _ref.ref, isRef = _ref.isRef;
 
-  _ref = require('../../protocol/map'), get = _ref.get, assoc = _ref.assoc;
+  _ref1 = require('../../protocol/map'), get = _ref1.get, assoc = _ref1.assoc;
 
@@ -19,3 +19,5 @@ props = function() {
       arg = args[_i];
-      refs[arg] = ref();
+      if (!isRef(refs[arg])) {
+        refs[arg] = ref();
+      }
     }
@@ -22,0 +24,0 @@ return assoc(frame, 'refs', refs);

package.json

 {
   "name": "cosy-js",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "description": "A cosy little library.",
@@ -5,0 +5,0 @@ "keywords": [],

No alert changes

Improved metrics

Total package byte prevSize

118673

2.8%

Lines of code

2087

0.1%

No dependency changes