lsd_rails 0.1

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

@@ -0,0 +1,99 @@
+/*
+---
+ 
+script: InnerShadow.js
+ 
+description: Drops inner shadow 
+ 
+license: Public domain (http://unlicense.org).
+
+authors: Yaroslaff Fedin
+ 
+requires:
+  - LSD.Layer.Shadow
+ 
+provides: 
+  - LSD.Layer.Shadow.Inset
+ 
+...
+*/
+
+LSD.Layer.InnerShadow = new Class({
+  //Extends: LSD.Layer.Shadow,
+  
+  properties: {
+    required: ['innerShadowColor'],
+    numerical: ['innerShadowBlur', 'innerShadowOffsetX', 'innerShadowOffsetY']
+  },
+
+  paint: function(color, blur, x, y) {
+    var fill = new Color(color);
+    fill.base = fill.alpha;
+    var transition = function(p){
+      return 1 - Math.sin((1 - p) * Math.PI / 2);
+    };
+    var offset = Math.max(Math.abs(x), Math.abs(y));
+    blur += offset;
+    for (var i = 0; i < blur; i++) {
+      if (blur == 0) {
+        fill.alpha = Math.min(fill.base * 2, 1)
+      } else {
+        fill.alpha = fill.base * transition((blur - i) / blur)
+      }
+      var layer = this.layers[i];
+      if (!layer) layer = this.layers[i] = LSD.Layer.InnerShadow.Layer.getInstance(this);
+      layer.layer = this;
+      layer.base = this.base;
+      layer.blur = blur
+      layer.dy = y - x
+      layer.y = Math.max(Math.min(layer.dy, 0) + i, 0);
+      layer.dx = x - y;
+      layer.x = Math.max(Math.min(layer.dx, 0) + i, 0);
+      layer.produce([
+        Math.min(((layer.x > 0) ? ((layer.dx - i < 0) ? 1 : 0.5) * - layer.x  - 0.25 : 0), 0),
+        Math.min(((layer.y > 0) ? (layer.dy + i < 0 ? 1 : 0.5) * - layer.y  - 0.25: 0), 0)
+      ]);
+      layer.stroke(fill, 1);
+    }
+    var length = this.layers.length;
+    for (var i = blur; i < length; i++) if (this.layers[i]) LSD.Layer.InnerShadow.Layer.release(this.layers[i]);
+    this.layers.splice(blur, length);
+  },
+  
+  translate: function(x, y) {
+    this.parent.apply(this, arguments);
+    for (var i = 0, j = this.layers.length; i < j; i++) {
+      var layer = this.layers[i];
+      if (layer) layer.translate(x + layer.x, y + layer.y);
+    }
+  },
+  
+  eject: function() {
+    for (var i = 0, j = this.layers.length; i < j; i++) {
+      var layer = this.layers[i];
+      if (!layer) continue;
+      LSD.Layer.InnerShadow.Layer.release(layer)
+      if (layer.shape.element.parentNode) layer.shape.element.parentNode.removeChild(layer.shape.element);
+    }
+  },
+
+  inject: function(node) {
+    this.parent.apply(this, arguments);
+    this.update.apply(this, arguments);
+  },
+  
+  update: function() {
+    for (var i = 0, j = this.layers.length; i < j; i++) if (this.layers[i]) this.layers[i].inject.apply(this.layers[i], arguments);
+  }
+});
+LSD.Layer.InnerShadow.Layer = new Class({
+  Extends: LSD.Layer
+});
+LSD.Layer.InnerShadow.Layer.stack = [];
+LSD.Layer.InnerShadow.Layer.getInstance = function() {
+  return LSD.Layer.InnerShadow.Layer.stack.pop() || (new LSD.Layer.InnerShadow.Layer);
+}
+LSD.Layer.InnerShadow.Layer.release = function(layer) {
+  layer.element.parentNode.removeChild(layer.element);
+  LSD.Layer.InnerShadow.Layer.stack.push(layer);
+};

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

