lsd_rails 0.1

data/Packages/lsd-specs/lsd/Relation.js

@@ -0,0 +1,428 @@
+describe("LSD.Relation", function() {
+  var doc = new LSD.Document
+  
+  it ("should initialize with origin", function() {
+    var list = new LSD.Widget({tag: 'list', document: doc});
+    //var item = new LSD.Widget({tag: 'item'});
+    var relation = new LSD.Relation('items', list);
+    expect(relation.origin).toEqual(list)
+  })
+  
+  it ("should watch the origin when selector is given", function() {
+    var list = new LSD.Widget({tag: 'list', document: doc});
+    var item = new LSD.Widget({tag: 'item'}).inject(list);
+    var relation = new LSD.Relation('items', list);
+    relation.setOptions({selector: 'item', multiple: true});
+    expect(list.expectations[' ']['item']).toBeTruthy();
+    expect(list.items).toEqual([item]);
+    expect(item.expectations['!::']['items'].indexOf(list)).toEqual(0)
+  });
+
+  it ("should write relation origin when as option is given", function() {
+    var list = new LSD.Widget({tag: 'list', document: doc});
+    var item = new LSD.Widget({tag: 'item'}).inject(list);
+    var relation = new LSD.Relation('items', list, {as: 'ownzor', selector: 'item'});
+    expect(item.ownzor).toEqual(list);
+  });
+  
+  it ("should write relation origin into array on matched widget when collection option is set", function() {
+    var list = new LSD.Widget({tag: 'list', document: doc});
+    var menu = new LSD.Widget({tag: 'menu', document: doc}).inject(list);
+    var item = new LSD.Widget({tag: 'item'}).inject(menu);
+    var relation = new LSD.Relation('items', list, {collection: 'supper', selector: 'item'});
+    var relation = new LSD.Relation('items', menu, {collection: 'supper', selector: 'item'});
+    expect(item.supper).toEqual([list, menu]);
+  });
+
+  it ("should watch the same element in two different relations", function() {
+    var list = new LSD.Widget({tag: 'list', document: doc});
+    var item = new LSD.Widget({tag: 'item'}).inject(list);
+    var item1 = new LSD.Relation('items', list, {selector: 'item', multiple: true});
+    var item2 = new LSD.Relation('itemz', list, {selector: 'item', multiple: true});
+    expect(list.expectations[' ']['item']).toBeTruthy();
+    expect(list.items).toEqual([item]);
+    expect(list.items).toEqual(list.itemz);
+    expect(item.expectations['!::']['items'].indexOf(list)).toEqual(0)
+  });
+  
+  it ("should watch and find widgets with complex selector", function() {
+    var list = new LSD.Widget({tag: 'list', document: doc});
+    var icon = new LSD.Widget({tag: 'icon'}).inject(new LSD.Widget({tag: 'grid'}).inject(list));
+    var relation = new LSD.Relation('items', list);
+    relation.setOptions({selector: 'grid icon item', multiple: true});
+    expect(list.expectations[' ']['grid']).toBeTruthy();
+    expect(list.childNodes[0].expectations[' ']['icon']).toBeTruthy();
+    expect(list.childNodes[0].childNodes[0].expectations[' ']['item']).toBeTruthy();
+    var item = new LSD.Widget({tag: 'item'}).inject(icon);
+    expect(list.items).toEqual([item]);
+  });
+  
+  it ("should watch and find widgets using selector with pseudo element in it", function() {
+    var list = new LSD.Widget({tag: 'list', document: doc});
+    var item = new LSD.Widget({tag: 'item'}).inject(list);
+    var relation = new LSD.Relation('items', list);
+    relation.setOptions({selector: 'item', multiple: true});
+    expect(list.expectations[' ']['item']).toBeTruthy();
+    expect(list.items).toEqual([item]);
+    expect(item.expectations['!::']['items'].indexOf(list)).toEqual(0)
+  });
+  
+  it ("should apply expectation on origin when expectation is given", function() {
+    var list = new LSD.Widget({tag: 'list', document: doc});  
+    var item = new LSD.Widget({tag: 'item', attributes: {id: 'something'}}).inject(list);
+    var relation = new LSD.Relation('items', list);
+    relation.setOptions({
+      expectation: {id: 'something', combinator: ' ', tag: '*'},
+      multiple: true
+    });
+    expect(list.items).toEqual([item]);
+  });
+  
+  it ("should mutate elements and use them as related", function() {
+    LSD.Widget.Item = new Class({
+      options: {
+        tag: 'item'
+      }
+    })
+    var list = new LSD.Widget({tag: 'list', context: 'widget', document: doc});
+    var item = new Element('div').inject(list);
+    var relation = new LSD.Relation('items', list);
+    relation.setOptions({
+      mutation: 'div',
+      source: 'item',
+      selector: 'item',
+      multiple: true
+    });
+    var mutated = item.retrieve('widget');
+    expect(mutated).toBeTruthy();
+    expect(mutated.role).toEqual(LSD.Widget.Item);
+    expect(mutated.source).toEqual('item');
+    expect(list.items).toEqual([mutated]);
+  });
+  
+  it ("should respect target option", function() {
+    var list = new LSD.Widget({tag: 'list', document: doc});
+    var menu = new LSD.Widget({tag: 'menu', document: doc});
+    var item = new LSD.Widget({tag: 'item'}).inject(menu);
+    list.menu = menu;
+    var relation = new LSD.Relation('items', list, {
+      selector: 'item',
+      multiple: true,
+      target: 'menu'
+    });
+    expect(list.items).toEqual([item])
+    var other = new LSD.Widget({tag: 'item'}).inject(menu);
+    expect(list.items).toEqual([item, other]);
+  });
+  
+  it ("should set up lazy expectation for known target that is yet not preset", function() {
+    var list = new LSD.Widget({tag: 'list'});
+    var item = new LSD.Widget({tag: 'item'})
+    var d = new LSD.Document;
+    d.setBody(new Element('div'));
+    item.inject(d.body)
+    var relation = new LSD.Relation('items', list, {
+      selector: 'item',
+      multiple: true,
+      target: 'document'
+    });
+    expect(list.items).toEqual([]);
+    list.setDocument(d);
+    expect(list.items).toEqual([item]);
+  });
+  
+  it ("should notify a pseudo element expectations when related widget gets related or unrelated", function() {
+    var list = new LSD.Widget({tag: 'list', document: doc});
+    var i = 0;
+    var item = new LSD.Widget({tag: 'item'}).inject(list);
+    expect(list.expectations['::']).toBeUndefined();
+    var a = function(item, state) {
+      i += (state ? 1 : -1)
+    };
+    list.watch('::lostson', a);
+    expect(i).toEqual(0);
+    expect(list.expectations['::'].lostson.length).toEqual(1);
+    var relation = new LSD.Relation('lostson', list, {
+      selector: 'item'
+    });
+    expect(i).toEqual(1);
+    list.watch('::lostson', function(item, state) {
+      i += (state ? 1 : -1)
+    });
+    expect(list.expectations['::'].lostson.length).toEqual(2);
+    expect(i).toEqual(2);
+    item.dispose()
+    expect(i).toEqual(0);
+    list.unwatch('::lostson', a);
+    expect(list.expectations['::'].lostson.length).toEqual(1);
+  });
+  
+  it ("should convert callbacks into relation events and fire them", function() {
+    var list = new LSD.Widget({tag: 'list', document: doc});
+    var item = new LSD.Widget({tag: 'item'})
+    list.onFill = function() {
+      onFill = true;
+      expect(this).toEqual(list);
+    };
+    var onAdd, onRemove, onFill, onEmpty;
+    var relation = new LSD.Relation('items', list, {
+      selector: 'item',
+      multiple: true,
+      callbacks: {
+        add: function() {
+          onAdd = true;
+        },
+        remove: function() {
+          onRemove = true;
+        },
+        fill: 'onFill',
+        empty: function() {
+          onEmpty = true;
+        }
+      }
+    });
+    expect(onFill).toBeUndefined();
+    expect(onEmpty).toBeUndefined();
+    expect(onAdd).toBeUndefined();
+    expect(onRemove).toBeUndefined();
+    item.inject(list);
+    expect(onFill).toBeTruthy();
+    expect(onEmpty).toBeUndefined();
+    expect(onAdd).toBeTruthy();
+    expect(onRemove).toBeUndefined();
+    item.dispose();
+    expect(onEmpty).toBeTruthy();
+    expect(onRemove).toBeTruthy();
+  });
+  
+  it ("should be able to aggregate associations using through option", function() {
+    var grid = new LSD.Widget({tag: 'grid', document: doc});
+    var list = new LSD.Widget({tag: 'list', document: doc}).inject(grid);
+    var item1 = new LSD.Widget({tag: 'item'}).inject(list);
+    var menu = new LSD.Widget({tag: 'menu', document: doc}).inject(grid);
+    var item2 = new LSD.Widget({tag: 'item'}).inject(menu);
+    var lister = new LSD.Relation('items', list, {
+      selector: 'item',
+      multiple: true
+    });
+    var menuer = new LSD.Relation('items', menu, {
+      selector: 'item',
+      multiple: true
+    });
+    var gridlists = new LSD.Relation('lists', grid, {
+      selector: 'list, menu',
+      multiple: true
+    })
+    var grider = new LSD.Relation('itemz', grid, {
+      through: 'lists',
+      as: 'items',
+      multiple: true
+    })
+    expect(grid.getElements('::lists::items').length).toEqual(2)
+    expect(list.items).toEqual([item1]);
+    expect(menu.items).toEqual([item2]);
+    expect(grid.lists).toEqual([list, menu]);
+    expect(grid.itemz).toEqual([item1, item2]);
+    menu.dispose();
+    expect(grid.itemz).toEqual([item1]);
+    list.dispose();
+    expect(grid.itemz).toEqual([]);
+    menu.inject(grid);
+    expect(grid.itemz).toEqual([item2]);
+  })
+  
+  it ("should define nested ad-hoc relations", function() {
+    var grid = new LSD.Widget({
+      tag: 'grid', 
+      document: doc, 
+      relations: {
+        list: {
+          selector: 'list',
+          relations: {
+            items: {
+              selector: 'item'
+            }
+          }
+        }
+      }
+    });
+    var list = new LSD.Widget({tag: 'list', document: doc}).inject(grid);
+    var item1 = new LSD.Widget({tag: 'item'}).inject(list);
+    expect(grid.list.items).toEqual(item1);
+    list.dispose();
+    expect(grid.list).toBeUndefined();
+    expect(list.items).toBeUndefined();
+    expect(list.relations['items']).toBeUndefined()
+  });
+  
+  it ("should define nested ad-hoc relations using has option", function() {
+    var grid = new LSD.Widget({
+      tag: 'grid', 
+      document: doc, 
+      has: {
+        many: {
+          items: {
+            through: 'list'
+          }
+        },
+        one: {
+          list: {
+            selector: 'list',
+            has: {
+              many: {
+                items: {
+                  selector: 'item'
+                }
+              }
+            }
+          }
+        }
+      }
+    });
+    var list = new LSD.Widget({tag: 'list', document: doc}).inject(grid);
+    var item1 = new LSD.Widget({tag: 'item'}).inject(list);
+    var item2 = new LSD.Widget({tag: 'item'}).inject(list);
+    expect(grid.list.items).toEqual([item1, item2]);
+    expect(grid.items).toEqual(grid.list.items);
+    list.dispose();
+    expect(grid.items).toEqual([])
+    expect(grid.list).toBeUndefined()
+  }); 
+  
+  it ("should re-watch the widget when relation is updated with the new selector", function() {
+    var grid = new LSD.Widget({
+      tag: 'grid', 
+      document: doc, 
+      has: {
+        many: {
+          items: {
+            through: 'list'
+          }
+        },
+        one: {
+          list: {
+            selector: 'list',
+            has: {
+              many: {
+                items: {
+                  selector: 'item'
+                }
+              }
+            }
+          }
+        }
+      }
+    });
+    var list = new LSD.Widget({tag: 'list', document: doc}).inject(grid);
+    var item = new LSD.Widget({tag: 'item'}).inject(list);
+    var option = new LSD.Widget({tag: 'option'}).inject(list);
+    expect(list.items).toEqual([item]);
+    expect(grid.items).toEqual([item]);
+    list.addRelation('items', {selector: 'option'})
+    expect(list.items).toEqual([option]);
+    expect(grid.items).toEqual([option]);
+  });
+  
+  it ("should define a dependent relation when scope option is passed", function() {
+    var added = 0, removed = 0;
+    var list = new LSD.Widget({
+      tag: 'list', 
+      document: doc,
+      has: {
+        many: {
+          items: {
+            selector: 'item',
+            scopes: {
+              checked: {
+                filter: ':checked'
+              },
+              disabled: {
+                filter: ':disabled',
+                callbacks: {
+                  add: function(widget) {
+                    expect(this.tagName).toEqual('list');
+                    expect(widget.tagName).toEqual('item');
+                    added++;
+                  },
+                  remove: function(widget) {
+                    expect(this.tagName).toEqual('list');
+                    expect(widget.tagName).toEqual('item');
+                    removed++
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    });
+    var a = new LSD.Widget({tag: 'item'}).inject(list);
+    var b = new LSD.Widget({tag: 'item'}).inject(list).addPseudo('checked');
+    var c = new LSD.Widget({tag: 'item'}).inject(list);
+    expect(added).toEqual(0);
+    expect(list.items).toEqual([a, b, c]);
+    expect(list.disabledItems).toEqual([]);
+    expect(list.checkedItems).toEqual([b]);
+    b.disable();
+    expect(added).toEqual(1);
+    expect(list.disabledItems).toEqual([b]);
+    c.disable()
+    expect(added).toEqual(2);
+    expect(list.disabledItems).toEqual([b, c]);
+    b.enable();
+    expect(removed).toEqual(1);
+    expect(list.disabledItems).toEqual([c]);
+    b.enable();
+    expect(removed).toEqual(1);
+    c.disable();
+    expect(list.disabledItems).toEqual([c]);
+    a.disable();
+    b.dispose();
+    expect(list.items).toEqual([a, c])
+    expect(list.checkedItems).toEqual([]);
+    expect(list.disabledItems).toEqual([c, a]);
+  });
+  
+  
+  it ("should define a dependent relation when scope on already initialized relation just fine", function() {
+    var list = new LSD.Widget({
+      tag: 'list', 
+      document: doc
+    });
+    var a = new LSD.Widget({tag: 'item'}).inject(list);
+    var b = new LSD.Widget({tag: 'item'}).inject(list).addPseudo('checked');
+    var c = new LSD.Widget({tag: 'item'}).inject(list);
+    
+    new LSD.Relation('items', list, {
+      selector: 'item',
+      scopes: {
+        checked: {
+          filter: ':checked'
+        },
+        disabled: {
+          filter: ':disabled'
+        }
+      },
+      multiple: true
+    });
+    
+    
+    expect(list.items).toEqual([a, b, c]);
+    expect(list.disabledItems).toEqual([]);
+    expect(list.checkedItems).toEqual([b]);
+    b.disable();
+    expect(list.disabledItems).toEqual([b]);
+    c.disable()
+    expect(list.disabledItems).toEqual([b, c]);
+    b.enable();
+    expect(list.disabledItems).toEqual([c]);
+    b.enable();
+    c.disable();
+    expect(list.disabledItems).toEqual([c]);
+    a.disable();
+    b.dispose();
+    expect(list.items).toEqual([a, c])
+    expect(list.checkedItems).toEqual([]);
+    expect(list.disabledItems).toEqual([c, a]);
+  });
+})

data/Packages/lsd-specs/lsd/Trait/Dimensions.js

@@ -0,0 +1,216 @@
+describe("LSD.Trait.Dimensions", function() {
+  
+  var Dimensioned = new Class({
+    Extends: LSD.Widget.Paint,
+    
+    options: {
+      layers: {
+        shadow:  ['shadow'],
+        stroke: ['stroke'],
+        background:  [LSD.Layer.Fill.Background.Offset],
+        reflection:  [LSD.Layer.Fill.Reflection.Offset]
+      }
+    }
+  });
+  var color = hsb(10, 10, 10);
+  var instance;
+  beforeEach(function() {
+    if (instance) instance.destroy();
+    instance = new Dimensioned;
+  });
+  
+  
+  var empty = {top: 0, left: 0, bottom: 0, right: 0}
+  var examples = {
+    'fixed width widget with padding': {
+      styles: {
+        'width': 50,
+        'height': 35,
+        'paddingLeft': 3,
+        'paddingBottom': 7
+      },
+      expect: {
+        offset: {
+          inside: empty,
+          outside: empty,
+          padding: Object.merge(empty, {left: 3, bottom: 7}),
+          margin: empty
+        },
+        methods: {
+          getClientWidth: 50 + 3,
+          getOffsetWidth: 50 + 3,
+          getLayoutWidth: 50 + 3,
+          getClientHeight: 35 + 7,
+          getOffsetHeight: 35 + 7,
+          getLayoutHeight: 35 + 7
+        }
+      }
+    },
+   'fixed size widget with padding and borders': {
+     styles: {
+       'width': 30,
+       'height': 20,
+       'paddingRight': 4,
+       'paddingTop': 9,
+       'borderTopWidth': 3,
+       'borderRightWidth': 8,
+       'borderStyle': 'solid',
+       'borderColor': '#333'
+     },
+     expect: {
+       offset: {
+         inside: empty,
+         outside: empty,
+         padding: Object.merge(empty, {right: 4, top: 9}),
+         margin: empty
+       },
+       methods: {
+         getClientWidth:  30 + 4,
+         getOffsetWidth:  30 + 4 + 8,
+         getLayoutWidth:  30 + 4 + 8,
+         getClientHeight: 20 + 9,
+         getOffsetHeight: 20 + 9 + 3,
+         getLayoutHeight: 20 + 9 + 3
+       }
+     }
+   },
+   'padding, stroke and margin (negative too)': {
+     styles: {
+       width: 20,
+       height: 100,
+       paddingBottom: 8,
+       paddingLeft: 1,
+       strokeWidth: 3,
+       strokeColor: color,
+       marginTop: 19,
+       marginLeft: -5
+     },
+     expect: {
+       offset: {
+         inside: {left: 3, bottom: 3, right: 3, top: 3},
+         outside: empty,
+         padding: {bottom: 8, left: 1},
+         margin: {top: 19, left: -5}
+       },
+       methods: {
+         getClientWidth: 20 + 1,
+         getOffsetWidth: 20 + 3 * 2 + 1,
+         getLayoutWidth: 20 + 3 * 2 + 1 - 5,
+         getClientHeight: 100 + 8,
+         getOffsetHeight: 100 + 3 * 2 + 8,
+         getLayoutHeight: 100 + 3 * 2 + 8 + 19,
+       }
+     }
+   },
+   'arrow widget with stroke, paddings, border and margin ;-)': {
+     styles: {
+       arrowWidth: 16,
+       arrowHeight: 4,
+       arrowSide: 'bottom',
+       height: 43,
+       width: 71,
+       marginBottom: 12,
+       paddingBottom: 19,
+       borderBottomWidth: 5,
+       borderStyle: 'solid',
+       borderColor: '#ddd',
+       strokeWidth: 1,
+       strokeColor: color
+     },
+     options: {
+       shape: 'arrow'
+     },
+     expect: {
+       offset: {
+         inside: {left: 1, bottom: 1, right: 1, top: 1},
+         outside: empty,
+         padding: {bottom: 19},
+         margin: {bottom: 12}
+       },
+       methods: {
+         getClientWidth: 71,                         // 71
+         getOffsetWidth: 71 + 16 + 1 * 2,            // 89
+         getLayoutWidth: 71 + 16 + 1 * 2,            // 89
+         getClientHeight: 43 + 19,                   // 62
+         getOffsetHeight: 43 + 19 + 4 + 1 * 2,       // 68
+         getOffsetHeight: 43 + 19 + 4 + 12 + 1 * 2,  // 80
+       }
+     }
+   }
+   
+    
+  };
+  
+  Object.each(examples, function(example, description) {
+    describe(description, function() {
+      it ("should match specs", function() {
+        if (example.styles) instance.setStyles(example.styles)
+        if (example.options) instance.setOptions(example.options)
+        instance.inject(document.body);
+        var offset = example.expect.offset;
+        if (offset) {
+          for (var type in offset) {
+            var kind = offset[type];
+            for (var side in kind) expect(instance.offset[type][side]).toEqual(kind[side]);
+          }
+        }
+        var methods = example.expect.methods;
+          if (methods) for (var method in methods) {
+          expect(instance[method]()).toEqual(methods[method]);
+        }
+      })
+    })
+  }); 
+  
+  
+  ['height', 'width'].each(function(property) {
+    var cc = property.capitalize();
+    var directions = property == 'height' ? ['top', 'bottom'] : ['left', 'right'];
+    describe("without " + property + " set", function() {
+      beforeEach(function() {
+        $(instance).setStyle(property, 50);
+      });
+      afterEach(function() {
+        expect(instance['getClient' + cc]()).toEqual(50);
+      })
+      it("should pick it up from offset" + cc, function() {
+        instance.inject(document.body);
+      });
+    });
+    describe("with " + property + " set", function() {
+      it ("should return exactly that " + property, function() {
+        instance.setStyle(property, 75);
+        instance.inject(document.body);
+        expect(instance['getClient' + cc]()).toEqual(75);
+      })
+    })
+  });
+  
+  
+  describe("nested widget with undefined width", function() {
+    var other;
+    beforeEach(function() {
+      instance.setStyle('width', 123);
+      if (other) other.destroy();
+      other = new Dimensioned;
+      other.inject(instance);
+    })
+    it("should get width from parent", function() {
+      instance.inject(document.body);
+      expect(instance.getClientWidth()).toEqual(123);
+      expect(other.getClientWidth()).toEqual(123);
+    })
+    
+    describe("and paddings", function() {
+      it("should not go beyound parent's width bounds", function() {
+        other.setStyles({paddingLeft: 13, paddingRight: 10});
+        instance.inject(document.body);
+        expect(instance.getClientWidth()).toEqual(123);
+        expect(other.getClientWidth()).toEqual(123);
+        expect(other.getOffsetWidth()).toEqual(123);
+        //expect(other.offset.padding.left).toEqual(13);
+        //expect(other.offset.padding.right).toEqual(10);
+      })
+    })
+  })
+});

data/Packages/lsd-specs/lsd/Trait/Layers.js

@@ -0,0 +1,66 @@
+describe("LSD.Trait.Layer", function() {
+  
+  var Layered = new Class({
+    Extends: LSD.Widget.Paint,
+    
+    options: {
+      layers: {
+        shadow:  ['shadow'],
+        stroke: ['stroke'],
+        background:  [LSD.Layer.Fill.Background.Offset],
+        reflection:  [LSD.Layer.Fill.Reflection.Offset],
+        glyph: ['glyph']
+      }
+    }
+  });
+  var color = hsb(10, 10, 10);
+  var instance;
+  beforeEach(function() {
+    if (instance) instance.destroy();
+    instance = new Layered;
+  })
+  
+  it("should render layers and inject them when needed", function() {
+    instance.render({backgroundColor: color});
+    expect(instance.layers.background.injected).toBeTruthy()
+    expect(instance.layers.shadow.injected).toBeFalsy();
+  });
+  
+  it("should render layers in the right order", function() {
+    instance.render({
+      height: 10,
+      width: 10,
+      backgroundColor: color,
+      fillColor: color,
+      glyphColor: color,
+      glyph: "M0,8L4,0L8,8L0,8"
+    });
+    expect(instance.layers.background.injected).toBeTruthy()
+    expect(instance.layers.stroke.injected).toBeTruthy()
+    expect(instance.layers.glyph.injected).toBeTruthy()
+    expect(instance.layers.shadow.injected).toBeFalsy();
+    var find = function(path) {
+      for (var i in instance.layers) if (instance.layers[i].injected && instance.layers[i].shape.element == path) return i;
+    }
+    var order = ['stroke', 'background', 'glyph']
+    var children = $(instance.getShape().element).getChildren();
+    children.shift();
+    children.each(function(path) {
+      if (find(path)) expect(find(path)).toEqual(order.shift())
+    });
+  });
+  
+  it("should collect offsets from layers", function() {
+    instance.render({
+      height: 10,
+      width: 10,
+      strokeWidth: 1,
+      strokeColor: color,
+      fillColor: color
+    });
+    expect(instance.offset.inside.left).toEqual(1);
+    expect(instance.offset.inside.right).toEqual(1);
+    expect(instance.offset.inside.left).toEqual(1);
+    expect(instance.offset.inside.bottom).toEqual(1);
+  });
+});