madrobby (owner)

Revisions

gist: 86957 Download_button fork
public
Public Clone URL: git://gist.github.com/86957.git
Embed All Files: show embed
Text only #
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
s2.css = {
  PROPERTY_MAP: {
    backgroundColor: 'color',
    borderBottomColor: 'color',
    borderBottomWidth: 'length',
    borderLeftColor: 'color',
    borderLeftWidth: 'length',
    borderRightColor: 'color',
    borderRightWidth: 'length',
    borderSpacing: 'length',
    borderTopColor: 'color',
    borderTopWidth: 'length',
    bottom: 'length',
    color: 'color',
    fontSize: 'length',
    fontWeight: 'integer',
    height: 'length',
    left: 'length',
    letterSpacing: 'length',
    lineHeight: 'length',
    marginBottom: 'length',
    marginLeft: 'length',
    marginRight: 'length',
    marginTop: 'length',
    maxHeight: 'length',
    maxWidth: 'length',
    minHeight: 'length',
    minWidth: 'length',
    opacity: 'number',
    outlineColor: 'color',
    outlineOffset: 'length',
    outlineWidth: 'length',
    paddingBottom: 'length',
    paddingLeft: 'length',
    paddingRight: 'length',
    paddingTop: 'length',
    right: 'length',
    textIndent: 'length',
    top: 'length',
    width: 'length',
    wordSpacing: 'length',
    zIndex: 'integer',
    zoom: 'number'
  },
    
  LENGTH: /^(([\+\-]?[0-9\.]+)(em|ex|px|in|cm|mm|pt|pc|\%))|0$/,
  NUMBER: /([\+-]*\d+\.?\d*)/,
 
  __parseStyleElement: document.createElement('div'),
  parseStyle: function(styleString) {
    s2.css.__parseStyleElement.innerHTML = '<div style="' + styleString + '"></div>';
    var style = s2.css.__parseStyleElement.childNodes[0].style, styleRules = {};
 
    s2.css.NUMERIC_PROPERTIES.each( function(property){
      if (style[property]) styleRules[property] = style[property];
    });
 
    s2.css.COLOR_PROPERTIES.each( function(property){
      if (style[property]) styleRules[property] = s2.css.colorFromString(style[property]);
    });
    
    if (Prototype.Browser.IE && styleString.include('opacity'))
      styleRules.opacity = styleString.match(/opacity:\s*((?:0|1)?(?:\.\d*)?)/)[1];
 
    return styleRules;
  },
 
  normalizeColor: function(color) {
    if (!color || ['rgba(0, 0, 0, 0)','transparent'].include(color)) color = '#ffffff';
    color = s2.css.colorFromString(color);
    return [0,1,2].map(function(i){ return parseInt(color.slice(i*2+1,i*2+3), 16) });
  },
  
  colorFromString: function(color) {
    var value = '#', cols, i;
    if (color.slice(0,4) == 'rgb(') {
      cols = color.slice(4,color.length-1).split(',');
      i=0; do { value += parseInt(cols[i]).toColorPart() } while (++i<3);
    } else {
      if (color.slice(0,1) == '#') {
        if (color.length==4) for(i=1;i<4;i++) value += (color.charAt(i) + color.charAt(i)).toLowerCase();
        if (color.length==7) value = color.toLowerCase();
      }
    }
    return (value.length==7 ? value : (arguments[1] || value));
  },
  
  interpolateColor: function(from, to, position){
    from = s2.css.normalizeColor(from);
    to = s2.css.normalizeColor(to);
    
    return '#' + [0,1,2].map(function(index){
      return Math.max(Math.min(from[index].tween(to[index], position).round(), 255), 0).toColorPart();
    }).join('');
  },
  
  interpolateNumber: function(from, to, position){
    return (from||0).tween(to, position);
  },
 
  interpolateLength: function(from, to, position){
    if(!from) from = '0'+to.gsub(s2.css.NUMBER,'');
    to.scan(s2.css.NUMBER, function(match){ to = parseFloat(match[1]); });
    return from.gsub(s2.css.NUMBER, function(match){
      return parseFloat(match[1]).tween(to, position).toString();
    });
  },
  
  interpolatePercentage: function(from, to, position){
    return s2.css.interpolateLength(from, to, position);
  },
  
  interpolateInteger: function(from, to, position){
    return from.tween(to, position).round();
  },
  
  interpolate: function(property, from, to, position){
    return s2.css['interpolate'+s2.css.PROPERTY_MAP[property.camelize()].capitalize()](from, to, position);
  },
 
  ElementMethods: {
    getStyles: function(element) {
      var css = document.defaultView.getComputedStyle($(element), null);
      return s2.css.PROPERTIES.inject({ }, function(styles, property) {
        styles[property] = css[property];
        return styles;
      });
    }
  }
};
 
s2.css.PROPERTIES = [];
for(property in s2.css.PROPERTY_MAP) s2.css.PROPERTIES.push(property);
 
s2.css.NUMERIC_PROPERTIES = s2.css.PROPERTIES.findAll(function(property){ return !property.endsWith('olor') });
s2.css.COLOR_PROPERTIES = s2.css.PROPERTIES.findAll(function(property){ return property.endsWith('olor') });
 
if (!(document.defaultView && document.defaultView.getComputedStyle)) {
  s2.css.ElementMethods.getStyles = function(element) {
    element = $(element);
    var css = element.currentStyle, styles;
    styles = s2.css.PROPERTIES.inject({ }, function(hash, property) {
      hash[property] = css[property];
      return hash;
    });
    if (!styles.opacity) styles.opacity = element.getOpacity();
    return styles;
  };
};
 
Element.addMethods(s2.css.ElementMethods);