@@ -0,0 +1,35 @@
+/*
+---
+ 
+script: Shadow.Native.js
+ 
+description: CSS powered shadow
+ 
+license: Public domain (http://unlicense.org).
+
+authors: Yaroslaff Fedin
+ 
+requires:
+- LSD.Layer.Shadow
+ 
+provides: [LSD.Layer.Shadow.Native]
+ 
+...
+*/
+
+LSD.Layer.Shadow.Native = new Class({
+  //Extends: LSD.Layer,
+
+  paint: function(color, blur, x, y, stroke) {
+    var widget = this.base.widget;
+    var element = widget.toElement();
+    element.set('borderRadius', widget.getStyle('cornerRadius'));
+    element.set('boxShadow', {color: color, blur: blur, x: x, y: y})
+  },
+  
+  eject: function() {
+    var widget = this.base.widget;
+    var element = widget.element;
+    element.set('boxShadow', false)
+  }
+})

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

@@ -0,0 +1,105 @@
+/*
+---
+ 
+script: Shadow.Onion.js
+ 
+description: Draws shadow with layers stack upon each others
+ 
+license: Public domain (http://unlicense.org).
+
+authors: Yaroslaff Fedin
+ 
+requires:
+- LSD.Layer.Shadow
+ 
+provides: [LSD.Layer.Shadow.Onion]
+ 
+...
+*/
+
+LSD.Layer.Shadow.Onion = new Class({
+  //Extends: LSD.Layer.Shadow,
+  
+  paint: function(color, blur, x, y, stroke) {
+    var fill = new Color(color);
+    fill.base = fill.alpha;
+    //var node = this.element.parentNode;
+    var layers = Math.max(blur, 1);
+    for (var i = 0; i < layers; i++) {
+      if (blur == 0) {
+        fill.alpha = Math.min(fill.base * 2, 1)
+      } else {
+        fill.alpha = fill.base / 2 * (i == blur ? .29 : (.2 - blur * 0.017) + Math.sqrt(i / 100));
+      }
+      var rectangle = this.layers[i];
+      if (!rectangle) rectangle = this.layers[i] = LSD.Layer.Shadow.Layer.getInstance(this);
+      rectangle.base = this.base;
+      rectangle.shadow = this;
+      rectangle.produce(stroke / 2 + blur / 2 - i);
+      rectangle.fill(fill);
+    }
+    var length = this.layers.length;
+    for (var i = layers; i < length; i++) if (this.layers[i]) LSD.Layer.Shadow.Layer.release(this.layers[i]);
+    this.layers.splice(layers, length);
+    return {
+      move: {
+        x: x * 1.5, //multiplying by 1.5 is unreliable. I need a better algorithm altogether
+        y: y * 1.5
+      },
+      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)
+      }
+    }
+  },
+
+  inject: function(node) {
+    this.parent.apply(this, arguments);
+    this.update.apply(this, arguments);
+  },
+  
+  update: function() {
+    for (var i = 0, j = this.layers.length; i < j; i++) if (this.layers[i]) this.layers[i].inject.apply(this.layers[i], arguments);
+  },
+  
+  eject: function() {
+    for (var i = 0, j = this.layers.length; i < j; i++) {
+      var layer = this.layers[i];
+      if (!layer) continue;
+      LSD.Layer.Shadow.Layer.release(layer)
+      if (layer.shape.element.parentNode) layer.shape.element.parentNode.removeChild(layer.shape.element);
+    }
+  },
+
+  translate: function(x, y) {
+    this.parent.apply(this, arguments);
+    for (var i = 0, j = this.layers.length; i < j; i++) 
+      if (this.layers[i]) this.layers[i].translate(x + i + j / 2, y + i + j / 2)
+  }
+});
+
+LSD.Layer.Shadow.Layer = new Class({
+  Extends: LSD.Layer,
+  
+  
+  inject: function(container){
+    this.eject();
+    if (container instanceof ART.SVG.Group) container.children.push(this);
+    this.container = container;
+    var first = container.element.firstChild;
+    if (first) container.element.insertBefore(this.shape.element, first);
+    else container.element.appendChild(this.shape.element);
+    return this;
+  }
+});
+LSD.Layer.Shadow.Layer.stack = [];
+LSD.Layer.Shadow.Layer.getInstance = function() {
+  return LSD.Layer.Shadow.Layer.stack.pop() || (new LSD.Layer.Shadow.Layer);
+};
+LSD.Layer.Shadow.Layer.release = function(layer) {
+  var shape = layer.shape;
+  if (shape) shape.element.parentNode.removeChild(shape.element);
+  LSD.Layer.Shadow.Layer.stack.push(layer);
+};

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

