lsd_rails 0.1

data/Packages/lsd/Source/Document.js

@@ -0,0 +1,188 @@
+/*
+---
+
+script: Document.js
+
+description: Provides a virtual root to all the widgets. DOM-Compatible for Slick traversals.
+
+license: Public domain (http://unlicense.org).
+
+authors: Yaroslaff Fedin
+
+requires:
+  - LSD.Widget
+  - Core/DomReady
+  - Core/Options
+  - Core/Events
+  - More/String.QueryString
+  - LSD
+  - LSD.Module.Attributes
+  - LSD.Module.Selectors
+
+provides:
+  - LSD.Document
+
+...
+*/
+
+
+/*
+  Document is a big disguise proxy class that contains the tree
+  of widgets and a link to document element.
+  
+  It is DOM-compatible (to some degree), so tools that crawl DOM
+  tree (we use Slick) can work with the widget tree like it usually
+  does with the real DOM so we get selector engine for free.
+  
+  The document itself is not in the tree, it's a container.
+  
+  The class contains a few hacks that allows Slick to initialize.
+*/
+
+
+LSD.Document = new Class({
+  
+  Implements: [Events, Options, LSD.Module.Attributes],
+  
+  initialize: function(document, options) {
+    if (document && !document.documentElement) options = [document, document = options][0];
+    if (!document) document = window.document;
+    if (!LSD.document) LSD.document = this;
+    this.setOptions(options || {});
+    this.document = this;
+    this.element = document;
+    this.sourceIndex = 1;
+    LSD.uid(this);
+    
+    /*
+      Trick Slick into thinking that LSD elements tree is an XML node 
+      tree (so it won't try speeding up the queries with optimizations)
+    */
+    this.documentElement = this;
+    this.xml = true;
+    this.slickFeatures = LSD.Module.Selectors.Features;
+    this.nodeType = 9;
+    this.attributes = {};
+    
+    this.params = (location.search.length > 1) ? location.search.substr(1, location.search.length - 1).parseQueryString() : {}
+    document.addEvent('domready', function() {
+      this.building = true;
+      if ("benchmark" in this.params) console.profile();
+      this.build();
+      if ("benchmark" in this.params) console.profileEnd();
+      this.building = false;
+    }.bind(this));
+    this.element.addEvent('click', this.onClick.bind(this));
+    this.element.addEvent('mousedown', this.onMousedown.bind(this));
+  },
+  
+  /* 
+    Single relay click listener is put upon document.
+    It spies for all clicks on elements and finds out if 
+    any links were clicked. If the link is not widget,
+    the listener creates a lightweight link class instance and
+    calls click on it to trigger commands and interactions.
+    
+    This way there's no need to preinitialize all link handlers, 
+    and only instantiate class when the link was actually clicked.
+  */
+  onClick: function(event) {
+    if (event.target.ownerDocument == document)
+    for (var target = event.target, link, widget; target && target.tagName; target = target.parentNode) {
+      widget = target.uid && Element.retrieve(target, 'widget');
+      var a = (LSD.toLowerCase(target.tagName) == 'a');
+      if (a) {
+        if (!widget) widget = new LSD.Widget(target, {
+          document: this, 
+          pseudos: ['clickable', 'command']
+        });
+        event.preventDefault();
+      }
+      if (widget && widget.pseudos.clickable) {
+        event.stopPropagation();
+        widget.click(event);
+        break;
+      }
+    };
+  },
+  
+  onMousedown: function(event) {
+    if (event.target.ownerDocument == document)
+    for (var target = event.target, widget; target && target.tagName; target = target.parentNode) {
+      widget = target.uid && Element.retrieve(target, 'widget');
+      if (widget && widget.pseudos.activatable) widget.fireEvent('mousedown', event);
+    };
+  },
+  
+  setHead: function(head) {
+    for (var i = 0, el, els = head.getElementsByTagName('meta'); el = els[i++];) {
+      var type = el.getAttribute('rel');
+      if (type) {
+        type += 's';
+        if (!this[type]) this[type] = {};
+        var content = el.getAttribute('content')
+        if (content) this[type][el.getAttribute('name')] = (content.charAt(0) =="{") ? JSON.decode(content) : content;
+      }
+    }
+    // Attach stylesheets, if there are stylesheets loaded
+    if (LSD.Sheet && LSD.Sheet.stylesheets) for (var i = 0, sheet; sheet = LSD.Sheet.stylesheets[i++];) this.addStylesheet(sheet);
+  },
+  
+  build: function(document) {
+    if (!document) document = this.element || window.document;
+    this.setHead(document.head);
+    var element = this.element = document.body;
+    this.setBody(document.body);
+  },
+  
+  setBody: function(element) {
+    if (!element) element = this.getBodyElement()
+    this.fireEvent('beforeBody', element);
+    var options = {
+      document: this, 
+      events: {
+        self: {
+          boot: function() {
+            this.document.body = this;
+          }
+        }
+      },
+      tag: 'body'
+    };
+    if (this.options.mutations) options.mutations = this.options.mutations;
+    if (this.options.context) options.context = this.options.context;
+    new LSD.Widget(element, options);
+    this.fireEvent('body', [this.body, element]);
+    return element;
+  },
+
+  getBodyElement: function() {
+    return this.document.body;
+  },
+  
+  redirect: function(url) {
+    window.location.href = url;
+  },
+  
+  getElements: function() {
+    return this.body.getElements.apply(this.body, arguments);
+  },
+  
+  getElement: function() {
+    return this.body.getElement.apply(this.body, arguments);
+  },
+  
+  addStylesheet: function(sheet) {
+    if (!this.stylesheets) this.stylesheets = [];
+    this.stylesheets.include(sheet);
+    sheet.attach(this);
+  },
+  
+  removeStylesheet: function(sheet) {
+    if (!this.stylesheets) return;
+    this.stylesheets.erase(sheet);
+    sheet.detach(this);
+  },
+  
+  $family: Function.from('document')
+});

