MooTools1.4 source code analysis-Fx. CSS

This article has referred to the source code analysis of Mootools1.2 of my Buddha Mountain. CSS/* --- name: Fx. CSSdescription: ContainstheCSSanimationlogic. usedbyFx. tween, Fx. morph, Fx. elements. license: MIT-stylel...

This article has referred to the source code analysis of Mootools1.2 by my Buddha Mountain.
 
/*
---
 
Name: Fx. CSS
 
Description: Contains the CSS animation logic. Used by Fx. Tween, Fx. Morph, Fx. Elements.
 
License: MIT-style license.
 
Requires: [Fx, Element. Style]
 
Provides: Fx. CSS
 
Source code analysis: bitter Bitter Gourd (http://hmking.blog.51cto.com)
 
...
*/
 
/**
* @ Fx. CSS: The base class of the CSS-related animation. The animation here mainly changes the effect from the starting value to the ending value.
**/
Fx. CSS = new Class ({
 
// Inherit from Fx
Extends: Fx,
 
// Prepares the base from/to object
/**
* @ Method: prepare
* @ Param element-(object) element object used by the special effect
* @ Param property-(string) CSS attribute
* @ Param values-(mixed) an array containing the start value and end value or a single value (end value)
* @ Returns: (object)-number of objects containing the from and to key values
* @ Description: pre-processing of the animation start and end values
* @ Notes: At this time, the values of the from and to keys are of the array type.
**/
Prepare: function (element, property, values ){
// Array the variable values, because values may pass a single value or an array
Values = Array. from (values );
// Get the start value and end value of the special effect. If only one value is passed, the current value is used as the end value. The current value of the CSS attribute is the starting value of the special effect.
If (values [1] = null ){
Values [1] = values [0];
Values [0] = element. getStyle (property );
}
// Explain the items in the array using the parse Method
Var parsed = values. map (this. parse );
// Returns the object literal of the from and to key values.
Return {from: parsed [0], to: parsed [1]};
},
 
// Parses a value into an array
/**
* @ Method: parse
* @ Param value-(mixed) CSS Attribute value
* @ Returns: (array)-the array item value is the object literal that contains two key values: value and parser. It stores the interpreted CSS attribute values and the interpreter that contains the attribute values.
* @ Description: parses a CSS property value into an array.
**/
Parse: function (value ){
// Use the lambad expression to convert the value into a function before execution. The advantage is that the passed value can be a function or a fixed value.
Value = Function. from (value )();
// Array. If it is a string type, use spaces to separate it into arrays.
Value = (typeof value = 'string ')? Value. split (''): Array. from (value );
// Process arrays one by one
Return value. map (function (val ){
// Convert to character type
Val = String (val );
Var found = false;
Object. each (Fx. CSS. Parsers, function (parser, key ){
// When the first item is false, continue to execute the following statement. After finding the appropriate interpreter, found judges that it is no longer false to avoid repeated explanations.
If (found) {return ;}
// Try to use the interpreter to explain the value
Var parsed = parser. parse (val );
// If the interpreter is successfully interpreted, record the interpreted value and the interpreter used (because the interpreter's compute and serve methods are also used)
If (parsed | parsed = 0 ){
Found = {
Value: parsed,
Parser: parser
};
}
});
// The interpreter of the string value is used by default.
Found = found | {
Value: val,
Parser: Fx. CSS. Parsers. String
};
Return found;
});
},
 
// Computes by a from and to prepared objects, using their parsers.
/**
* @ Method: compute
* @ Param from-(array) indicates the array of the starting value of the CSS attribute.
* @ Param to-(array) refers to the array of the ending value of the CSS attribute explained
* @ Param delta-(mixed) proportional factor required for special effect changes
* @ Returns: (array) an array containing information about the current CSS attribute values of the calculated special effect
* @ Description: calculates the target value based on the initial value, end value, and proportional factor.
**/
Compute: function (from, to, delta ){
Var computed = [];
// Retrieve a few smaller traversal items
(Math. min (from. length, to. length). times (function (I ){
// Return the calculated value and the interpreter used
Computed. push ({
Value: from [I]. parser. compute (from [I]. value, to [I]. value, delta ),
Parser: from [I]. parser
});
});
// Provide precise type values for typeOf
Computed. $ family = Function. from ('fx: css: value ');
Return computed;
},
 
// Serves the value as settable
/**
* @ Method: serve
* @ Param value-(mixed) CSS attribute target value. This parameter can be an interpreted array of CSS attribute values or a CSS attribute value.
* @ Param unit-(the default value of string is false) the unit of measurement (for example, 'px ', 'em', or '% ').
* @ Returns: (array) an array containing information about the current CSS attribute values of the calculated special effect
* @ Description: perform final packaging on the computed CSS attribute value array object so that it can be applied to the Element. setStyle method.
**/
Serve: function (value, unit ){
// If the value is not explained, it must be explained first (for example, the set method is called separately)
If (typeOf (value )! = 'Fx: css: value '){
Value = this. parse (value );
}
Var returned = [];
Value. each (function (bit ){
// Obtain the final usage value
Returned = returned. concat (bit. parser. serve (bit. value, unit ));
});
Return returned;
},
 
// Renders the change to an element
// Because the class itself has a class with CSS, the calculated array is finally reflected to the corresponding CSS attribute of the element through setStyle.
Render: function (element, property, value, unit ){
Element. setStyle (property, this. serve (value, unit ));
},
 
// Searches inside the page css to find the values for a selector
// Find the style settings of the specified selector from the style on the current page
Search: function (selector ){
// Simulate the cache. First, find the corresponding key value from the temporary object to improve efficiency.
If (Fx. CSS. Cache [selector]) {return Fx. CSS. Cache [selector];}
Var to = {},
SelectorTest = new RegExp ('^' + selector. escapeRegExp () + '$ ');
// Traverse the style sheet of the current page
Array. each (document. styleSheets, function (sheet, j ){
Var href = sheet. href;
// Ignore cross-domain external chain Style Sheets
If (href & href. contains ('://')&&! Href. contains (document. domain )){
Return;
}
// Style rule set
Var rules = sheet. rules | sheet.css Rules;
// Traverse each rule
Array. each (rules, function (rule, I ){
If (! Rule. style) {return ;}
// Select character (the type selection character is converted to lower case)
Var selectorText = (rule. selectorText )? Rule. selectorText. replace (/^ \ w +/, function (m ){
Return m. toLowerCase ();
}): Null;
// Match the specified style Selector
If (! SelectorText |! SelectorTest. test (selectorText) {return ;}
// Style Value Analysis
Object. each (Element. Styles, function (value, style ){
// No value
If (! Rule. style [style] | Element. styles [style]) {return ;}
// Convert to a string
Value = String (rule. style [style]);
// Color value processing
To [style] = (/^ rgb/). test (value ))? Value. rgbToHex (): value;
});
});
});
// Cache
Return Fx. CSS. Cache [selector] =;
}
 
});
 
Fx. CSS. Cache = {};
 
// # Region-interpreter-
 
// Several value-type interpreters in CSS. Each interpreter must implement three interfaces: parse, compute, and serve.
Fx. CSS. Parsers = {
 
// Explain the color
Color :{
 
Parse: function (value ){
// If it is a hexadecimal color representation, it is processed as an RGB array.
If (value. match (/^ # [0-9a-f] {3, 6} $/I )){
Return value. hexToRgb (true );
}
// If the color of RGB is displayed, the regular expression matches the RGB array. If the color does not match, flase is returned, so that the engine can call other interpreters to explain the problem.
Return (value = value. match (/(\ d +), \ s * (\ d +), \ s * (\ d + )/)))? [Value [1], value [2], value [3]: false;
},
 
Compute: function (from, to, delta ){
// Calculate the target values for R, G, and B respectively.
Return from. map (function (value, I ){
// You can see that the static compute method is still used
Return Math. round (Fx. compute (from [I], to [I], delta ));
});
},
 
Serve: function (value ){
// Convert R, G, and B to numeric type
Return value. map (Number );
}
 
},
 
// Interpretation of numerical values
Number :{
 
// Convert to floating point
Parse: parseFloat,
 
// Same as the algorithm in Fx
Compute: Fx. compute,
 
Serve: function (value, unit ){
// Add Unit, such as px and pt
Return (unit )? Value + unit: value;
}
 
},
 
// Interpretation of Character Types
String :{
 
// The Interpreter returns false, which is equivalent to parse: function () {return false ;}
Parse: Function. from (false ),
 
// 2nd parameters are returned when the compute method is executed
Compute: function (zero, one ){
Return one;
},
 
// 1st parameters are returned when the serve method is executed.
Serve: function (zero ){
Return zero;
}
 
}
 
};
 
// # Endregion
Author: Bitter Melon"