@@ -0,0 +1,46 @@
+/*
+---
+ 
+script: Shadow.js
+ 
+description: Drops outer shadow with offsets. Like a box shadow!
+ 
+license: Public domain (http://unlicense.org).
+
+authors: Yaroslaff Fedin
+ 
+requires:
+- LSD.Layer
+- Ext/Element.Properties.boxShadow
+- Ext/Element.Properties.borderRadius
+ 
+provides: [LSD.Layer.Shadow, LSD.Layer.Shadow.Layer]
+ 
+...
+*/
+
+                              //only gecko & webkit nightlies                                       AppleWebKit/534.1+ (KHTML, ... plus means nightly
+Browser.Features.SVGFilters = Browser.firefox || (Browser.webkit && navigator.userAgent.indexOf("+ (KHTML") > -1) 
+
+LSD.Layer.Shadow = {
+  
+  properties: {
+    shadow:    ['blur', ['offsetX', 'offsetY'], 'color'],
+    blur:      ['length', 'number'],
+    offsetX:   ['length', 'number'],
+    offsetY:   ['length', 'number'],
+    color:     ['color']
+  },
+  
+  paint: function(color, blur, x, y, stroke, method) {
+    //if (!method) {
+    //  if (this.method) method = method
+    //  if (blur < 4) method = 'onion';
+    //  else if (Browser.Features.boxShadow && this.base.name == 'rectangle') method = 'native';
+    //  else if (Browser.Features.SVGFilters) method = 'blur';
+    //  else method = 'onion'
+    //}
+    //if (this.method && method != this.method) this.eject();
+    //return this.setMethod(method).paint.apply(this, arguments);
+  }
+}

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

@@ -0,0 +1,56 @@
+/*
+---
+ 
+script: Shape.js
+ 
+description: Base layer that provides shape
+ 
+license: Public domain (http://unlicense.org).
+
+authors: Yaroslaff Fedin
+ 
+requires:
+  - LSD.Layer
+  - ART/ART.Shape
+ 
+provides: 
+  - LSD.Layer.Shape
+ 
+...
+*/
+
+LSD.Layer.Styles = {}
+LSD.Layer.Shape = {
+  properties: {
+    shape:      ['url', 'shape', 'glyph']
+  },
+  
+  paint: function(shape) {
+    return {
+      shape: shape
+    }
+  },
+  
+  onCompile: function(name) {
+    for (var shape in ART.Shape) {
+      var klass = ART.Shape[shape];
+      if (!klass || !klass.prototype || !klass.prototype.properties) continue;
+      var properties = klass.prototype.properties;
+      LSD.Layer.Styles[name + shape] = properties.map(function(prop) { return name + prop.capitalize()});
+    }
+  }
+}
+
+Object.append(SheetParser.Property.Type, {
+  shape: function(value) {
+    if (value.indexOf) var name = value
+    else for (var key in value) { var name = key; break};
+    return !!ART.Shape[name.capitalize()]
+  },
+  
+  glyph: function(value) {
+    return value.glyph
+  }
+});
+
+LSD.Styles.shape = SheetParser.Property.compile(LSD.Layer.Shape.properties.shape)

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

@@ -0,0 +1,38 @@
+/*
+---
+ 
+script: Size.js
+ 
+description: Base layer that provides shape
+ 
+license: Public domain (http://unlicense.org).
+
+authors: Yaroslaff Fedin
+ 
+requires:
+  - LSD.Layer
+ 
+provides: 
+  - LSD.Layer.Size
+ 
+...
+*/
+
+LSD.Layer.Size = {
+  properties: {
+    size:       [['height', 'width'], 'collection'],
+    height:     ['length', 'percentage'],
+    width:      ['length', 'percentage']
+  },
+  
+  prefix: false,
+  
+  paint: function(height, width) {
+    if (height !== null && width !== null) return {
+      size: {
+        height: this.size.height ? (height - this.size.height) : height,
+        width: this.size.width ? (width - this.size.width) : width
+      }
+    }
+  }
+}

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