data/Packages/lsd/Source/Interpolation.js

@@ -0,0 +1,103 @@
+/*
+---
+ 
+script: Interpolation.js
+ 
+description: A logic to render (and nest) widgets out of the key-value hash or dom tree
+ 
+license: Public domain (http://unlicense.org).
+
+authors: Yaroslaff Fedin
+ 
+requires:
+  - LSD
+  - Sheet/SheetParser.Value
+  - String.Inflections/String.pluralize
+
+provides: 
+  - LSD.Interpolation
+ 
+...
+*/
+
+
+!function() {
+  LSD.Interpolation = {}
+  var helpers = LSD.Interpolation.helpers = {
+    pluralize: function(count, singular, plural) {
+      var value = (count == 1) ? singular : (plural || (singular.pluralize()));
+      return value.replace("%", count);
+    },
+    auto_pluralize: function(count, singular, plural) {
+      return count + " " + helpers.pluralize(count, singular, plural);
+    }
+  }
+  
+  var regex = SheetParser.Value.tokenize;
+  var parsed = {};
+  
+  var interpolate = LSD.Interpolation.execute = function(name, callback, simple) {
+    if (!simple || (name.indexOf('(') > -1)) return run(translate(name), callback);
+    return callback(name);
+  }
+  
+  var translate = LSD.Interpolation.translate = function(value) {
+    var cached = parsed[name];
+    if (cached) return cached;
+    var found, result = [], matched = [], scope = result, func, text;
+    var names = regex.names;
+    while (found = regex.exec(value)) matched.push(found);
+    for (var i = 0; found = matched[i++];) {
+      if (func = found[names['function']]) {
+        var translated = translate(found[names._arguments]);
+        for (var j = 0, bit; bit = translated[j]; j++) if (bit && bit.length == 1) translated[j] = bit[0];
+        scope.push({fn: func, arguments: translated});
+      } else if (text = (found[names.dstring] || found[names.sstring])) {
+        scope.push(text)
+      } else if (text = found[names.token]) {
+        scope.push({fn: interpolate, arguments: [text, true], callback: true})
+      }
+    }
+    return (parsed[value] = (result.length == 1 ? result[0] : result));
+  };
+  
+  var run = LSD.Interpolation.run = function(command, callback) {
+    var fn = command.fn;
+    if (fn) {
+      var func = fn.indexOf ? (helpers[fn] || (callback(fn))) : fn;
+      if (!func) {
+        console.error(fn, ' interpoaltion function is not found');
+        return "";
+      }
+      var args = Array.prototype.slice.call(command.arguments, 0);
+      for (var i = 0, j = args.length; i < j; i++) args[i] = run(args[i], callback);
+      if (command.callback) args.splice(1, 0, callback);
+      return func.apply(this, args);
+    }
+    return command;
+  };
+  
+  var attempt = LSD.Interpolation.attempt = function(string) {
+    var count = 0, args = arguments;
+    string = string.replace(/\\?\{([^{}]+)\}/g, function(match, name){
+      count++;
+      if (match.charAt(0) == '\\') return match.slice(1);
+      for (var arg, value, callback, element, i = 1, j = args.length; i < j; i++) {
+        if (!(arg = args[i])) continue;
+        if (arg.call) callback = call;
+        else if (arg.localName) element = arg;
+        else if (arg[match]) return arg[match];
+      }
+      return interpolate(match, callback) || (element && element.getAttribute('data-' + match.dasherize)) || "";
+    });
+    return count ? string : false;
+  };
+  
+  var from = LSD.Interpolation.from = function() {
+    var args = Array.prototype.slice(arguments, 0);
+    return function(string) {
+      return attempt.apply([string].concat(args));
+    };
+  };
+  
+}();

