chameleon_js.php

很棒的在线教学系统

            UI.__dragTargetId = id + '-handle';

            Util.addEvent(closeBtn, 'click', UI.closeBoxes);
            Util.addEvent(topBar, 'mousedown', UI.__startDrag);
            Util.addEvent(topBar, 'mousedown', UI.__bringToFront);
            Util.addEvent(topBar, 'mouseup', UI.__stopDrag);

            topBar.appendChild(closeBtn);
            box.appendChild(topBar);
   
            UI.boxes.push(id);

            return box;
        },
        
        closeAllBoxes: function() {
            var n = UI.boxes.length;
            while (n--) {
                Util.removeElement(document.getElementById(UI.boxes[n]));
                UI.boxes.splice(n, 1);
            }
            UI.__dragTargetId = null;
        },

        closeBoxes: function(e, box) {
            if (!box) {
                var target = e.target || e.srcElement;
                var box = target.parentNode.parentNode;
            }
                        
            var n = UI.boxes.length;
            while (n--) {
                if (UI.boxes[n] == box.id) {
                    break;
                }
                Util.removeElement(document.getElementById(UI.boxes[n]));
                UI.boxes.splice(n, 1);
            }
            Util.removeElement(box);
            UI.boxes.splice(n, 1);
            UI.__dragTargetId = (UI.boxes.length) ? UI.boxes[UI.boxes.length - 1] + '-handle' : null;
        },

        __startDrag: function(e) {
            var target = e.target || e.srcElement;
            var mouseCoords = Pos.getMouse(e);
            var elementCoords = Pos.getElement(target);
            target.mouseX = mouseCoords.x - elementCoords.x;
            target.mouseY = mouseCoords.y - elementCoords.y;    

            UI.__dragTargetId = target.id;

            Util.addEvent(document, 'mousemove', UI.__drag);
        },

        __stopDrag: function(e) {
            Util.removeEvent(document, 'mousemove', UI.__drag);
        },

        __drag: function(e) {
            var target = document.getElementById(UI.__dragTargetId);

            var mouseCoords = Pos.getMouse(e);
            target.parentNode.style.left = (mouseCoords.x - target.mouseX) + 'px';
            target.parentNode.style.top = (mouseCoords.y - target.mouseY) + 'px';
            
            if (e.preventDefault) {
                e.preventDefault();
            } else if (window.event) {
                window.event.returnValue = false;
            }
        },

        __bringToFront: function(e) {
            var target = e.target || e.srcElement;
            target.parentNode.style.zIndex = ++UI.zIndex;
        },
        
        __getBox: function() {
            var obj = document.getElementById(UI.__dragTargetId);
            if (obj && obj.parentNode) {
                return obj.parentNode;
            }
            return false;
        },
        
        
        
        
        setupPane: function(tabs, parentId, tabId, active) {
            for (var i = 0; i < tabs.length; ++i) {
                var obj = document.getElementById(tabId + '-tab-' + tabs[i]);
                if (obj) {
                    obj.className = tabId + ((active == tabs[i]) ? '-tab-active' : '-tab');
                }
            }

            var parent = document.getElementById(parentId);
            if (parent && parent.firstChild) {
                Util.removeElement(parent.firstChild);
            }
            return parent;
        },
        
        setupButtons: function() {
            var parentId = arguments[0];
            var parent = document.getElementById(parentId);
            if (!parent) return;

            var btns = parent.getElementsByTagName('input');
            for (var i = 0; i < btns.length; ++i) {
                btns[i].style.display = 'none';
            }

            for (var i = 1; i < arguments.length; ++i) {
                var id = parentId + '-' + arguments[i];
                var btn = document.getElementById(id);
                if (btn) {
                    btn.style.display = 'inline';
                }
            }
        },
        
        createButton: function(id, value, title, fn, hidden) {
            var btn = Util.createElement('input', id);
            btn.setAttribute('type', 'submit');
            btn.setAttribute('value', value);
            btn.setAttribute('title', title);
            btn.className = 'chameleon-btn';
            if (hidden) {
                btn.style.display = 'none';
            }

            Util.addEvent(btn, 'click', fn);
            return btn;
        },

        setOverflow: function(obj, height, forced) {
            if (obj.offsetHeight > height || forced) {
                obj.style.height = height + 'px';
                obj.style.overflow = 'scroll';
            }
        }
    };
    
    
    UI.Selector = {
        controlsId: 'chameleon-selector-controls',
        viewedProp: null,
        displayPropWatch: false,
        sections: ['choose', 'overview', 'free-edit'],
        
        
        editWindow: function(e) {
            if (!e.shiftKey) {
                return;
            }

            var target = e.target || e.srcElement;
            var tmpStruct = climbTree(target);
            if (typeof tmpStruct == 'string') {
                return;
            }
            
            hotspotMode = false;

            var box = document.getElementById('chameleon-selector-box');
            if (box) UI.closeBoxes(true, box);

            struct = tmpStruct;
            CSS.Selector.reset();

            var coords = Pos.getMouse(e);
            var box = UI.makeDraggableBox('chameleon-selector-box', coords.x, coords.y);


            var instructions = Util.createElement('p');
            instructions.appendChild(document.createTextNode('Create a CSS selector to edit, browse an overview of your edited styles or edit your complete stylesheet by hand.'));
            instructions.className = 'chameleon-instructions';
            box.appendChild(instructions);

            var tabsContainer = Util.createElement('table', 'chameleon-selector-tabs');
            var tabsBody = Util.createElement('tbody');
            var tabs = Util.createElement('tr');
 
            tabs.appendChild(UI.Selector.__createTab('Choose', UI.Selector.__editSelector, true, 'Choose'));
            tabs.appendChild(UI.Selector.__createTab('Overview', UI.Selector.__displayOverview, false, 'Overview'));
            tabs.appendChild(UI.Selector.__createTab('Free Edit', UI.Selector.__editCode, false, 'Free Edit'));

            tabsBody.appendChild(tabs);
            tabsContainer.appendChild(tabsBody);

            box.appendChild(tabsContainer);

            var styleControls = Util.createElement('div', UI.Selector.controlsId);
            box.appendChild(styleControls);
            box.appendChild(UI.Selector.__addButtons());

            UI.addToDoc(box);

            UI.Selector.__editSelector();
            
            if (e.preventDefault) {
                e.preventDefault();
            } else if (window.event) {
                window.event.returnValue = false;
            }
        },
        
       
        __listProps: function(e) {
             var target = e.target || e.srcElement;
             
             Util.removeElement(document.getElementById('chameleon-selector-element-list'));
             UI.Selector.viewedProp = target.options[target.selectedIndex].value;
             if (!document.getElementById('chameleon-selector-list')) {
                 target.parentNode.parentNode.appendChild(UI.Selector.__elementList(target.options[target.selectedIndex].value));
             } else {
                 target.parentNode.parentNode.insertBefore(UI.Selector.__elementList(target.options[target.selectedIndex].value), document.getElementById('chameleon-selector-list'));
             }
        },
        
        __editSelector: function() {
            var parent = UI.setupPane(UI.Selector.sections, UI.Selector.controlsId, 'chameleon-selector', 'choose');
            UI.setupButtons('chameleon-selector-buttons', 'edit', 'check');

            var container = Util.createElement('div');

            var instructions = Util.createElement('p');
            instructions.appendChild(document.createTextNode('Please choose the element you wish to style.'));
            container.appendChild(instructions);
            
            var options = Util.createElement('p');
            
            if (UI.Selector.__displayPropWatch) {
                            
                var selectProp = Util.createElement('select', 'chameleon-selector-prop-select');
                var optionProp = Util.createElement('option');
                optionProp.appendChild(document.createTextNode('Select a CSS property to view'));
                optionProp.setAttribute('value', '');
                selectProp.appendChild(optionProp);
            
                for (var i = 0; i < Config.PROPS_LIST.length; ++i) {
                    optionProp = Util.createElement('option');
                    optionProp.setAttribute('value', Config.PROPS_LIST[i]);
                    if (UI.Selector.viewedProp == Config.PROPS_LIST[i]) {
                        optionProp.setAttribute('selected', 'selected');
                    }
                    optionProp.appendChild(document.createTextNode(Config.PROPS_LIST[i]));
                    selectProp.appendChild(optionProp); 
                }
            
                Util.addEvent(selectProp, 'change', UI.Selector.__listProps);
            
                options.appendChild(selectProp);
 
            }
            
            var togglePropWatch = Util.createElement('a');
            togglePropWatch.setAttribute('title', 'The property inspector allows you to check the current value of a range of CSS properties for these elements');
            togglePropWatch.appendChild(document.createTextNode(' (' + (UI.Selector.__displayPropWatch ? 'Hide property inspector' : 'Show property inspector') + ')'));
            Util.addEvent(togglePropWatch, 'click', UI.Selector.__togglePropWatch);
            options.appendChild(togglePropWatch);
            
            
            container.appendChild(options);
            
            container.appendChild(UI.Selector.__elementList());

            parent.appendChild(container);

            UI.Selector.displaySelector(CSS.Selector.trimmed);
        },
        
        __togglePropWatch: function() {
            UI.Selector.__displayPropWatch = !UI.Selector.__displayPropWatch;
            UI.Selector.__editSelector();
        },
        
        __displayOverview: function(e, selectors, selector) {
            var parent = UI.setupPane(UI.Selector.sections, UI.Selector.controlsId, 'chameleon-selector', 'overview');
            UI.setupButtons('chameleon-selector-buttons');
            
            var container = Util.createElement('div', 'chameleon-style-overview-container');
            parent.appendChild(container); // doing it this way is much faster than creating the table then applying the overflow
            UI.setOverflow(container, 350, true);
            
            var overviewTable = Util.createElement('table', 'chameleon-style-overview');
            var overviewTableBody = Util.createElement('tbody');
            
            if (!selectors) {

                for (var sel in CSS.__localCSS) {
                    var overviewTableRow = Util.createElement('tr');
                
                    var overviewTableCell = Util.createElement('th');
                    overviewTableCell.className = 'selector';
                    overviewTableCell.appendChild(document.createTextNode(sel));
                    overviewTableRow.appendChild(overviewTableCell);
                    overviewTableCell = Util.createElement('td');

                    var overviewEditLink = Util.createElement('a');
                    overviewEditLink.value = sel;
                    overviewEditLink.appendChild(document.createTextNode('[edit]'));
                    Util.addEvent(overviewEditLink, 'click', UI.CSS.launchEditWindow);
                    overviewTableCell.className = 'selector';
                    overviewTableCell.appendChild(overviewEditLink);

                    overviewTableRow.appendChild(overviewTableCell);
                    overviewTableBody.appendChild(overviewTableRow);
                    for (var prop in CSS.__localCSS[sel]) {
                        overviewTableRow = Util.createElement('tr');
                        overviewTableCell = Util.createElement('td');
                        overviewTableCell.className = 'prop';
                        overviewTableCell.appendChild(document.createTextNode(prop));
                        overviewTableRow.appendChild(overviewTableCell);
                        overviewTableCell = Util.createElement('td');
                        overviewTableCell.className = 'value';
                        overviewTableCell.appendChild(document.createTextNode(CSS.__localCSS[sel][prop]));
                        overviewTableRow.appendChild(overviewTableCell);
                        overviewTableBody.appendChild(overviewTableRow);
                    }
                }
            } else {
            
                var n = selectors.length;
                
                if (!CSS.__localCSS[selector]) {
                    var overviewTableRow = Util.createElement('tr');
                
                    var overviewTableCell = Util.createElement('th');
                    overviewTableCell.className = 'current-selector';
                    overviewTableCell.appendChild(document.createTextNode(selector));
                    overviewTableRow.appendChild(overviewTableCell);
                    overviewTableCell = Util.createElement('td');

                    var overviewEditLink = Util.createElement('a');
                    overviewEditLink.value = selector;
                    overviewEditLink.appendChild(document.createTextNode('[edit]'));
                    Util.addE