@@ -0,0 +1,61 @@
+/*
+---
+ 
+script: Stroke.js
+ 
+description: Fills shape with color and strokes with a stroke
+ 
+license: Public domain (http://unlicense.org).
+
+authors: Yaroslaff Fedin
+ 
+requires:
+  - LSD.Layer
+  - LSD.Layer.Color
+ 
+provides: 
+  - LSD.Layer.Stroke
+ 
+...
+*/
+
+LSD.Layer.Stroke = {
+  
+  properties: {
+    stroke:    ['width', ['cap', 'join', 'dash'], 'color'], 
+    color:     ['gradient', 'color'],
+    width:     ['length'],
+    cap:       ['butt', 'round', 'square'],
+    join:      ['butt', 'round', 'square'],
+    dash:      ['tokens']
+  },
+  
+  paint: function(color, width, cap, join, dash) {
+    if (!width) width = 0;
+    var gradient = color && (color['gradient'] || color['linear-gradient']);
+    var result = {    
+      dash: dash,
+      size: {
+        width: width,
+        height: width
+      },
+      move: {
+        x: width / 2,
+        y: width / 2
+      },
+      inside: {
+        left: width,
+        top: width,
+        right: width,
+        bottom: width
+      },
+      stroke: [!gradient && color || null, width, cap, join]
+    };
+    if (this.radius != null) {
+      var radius = result.radius = []
+          for (var i = 0; i < 4; i++) radius[i] = (this.radius[i] > 0) ? width / 1.5 : 0;
+    }
+    if (gradient) result.strokeLinear = [gradient]
+    return result;
+  }
+}

data/Packages/lsd/Source/Layer.js