data/Packages/lsd/Source/LSD.js

@@ -0,0 +1,163 @@
+/*
+---
+ 
+script: LSD.js
+ 
+description: LSD namespace definition
+ 
+license: Public domain (http://unlicense.org).
+
+authors: Yaroslaff Fedin
+ 
+requires:
+  - Core/Class
+  - Core/Events
+  - Core/Options
+  - Core/Browser
+  - Core/Object
+  - Ext/Macro
+  - Ext/States
+  - Ext/Class.mixin
+  - Ext/FastArray
+  - Ext/Class.Mutators.Includes
+ 
+provides: 
+  - LSD
+ 
+...
+*/
+
+if (!window.console) window.console = {};
+if (!window.console.log) window.console.log = function() {};
+
+var LSD = Object.append(new Events, {
+  Events: {},
+  Attributes: {
+    Numeric: Array.fast('tabindex', 'width', 'height'),
+    Boolean: Array.fast('readonly', 'disabled', 'hidden', 'checked')
+  },
+  Styles: {},
+  States: {
+    Known: {
+      built:    {enabler: 'build',      disabler: 'destroy',   reflect: false},
+      attached: {enabler: 'attach',     disabler: 'detach',    reflect: false},
+      hidden:   {enabler: 'hide',       disabler: 'show'},
+      disabled: {enabler: 'disable',    disabler: 'enable'},
+      active:   {enabler: 'activate',   disabler: 'deactivate'},
+      focused:  {enabler: 'focus',      disabler: 'blur'},     
+      selected: {enabler: 'select',     disabler: 'unselect'}, 
+      checked:  {enabler: 'check',      disabler: 'uncheck',   toggler: 'toggle'},
+      collapsed:{enabler: 'collapse',   disabler: 'expand',  toggler: 'toggle'},
+      working:  {enabler: 'busy',       disabler: 'idle'},
+      chosen:   {enabler: 'choose',     disabler: 'forget'},
+      empty:    {enabler: 'empty',      disabler: 'fill',      property: 'unfilled', initial: true},
+      invalid:  {enabler: 'invalidate', disabler: 'validate',   events: {enabler: 'invalid', disabler: 'valid'}},
+      valid:    {enabler: 'validate',   disabler: 'invalidate', events: {enabler: 'valid', disabler: 'invalid'}},
+      editing:  {enabler: 'edit',       disabler: 'finish'}
+    },
+    Positive: {
+      disabled: 'disabled',
+      focused: 'focused'
+    },
+    Negative: {
+      enabled: 'disabled',
+      blured: 'focused'
+    },
+    Attributes: {
+      disabled: 'disabled',
+      hidden: 'hidden'
+    },
+    Classes: {
+      selected: 'selected',
+      empty: 'empty',
+      working: 'working',
+      focused: 'focused',
+      editing: 'editing'
+    }
+  },
+  Options: {},
+  useNative: true
+});
+
+Object.append(LSD, {
+  position: function(box, size, x, y) {
+    var position = {x: 0, y: 0};
+
+    switch (x) {
+      case "left":
+        position.x = 0;
+      case "right":
+        position.x = box.width - size.width;
+      case "center":
+        position.x = (box.width - size.width) / 2;
+    }
+    switch (y) {
+      case "top":
+        position.y = 0;
+      case "bottom":
+        position.y = box.height - size.height;
+      case "center":
+        position.y = (box.height- size.height) / 2;
+    }
+    return position;
+  },
+  
+  toLowerCase: function(lowercased) {
+    return function(string) { 
+      return (lowercased[string]) || (lowercased[string] = string.toLowerCase())
+    }
+  }(LSD.lowercased = {}),
+  
+  capitalize: function(capitalized) {
+    return function(string) {
+      return (capitalized[string]) || (capitalized[string] = string.capitalize())
+    }
+  }(LSD.capitalized = {}),
+  
+  toClassName: function(classnamed) {
+    return function(string) {
+      return (classnamed[string]) || (classnamed[string] = string.replace(/(^|-)([a-z])/g, function(a, b, c) { return (b ? '.' : '') + c.toUpperCase()}))
+    }
+  }(LSD.classnamed = {}),
+  
+  uid: function(object) {
+    if (object.lsd) return object.lsd;
+    if (object.localName) return $uid(object);
+    return (object.lsd = ++LSD.UID); 
+  },
+  
+  UID: 0,
+  
+  slice: (Browser.ie ? function(list, start) {
+    for (var i = start || 0, j = list.length, ary = []; i < j; i++) ary.push(list[i]);
+    return ary;
+  } : function(list, start) {
+    return Array.prototype.slice.call(list, start || 0);
+  }),
+  
+  log: function() {
+    console.log.apply(console, arguments);
+  },
+  
+  error: function() {
+    (console.error || console.log).apply(console, arguments);
+  },
+  
+  warn: function() {
+    (console.warn || console.log).apply(console, arguments);
+  },
+  
+  info: function() {
+    (console.info || console.log).apply(console, arguments);
+  }
+});
+
+States.get = function(name) { 
+  return LSD.States.Known[name];
+};
+
+(function(toString) {
+  Type.isEnumerable = function(item){
+    return (item != null && typeof item.length == 'number' && toString.call(item) != '[object Function]' && !item.localName && !item.nodeType);
+  };
+})(Object.prototype.toString);

