chameleon_js.php

很棒的在线教学系统

                }
                imp = '';

            } else if (prop == 'border-width' || prop == 'border-style' || prop == 'border-color') {
                var p = prop.split('-').pop();
                var num = bits.length;
                if (num == 1) {
                    css[selector]['border-top-' + p] = bits[0];
                    css[selector]['border-right-' + p] = bits[0];
                    css[selector]['border-bottom-' + p] = bits[0];
                    css[selector]['border-left-' + p] = bits[0];
                } else if (num == 2) {
                    css[selector]['border-top-' + p] = bits[0];
                    css[selector]['border-right-' + p] = bits[1];
                    css[selector]['border-bottom-' + p] = bits[0];
                    css[selector]['border-left-' + p] = bits[1];
                } else if (num == 3) {
                    css[selector]['border-top-' + p] = bits[0];
                    css[selector]['border-right-' + p] = bits[1];
                    css[selector]['border-bottom-' + p] = bits[2];
                    css[selector]['border-left-' + p] = bits[1];
                } else if (num == 4) {
                    css[selector]['border-top-' + p] = bits[0];
                    css[selector]['border-right-' + p] = bits[1];
                    css[selector]['border-bottom-' + p] = bits[2];
                    css[selector]['border-left-' + p] = bits[3];
                }
            }

            if (imp != '') {
                var sides = ['top', 'right', 'bottom', 'left'];
                for (var i = 0; i < 4; ++i) {
                    for (var j in props) {
                        if (p != '' && p != j) {
                            continue;
                        }

                        if (css[selector]['border-' + sides[i] + '-' + j]) {
                            css[selector]['border-' + sides[i] + '-' + j] += imp;
                        }
                    }
                }
            }
            
        },
        
        
        
        
        setBackground: function(css, selector, value) {
            var imp = (value.indexOf('!important') != -1) ? ' !important' : '';
            if (imp != '') {
                value = value.replace(/ *\!important */g, '');
            }
            
            var urlPos = value.indexOf('url(');
            if (urlPos == -1 && value.indexOf('none') == -1) {
                css[selector]['background-color'] = value + imp;
                return;
            } else if (urlPos == -1 && value.indexOf(' none') != -1) {
                var bits = value.split(' ');
                css[selector]['background-color'] = bits[0] + imp;
                css[selector]['background-image'] = bits[1] + imp;
                return;
            } else if (value == 'none') {
                css[selector]['background-image'] = value + imp;
                return;
            }
            var bits = value.split('url(');
            var endImg = bits[1].indexOf(')');
            if (endImg == -1) {
                return;
            }
            css[selector]['background-image'] = 'url(' + bits[1].substr(0, endImg).replace(/["']+/g, '') + ')' + imp; //"
            
            var pos = [];
            
            var bgOptions =  bits[1].substring(endImg + 1).split(' ');
            var n = bgOptions.length;
            
            for (var i = 0; i < n; ++i) {
                var opt = bgOptions[i].trim();
                if (opt.indexOf('repeat') != -1) {
                    css[selector]['background-repeat'] = opt + imp;
                } else if (opt == 'fixed' || opt == 'scroll') {
                    css[selector]['background-attachment'] = opt + imp;
                } else if (opt != '') {
                    pos.push(opt);
                }
            }
            if (pos.length == 2) {
                css[selector]['background-position'] = pos.join(' ') + imp;
            }
            var col = bits[0].trim();
            if (col != '') {
                css[selector]['background-color'] = col + imp;
            }
        },
        
        setFont: function(css, selector, value, noreset) {
            var imp = (value.indexOf('!important') != -1) ? ' !important' : '';
            if (imp != '') {
                value = value.replace(/ *\!important */g, '');
            }
            
            var order = ['font-style', 'font-variant', 'font-weight', 'font-size', 'font-family'];
            var numProps = order.length;
            var allowedVals = {};
            allowedVals['font-style'] = /(normal|italic|oblique|inherit)/;
            allowedVals['font-variant'] = /(normal|small\-caps|inherit)/;
            allowedVals['font-weight'] = /(normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900|inherit)/;
            allowedVals['font-size'] = /([^ ]+)/;
            allowedVals['font-family'] = /(.+$)/;
            
            if (!noreset['font-style']) css[selector]['font-style'] = 'normal';
            if (!noreset['font-variant']) css[selector]['font-variant'] = 'normal';
            if (!noreset['font-weight']) css[selector]['font-weight'] = 'normal';
            if (!noreset['font-size']) css[selector]['font-size'] = 'medium';
            if (!noreset['line-height']) css[selector]['line-height'] = 'normal';
            
            var expandShorthand = function(bits) {
                var numBits = bits.length;
                var startProp = 0;
                for (var i = 0; i < numBits; ++i) {
                    if (i > numProps - 1) {
                        return;
                    }
                    for (var j = startProp; j < numProps; ++j) {
                        if (bits[i].match(allowedVals[order[j]])) {
                            if (order[j] == 'font-size' && bits[i].indexOf('/') != -1) {
                                var fsLh = bits[i].split('/');
                                css[selector]['font-size'] = fsLh[0] + imp;
                                css[selector]['line-height'] = fsLh[1] + imp;
                            } else {
                                css[selector][order[j]] = bits[i] + imp;
                            }
                            startProp = j + 1;
                            break;
                        }
                    }
                }
            };
            
            var removeCommaListSpaces = function(str) {
                var comma = str.indexOf(',');
                if (comma != -1) {
                    return str.substr(0, comma) + str.substring(comma).replace(/ +/g, '');
                }
                return str;
            };
            
            var hasQuote = value.match(/(["'])/); //"
            if (hasQuote) {
                var tmp = value.split(hasQuote[1]);
                var bits = removeCommaListSpaces(tmp.shift()).split(' ');
                var startFont = bits.pop();
                
                expandShorthand(bits);
                
                css[selector]['font-family'] = startFont + hasQuote[1] + tmp.join(hasQuote[1]) + imp;           
            } else {
                value = removeCommaListSpaces(value);            
                expandShorthand(value.split(' '));
            }
        },
        
        
        

        __allPropsEqual: function(props) {
            var num = props.length - 1;
            if (num < 3) return false;
            
            for (var i = 0; i < num; ++i) {
                if (props[i].value != props[i + 1].value) {
                    return false;
                }
            }
            return true;
        }
    };
    
    
    
    CSS.FreeEdit = {
      
        __initial: {},
        
        setInitial: function(e) {
            var target = e.target || e.srcElement;

            CSS.FreeEdit.__initial = CSS.toObject(target.value);
        },
        
        saveComplete: function(e) {
            var target = e.target || e.srcElement;
            target.value = CSS.FreeEdit.__stripComments(target.value);

            CSS.__localCSS = CSS.__merge(CSS.__localCSS, CSS.toObject(target.value));

            CSS.__localSaveRequired = true;
            CSS.__remoteSaveRequired = true;

            CSS.preview();
        },
        
        saveSelector: function(e) {
            var target = e.target || e.srcElement;
            target.value = CSS.FreeEdit.__stripComments(target.value);
            
            var changedSelectors = [];
            var css = CSS.toObject(target.value);
            for (var sel in css) {
                changedSelectors.push(sel);
                if (!CSS.__localCSS[sel]) {
                    CSS.__localCSS[sel] = {};
                }
                for (var prop in css[sel]) {
                    CSS.__localCSS[sel][prop] = css[sel][prop];
                }
            }

            for (var sel in CSS.FreeEdit.__initial) {
                if (!css[sel] && CSS.__localCSS[sel]) {
                    changedSelectors.push(sel);
                    CSS.__localCSS[sel] = null;
                    delete CSS.__localCSS[sel];
                    continue;
                }
                for (var prop in CSS.FreeEdit.__initial[sel]) {
                    if (!css[sel][prop] && CSS.__localCSS[sel][prop]) {
                        CSS.__localCSS[sel][prop] = null;
                        delete CSS.__localCSS[sel][prop];
                    }
                }
            }
            
            CSS.__localSaveRequired = true;
            CSS.__remoteSaveRequired = true;
            CSS.preview(changedSelectors);
        },
        
        __stripComments: function(str) {
            return str.replace(/\/\*([\s\S])*?\*\//g, '');
        }
        
    };
    
    
    
    
    
    
    var FileHandler = {
        
        getFiles: function(path) {
            if (!path) path = '';
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4) {
                    UI.CSS.displayImagePicker(xmlhttp.responseXML);
                    xmlhttp = null;
                }
            };
            xmlhttp.open('GET', Config.REMOTE_URI  + '&path=' + escape(path) + '&nc=' + new Date().getTime(), true);
            xmlhttp.send(null);
            return true;
        }
    };
    
    
    
    
    
    var UI = {
        boxes: [],
        boxOffsetX: 35,
        boxOffsetY: 30,
        zIndex: 9999,

        __dragTargetId: null,

        statusMsg: function(msg, cls) {
            UI.clearStatusMsg();
            
            var target = UI.__getBox();
            if (!target) {
                var box = Util.createElement('div', 'chameleon-status-msg');
                box.appendChild(document.createTextNode(msg));
                box.style.zIndex = ++UI.zIndex;
                UI.addToDoc(box);
            } else {
         
                var statusTable = Util.createElement('table', 'chameleon-status-msg');
                var statusTableBody = Util.createElement('tbody');
                var statusRow = Util.createElement('tr');
                var statusIconCell = Util.createElement('td');
                var statusMsgCell = Util.createElement('td');
                var statusBtnCell = Util.createElement('td');
                
                if (cls) {
                    statusIconCell.className = cls;
                }
                statusMsgCell.appendChild(document.createTextNode(msg));
                statusBtnCell.appendChild(UI.createButton('chameleon-status-msg-btn', 'OK', 'Clear this message', UI.clearStatusMsg));
                
                statusRow.appendChild(statusIconCell);
                statusRow.appendChild(statusMsgCell);
                statusRow.appendChild(statusBtnCell);
                statusTableBody.appendChild(statusRow);
                statusTable.appendChild(statusTableBody);
                
                target.appendChild(statusTable);
            }
        },

        clearStatusMsg: function() {
            var obj = document.getElementById('chameleon-status-msg');
            if (obj) {
                Util.removeElement(obj);
            }
        },

        addToDoc: function(content) {
            document.getElementsByTagName('body')[0].appendChild(content);
        },

        makeDraggableBox: function(id, x, y) {
            if ((x + 500) > screen.width) {
                var offset = x + 525 - screen.width;
                x -= offset;
            }
            
            var box = Util.createElement('div', id);
            box.style.left = x + 'px';
            box.style.top = y + 'px';
            box.style.zIndex = ++UI.zIndex;

            var topBar = Util.createElement('div', id + '-handle');
            var closeBtn = Util.createElement('div', id + '-close');
            closeBtn.appendChild(document.createTextNode('x'));
            closeBtn.setAttribute('title', 'Close');
            topBar.setAttribute('title', 'Drag me!');