@@ -0,0 +1,212 @@
+/*
+---
+ 
+script: Layer.js
+ 
+description: Adds a piece of SVG that can be drawn with widget styles
+ 
+license: Public domain (http://unlicense.org).
+
+authors: Yaroslaff Fedin
+ 
+requires:
+  - ART/ART.Shape
+  - LSD.Module.Styles
+  - Sheet/SheetParser.Styles
+ 
+provides: 
+  - LSD.Layer
+  - LSD.Layer.Shaped
+ 
+...
+*/
+
+!function() {
+  
+LSD.Layer = function(name, styles, painters) {
+  this.name = name;
+  this.styles = styles;
+  this.painters = painters;
+}
+
+LSD.Layer.prototype = {
+  render: function(widget, commands) {
+    var canvas = widget.getCanvas();
+    var shape = commands.shape;
+    if (shape == 'none') return;
+    if (!shape) shape = widget.getStyle('shape') || 'rectangle';
+    var layer = widget.shapes[this.name];
+    if (shape.glyph) {
+      var glyph = ART.Glyphs[shape.glyph];
+      if (!glyph) return;    
+      var path = new ART.Path(glyph);
+      var box = path.measure();
+      if (!layer) layer = new ART.Shape(path, box.width, box.height);
+      if (commands.size && !Object.equals(previous ? previous.size : box, commands.size))
+        layer.resizeTo(commands.size.width, commands.size.height)
+        
+    } else if (!shape.indexOf){
+      for (var name in shape) {
+        var values = shape[name];
+        if (!values.push) values = [values];
+        shape = name;
+      }
+    }
+    if (!layer) {
+      var path = ART.Shape[shape.capitalize()];
+      if (!path) return;
+      var layer = new path;
+      layer.render(commands)
+    } else {
+      var previous = layer.commands;
+      if (layer.draw && layer.render) layer.render(commands)
+    }
+    layer.commands = commands;
+    widget.shapes[this.name] = layer;
+    for (command in commands) {
+      var value = commands[command];
+      if (layer[command] && command != 'move') {
+        if (!value || !previous || !Object.equals(previous[command], value)) layer[command][value && value.push ? 'apply' : 'call'](layer, value);
+      }
+    }
+    var translate = commands.translate = {x: 0, y: 0}
+    if (commands.inside) {
+      translate.x += commands.inside.left
+      translate.y += commands.inside.top;
+    };
+    //if (commands.outside) {
+    //  top += commands.outside.top;
+    //  left += commands.outside.left
+    //};
+    if (commands.move) {
+      translate.x += commands.move.x;
+      translate.y += commands.move.y;
+    }
+    if (!previous || !Object.equals(previous.translate, translate)) layer.moveTo(translate.x, translate.y)
+  },
+  
+  draw: function(widget, context, previous) {
+    context = Object.append({size: widget.size, style: widget.style.current}, context || {});
+    if (context.style.cornerRadiusTopLeft !== null) {
+      context.radius = widget.getStyle('cornerRadius')
+    }
+    var inherited = {}, overwritten = {};
+    for (var painter, i = 0; painter = this.painters[i++];) {
+      var commands = painter.paint.apply(context, painter.keys.map(function(prop) { return widget.getStyle(prop)}));
+      for (var name in commands) {
+        var value = commands[name];
+        if (Inherit[name]) {;
+          inherited[name] = merge(value, context[name])
+        } else {
+          if (!Accumulate[name]) overwritten[name] = context[name]
+          context[name] = (Accumulate[name] || Merge[name]) ? merge(value, context[name]) : value;
+        }
+      }
+      //for (var command in value) this[command](command[value]);
+    }    
+    this.render(widget, context);
+    return Object.append(context, overwritten, inherited);;
+  }
+}
+
+var merge = function(value, old) {
+  if (typeof value == "object") {
+    if (value.push) {
+      for (var j = 0, k = value.length; j < k; j++) {
+        var item = value[j] || 0;
+        if (old) old[j] = (old[j] || 0) + item;
+        else old = [item]
+      }
+      return old;
+    } else if (!value.indexOf) {
+      for (var prop in value) {
+        var item = value[prop] || 0;
+        if (!old) old = {}
+        old[prop] = (old[prop] || 0) + item;
+      }
+      return old;
+    }
+  }  
+  return value;
+}
+
+var Accumulate = LSD.Layer.accumulated = new FastArray('translate', 'radius');
+var Inherit = LSD.Layer.inherited = new FastArray('inside', 'outside')
+var Merge = LSD.Layer.merged = new FastArray('size')
+
+var Property = SheetParser.Property;
+var Styles = LSD.Styles;
+var Map = LSD.Layer.Map = {};
+var Cache = LSD.Layer.Cache = {};
+
+//LSD.Layer.getProperty = function(property, properties)
+ 
+LSD.Layer.generate = function(name, layers) {
+  if (arguments.length > 2) layers = Array.prototype.splice.call(arguments, 1);
+  var painters = [];
+  var styles = LSD.Layer.prepare(name, layers, function(painter) {
+    painters.push(painter)
+  })
+  return new LSD.Layer(name, styles, painters);
+};
+
+LSD.Layer.prepare = function(name, layers, callback) {
+  var properties = [], styles = {};
+  for (var i = 0, layer; layer = layers[i++];) {
+    var definition = LSD.Layer[layer.capitalize()];
+    if (!definition ) continue;
+    var properties = definition.properties && Object.clone(definition.properties);
+    if (!properties) continue;
+    definition = Object.append({styles: {}, keys: []}, definition);
+    var prefix = definition.prefix;
+    if (prefix === false || layer == name) prefix = name;
+    else if (!prefix) prefix = name + layer.capitalize();
+    var length = 0;
+    for (var property in properties) length++
+    var simple = (length == 1);
+    Object.each(properties, function(value, property) {
+      if (property == layer) {
+        if (simple) var style = prefix
+        else return;
+      } else var style = prefix + property.capitalize()
+      definition.styles[style] = styles[style] = Property.compile(value, properties);
+      definition.keys.push(style);
+    });
+    var shorthand = properties[layer];
+    if (shorthand && !simple) {
+      var style = (layer == name) ? name : name + layer.capitalize();
+      if (length) {
+        for (var j = 0, k = 0, l = 0, prop; prop = shorthand[j]; j++) {
+          if (!prop.push) { 
+            if (properties[prop]) {
+              shorthand[j] = prefix + prop.capitalize();
+              k++
+            }
+          } else for (var m = 0, sub; sub = prop[m]; m++) {
+            if (properties[sub]) {
+              prop[m] = prefix + sub.capitalize();
+              l++;
+            }
+          }
+        }
+      }
+      definition.styles[style] = styles[style] = Property.compile(((l > 0 && (k > 0 || j == 1)) ) ? [shorthand] : shorthand, styles);
+      definition.shorthand = style;
+    }
+    if (definition.onCompile) definition.onCompile(name);
+    if (callback) callback(definition);
+  }
+  for (var property in styles) {
+    Styles[property] = styles[property];
+    Map[property] = name;
+  }
+  return styles;
+}
+
+LSD.Layer.get = function(name) {
+  var key = name//Array.flatten(arguments).join('');
+  if (Cache[key]) return Cache[key];
+  else return (Cache[key] = LSD.Layer.generate.apply(LSD.Layer, arguments))
+}
+
+}();