data/Packages/lsd/Source/Layer/Color.js

@@ -0,0 +1,43 @@
+/*
+---
+ 
+script: Color.js
+ 
+description: Fills shape with color
+ 
+license: Public domain (http://unlicense.org).
+
+authors: Yaroslaff Fedin
+ 
+requires:
+- LSD.Layer
+ 
+provides: [LSD.Layer.Color, LSD.Layer.Fill]
+ 
+...
+*/
+
+LSD.Layer.Color = {
+  properties: {
+    color: ['color', 'gradient', 'none']
+  },
+  
+  paint: function(color) {
+    if (color) var radial = color['radial-gradient'], gradient = color['gradient'] || color ['linear-gradient'];
+    if (gradient) {
+      return {fillLinear: [gradient]}
+    } else if (!radial) {
+      return {fill: (!color || color == 'none') ? null : color} 
+    }
+  }
+};
+
+LSD.Layer.Fill = {
+  properties: {
+    color: ['color']
+  },
+  
+  prefix: 'fill',
+  
+  paint: LSD.Layer.Color.paint
+};

data/Packages/lsd/Source/Layer/Offset.js

@@ -0,0 +1,37 @@
+/*
+---
+ 
+script: Offset.js
+ 
+description: Positions layer around the canvas
+ 
+license: Public domain (http://unlicense.org).
+
+authors: Yaroslaff Fedin
+ 
+requires:
+- LSD.Layer
+ 
+provides: [LSD.Layer.Offset]
+ 
+...
+*/
+
+LSD.Layer.Offset = {
+  properties: {  
+    offset:    [['top', 'right', 'bottom', 'left']],
+    top:       ['length', 'percentage'],
+    left:      ['length', 'percentage'],
+    bottom:    ['length', 'percentage'],
+    right:     ['length', 'percentage'],
+  },
+
+  paint: function(top, right, bottom, left) {
+    return {
+      move: {
+        x: left == null && right != null ? (this.size.width - (right || 0)) : (left || 0), 
+        y: top == null && bottom != null ? (this.size.height - (bottom || 0)) : (top || 0)
+      }
+    }
+  }
+};

