chameleon_js.php

很棒的在线教学系统

                        }
                    }
                }
                css = css.substring(end + 1);
            }
            return cssObj;
        },
        
        
        
        
        
        getSelectorCSS: function(selector, asObject) {
            if (!selector) var selector = CSS.Selector.get();

            var css = (CSS.__localCSS[selector]) ? CSS.__localCSS[selector] : {};
            if (asObject) {
                return css;
            }
            return selector + ' ' + CSS.__propsToString(css);
        },
        
        
        
        saveRequired: function() {
            return CSS.__localSaveRequired || CSS.__serverSaveRequired;
        },
        
        
        checkSpec: function(e, selector) {
            if (!selector) var selector = CSS.Selector.get();
            if (selector == '') {
                UI.statusMsg('First you have to choose which item to style!', 'chameleon-notice');
                return;
            }
            
            var splitSelector = function(selector) {
                var selectorEnd = selector.split(' ').pop();
                selectorEnd = selectorEnd.replace(/([\.:#])/g, '|$1');
                return selectorEnd.split('|');
            };
            
            var similar = [];
        
            var selectorBits = splitSelector(selector);
        
            for (var sel in CSS.__localCSS) {
                var selBits = splitSelector(sel);
        
                var n = selectorBits.length;
        
                while (n--) {
                    var match = selectorBits[n];
                    var m = selBits.length;
                    while (m--) {
                        if (selBits[m] == match) {
                            var l = similar.length;
                            var add = true;
                            while (l--) {
                                if (similar[l] == sel) {
                                    add = false;
                                    break;
                                }
                            }
                            if (add) {
                                similar.push(sel);
                            }
                            break;
                        }
                    }
                }
            }
            
            if (similar.length) {
                UI.Selector.__displayOverview(null, similar, selector);
            } else {
                UI.statusMsg('Your file currently contains no selectors that appear similar to "' + selector + '"', 'chameleon-notice');
            }  
        },
        
        
        unloadPrompt: function() {
            if (CSS.__localSaveRequired) {
                if (confirm('You have made changes to the CSS on this page since the last time it was saved, these changes will be lost unless you save them now. Select OK to save a temporary copy or Cancel to continue and discard the unsaved CSS.')) {
                    CSS.updateTemp();
                }
            }
            var cookieVal = (CSS.__remoteSaveRequired) ? 1 : 0;
            var crumb = new cookie('chameleon_server_save_required', cookieVal, 30, '/', null, null);
            crumb.set();
        }

    };
    
    
    
    CSS.Selector = {
        
        trimmed: [],
        full: [],
        selector: '',
        
        create: function() {
            CSS.Selector.trimmed = [];
 
            var n = struct.length;
            while (n--) {
                if (CSS.Selector.full[n]) {
                    CSS.Selector.trimmed.push(CSS.Selector.full[n].val);
                }
            }
            CSS.Selector.set(CSS.Selector.trimmed.join(' '));
        },
        
        modify: function(e) {
            var target = e.target || e.srcElement;
            var p = target.position;
            
            var sel = CSS.Selector.full;

            if (!sel[p]) {
                UI.Selector.highlight(target);
                sel[p] = {val: target.selectorValue, id: target.id};
            } else if (sel[p].val != target.selectorValue) {
                UI.Selector.highlight(target);
                UI.Selector.unhighlight(document.getElementById(sel[p].id));
                sel[p] = {val: target.selectorValue, id: target.id};
            } else {
                UI.Selector.unhighlight(target);
                sel[p] = null;
            }

            CSS.Selector.create();
            UI.Selector.displaySelector(CSS.Selector.trimmed);
        },
        
        set: function(sel) {
            CSS.Selector.selector = sel;
        },
        
        get: function() {
            return CSS.Selector.selector;  
        },

        reset: function() {
            CSS.Selector.trimmed = [];
            CSS.Selector.full = [];
            CSS.Selector.set('');
        }               
    };
    
    
    
    CSS.__Shorthand = {
        border: {},
        
        recordBorder: function(prop, value) {
            var pr = prop.split('-')
            var p = pr.pop();
            var s = pr.pop();
            if (!CSS.__Shorthand.border[p]) {
                CSS.__Shorthand.border[p] = [];
            }
            if (!CSS.__Shorthand.border[s]) {
                CSS.__Shorthand.border[s] = {};
            }
            if (!CSS.__Shorthand.border[s][p]) {
                CSS.__Shorthand.border[s][p] = [];
            }
            CSS.__Shorthand.border[p].push({prop: prop, value: value});
            CSS.__Shorthand.border[s][p] = value;
        },
        
        getBorderString: function(col) {
            var cb = CSS.__Shorthand.border;
            
            var useHowManyProps = function(prop) {
                if (!cb['top'] || !cb['right'] || !cb['bottom'] || !cb['left']) {
                    return false;
                }
                
                if (!(cb['top'][prop] && cb['right'][prop] && cb['bottom'][prop] && cb['left'][prop])) {
                    return false;
                }
                
                if (cb['top'][prop] == cb['right'][prop] && cb['top'][prop] == cb['bottom'][prop] && cb['top'][prop] == cb['left'][prop]) {
                    return 1;
                }
                if (cb['top'][prop] == cb['bottom'][prop] && cb['right'][prop] == cb['left'][prop]) {
                    return 2;
                }
                if (cb['right'][prop] == cb['left'][prop]) {
                    return 3;
                }
                return 4;
            };
            
            var getPropShorthand = function(prop) {
                var num = useHowManyProps(prop);
                if (!num) {
                    return '';
                }
                
                if (prop.indexOf('color') != -1) {
                    var l = inheritColor(cb['left'][prop]);
                    var r = inheritColor(cb['right'][prop]);
                    var t = inheritColor(cb['top'][prop]);
                    var b = inheritColor(cb['bottom'][prop]);
                } else {
                    var l = cb['left'][prop];
                    var r = cb['right'][prop];
                    var t = cb['top'][prop];
                    var b = cb['bottom'][prop];
                }
                
                var propShorthand = '';
                if (num == 1) {
                    propShorthand += '  border-' + prop + ': ' + l;
                } else if (num == 2) {
                    propShorthand += '  border-' + prop + ': ' + t + ' ' + l;
                } else if (num == 3) {
                    propShorthand += '  border-' + prop + ': ' + t + ' ' + l + ' ' + b;
                } else {
                    propShorthand += '  border-' + prop + ': ' + t + ' ' + r + ' ' + b + ' ' + l;
                }
                return propShorthand + ';\n';
            };
            
            var propsStr = function(props) {
                var str = '';
                for (var i = 0; i < props.length; ++i) {
                    str += '  ' + props[i].prop + ': ' + ((props[i].prop.indexOf('color') != -1) ? inheritColor(props[i].value) : props[i].value) + ';\n';
                }
                return str;
            };
            
            var inheritColor = function(val) {
                if (!col || val != 'inherit') return val;               
                return col;
            };
            
            var setImportant = function(str) {
                if (!str) return '';
                if (str.indexOf('!important') == -1) return str;
                str = str.replace(/ *\!important */g, ' ');
                return str.substr(0, str.lastIndexOf(';')) + ' !important;\n';
            };
                      
            var widthEqual = (cb['width']) ? CSS.__Shorthand.__allPropsEqual(cb['width']) : false;
            var styleEqual = (cb['style']) ? CSS.__Shorthand.__allPropsEqual(cb['style']) : false;
            var colorEqual = (cb['color']) ? CSS.__Shorthand.__allPropsEqual(cb['color']) : false;
                        
            if (widthEqual && styleEqual && colorEqual) {
                var propStr = setImportant(cb['width'][0].value + ' ' + cb['style'][0].value + ' ' + inheritColor(cb['color'][0].value) + ';\n');              
                if (cb['left'] && cb['top'] && cb['right'] && cb['bottom']) {
                    return '  border: ' + propStr;
                }
                
                var sideShorthand = '';
                if (cb['top']) {
                    sideShorthand += '  border-top: ' + propStr;
                }
                if (cb['right']) {
                    sideShorthand += '  border-right: ' + propStr;
                }
                if (cb['bottom']) {
                    sideShorthand += '  border-bottom: ' + propStr;
                }
                if (cb['left']) {
                    sideShorthand += '  border-left: ' + propStr;
                }
                return sideShorthand;
            }
            
            var widthProps = getPropShorthand('width');
            if (!widthProps) {
                widthProps = (cb['width']) ? propsStr(cb['width']) : '';
            }
            var styleProps = getPropShorthand('style');
            if (!styleProps) {
                styleProps = (cb['style']) ? propsStr(cb['style']) : '';
            }
            var colorProps = getPropShorthand('color');
            if (!colorProps) {
                colorProps = (cb['color']) ? propsStr(cb['color']) : '';
            }
            
            return setImportant(widthProps) + setImportant(styleProps) + setImportant(colorProps);

        },
        
        
        
        
        
        setBorder: function(css, selector, value, prop) {
            var props = {};
            var p = '';

            props['width'] = {
                regexp: /^(thin|medium|thick|0|(\d+(([^%\d]+)|%)))$/,
                def: 'medium'
            };
            props['style'] = {
                regexp: /none|dotted|dashed|solid|double|groove|ridge|inset|outset/,
                def: 'none'
            };
            props['color'] = {
                regexp: /^((rgb\(\d{1,3} *, *\d{1,3} *, *\d{1,3} *\))|(#[A-F0-9]{3}([A-F0-9]{3})?)|([a-z]+))$/i,
                def: 'inherit'
            };
            
            var bits = value.split(' ');
            var imp = (bits[bits.length - 1] == '!important') ? ' ' + bits.pop() : '';
                        
            if (prop == 'border') {
                for (var i in props) {
                    css[selector]['border-top-' + i] = props[i].def;
                    css[selector]['border-right-' + i] = props[i].def;
                    css[selector]['border-bottom-' + i] = props[i].def;
                    css[selector]['border-left-' + i] = props[i].def;
                    var j = bits.length;
                    while (j--) {
                        if (bits[j].match(props[i].regexp)) {
                            css[selector]['border-top-' + i] = bits[j];
                            css[selector]['border-right-' + i] = bits[j];
                            css[selector]['border-bottom-' + i] = bits[j];
                            css[selector]['border-left-' + i] = bits[j];
                            bits.splice(j, 1);
                            break;
                        }
                    }
                }
            } else if (prop == 'border-left' || prop == 'border-right' || prop == 'border-top' || prop == 'border-bottom') {
                for (var i in props) {
                    css[selector][prop + '-' + i] = props[i].def;
                    var j = bits.length;
                    while (j--) {
                        if (bits[j].match(props[i].regexp)) {
                            css[selector][prop + '-' + i] = bits[j] + imp;
                            bits.splice(j, 1);
                            break;
                        }
                    }