data/Packages/lsd/Source/Layer/Position.js

@@ -0,0 +1,35 @@
+/*
+---
+ 
+script: Position.js
+ 
+description: Positions layer in the box
+ 
+license: Public domain (http://unlicense.org).
+
+authors: Yaroslaff Fedin
+ 
+requires:
+  - LSD.Layer
+ 
+provides: 
+  - LSD.Layer.Position
+ 
+...
+*/
+
+LSD.Layer.Position = {
+  properties: {
+    position: [['x', 'y']],
+    x:        ['length', 'percentage', 'left', 'right', 'center'],
+    y:        ['length', 'percentage', 'top', 'bottom', 'center']
+  },
+  
+  
+  paint: function(x, y) {
+    if (!x && !y) return;
+    return {
+      move: LSD.position(this.box, this.size, x || 'center', y || 'center')
+    }
+  }
+}

data/Packages/lsd/Source/Layer/Radius.js

@@ -0,0 +1,39 @@
+/*
+---
+ 
+script: Radius.js
+ 
+description: Rounds shapes corners
+ 
+license: Public domain (http://unlicense.org).
+
+authors: Yaroslaff Fedin
+ 
+requires:
+  - LSD.Layer
+ 
+provides: 
+  - LSD.Layer.Radius
+ 
+...
+*/
+
+LSD.Layer.Radius = {
+  properties: {
+    radius:      [['topLeft', 'bottomLeft', 'topRight', 'bottomRight'], 'collection'],
+    topLeft:     ['percentage', 'length'],
+    bottomLeft:  ['percentage', 'length'],
+    topRight:    ['percentage', 'length'],
+    bottomRight: ['percentage', 'length'],
+  },
+  
+  paint: function() {
+    return {
+      radius: Array.prototype.splice.call(arguments, 0).map(function(r) { return r || 0})
+    }
+  }
+}
+
+
+
+LSD.Layer.prepare('corner', ['radius'], false);

data/Packages/lsd/Source/Layer/Scale.js

@@ -0,0 +1,36 @@
+/*
+---
+ 
+script: Scale.js
+ 
+description: Adds a way to set scale level to the layer
+ 
+license: Public domain (http://unlicense.org).
+
+authors: Yaroslaff Fedin
+ 
+requires:
+  - LSD.Layer
+ 
+provides: 
+  - LSD.Layer.Scale
+ 
+...
+*/
+
+LSD.Layer.Scale = {
+  properties: {
+    scale: [['x', 'y'], 'collection'],
+    x:     ['number', 'percentage'],
+    y:     ['number', 'percentage']
+  },
+  
+  paint: function(x, y) {
+    if (x != null || y != null) return {
+      size: {
+        width: - this.size.width * (1 - x),
+        height: - this.size.height * (1 - y)
+      }
+    }
+  }
+}

data/Packages/lsd/Source/Layer/Shadow.Blur.js

@@ -0,0 +1,41 @@
+/*
+---
+ 
+script: Shadow.Blur.js
+ 
+description: SVG Filter powered shadow
+ 
+license: Public domain (http://unlicense.org).
+
+authors: Yaroslaff Fedin
+ 
+requires:
+- LSD.Layer.Shadow
+ 
+provides: [LSD.Layer.Shadow.Blur]
+ 
+...
+*/
+
+LSD.Layer.Shadow.Blur = new Class({
+  //Extends: LSD.Layer.Shadow,
+
+  paint: function(color, blur, x, y, stroke) {
+    this.produce(stroke);
+    this.shape.fill.apply(this.shape, color ? $splat(color) : null);
+    if (blur > 0) this.shape.blur(blur);
+    else this.shape.unblur();
+    return {
+      move: {
+        x: x + blur, 
+        y: y + blur
+      },
+      outside: {
+        left: Math.max(blur - x, 0),
+        top: Math.max(blur - y, 0),
+        right: Math.max(blur + x, 0),
+        bottom: Math.max(blur + y, 0)
+      }
+    }
+  }
+})