sync.transitionpane.js

echo3 很炫的ajax框架技术 js 演示demo ajax j2ee 里面有jsp演示代码

/**
 * Synchronization peer for TransitionPane.
 */
Extras.Sync.TransitionPane = Core.extend(Echo.Render.ComponentSync, {

    $load: function() {
        Echo.Render.registerPeer("Extras.TransitionPane", this);
    },

    _containerDiv: null,
    contentDiv: null,
    type: null,
    _duration: null,
    _transition: null,
    _transitionClass: null,
    _runnable: null,
    
    /**
     * The element containing the old child element, which is being transitioned FROM.
     */
    oldChildDiv: null,
    
    /**
     * The element containing the current/new child element, which is being transitioned TO.
     */
    childDiv: null,
    
    /**
     * Flag indicating whether initial content has been loaded (no transition effect is used on the first load).
     */
    _initialContentLoaded: false,

    $construct: function() {
    },
    
    doImmediateTransition: function() {
        this.removeOldContent();
        if (this.childDiv) {
            this.showContent();
        }
    },

    _loadTransition: function() {
        this.type = this.component.render("type");
        switch (this.type) {
        case Extras.TransitionPane.TYPE_FADE:
            this._transitionClass = Extras.Sync.TransitionPane.FadeOpacityTransition;
            break;
        case Extras.TransitionPane.TYPE_FADE_TO_BLACK:
        case Extras.TransitionPane.TYPE_FADE_TO_WHITE:
            this._transitionClass = Extras.Sync.TransitionPane.FadeOpacityColorTransition;
            break;
        case Extras.TransitionPane.TYPE_CAMERA_PAN_DOWN:
        case Extras.TransitionPane.TYPE_CAMERA_PAN_LEFT:
        case Extras.TransitionPane.TYPE_CAMERA_PAN_RIGHT:
        case Extras.TransitionPane.TYPE_CAMERA_PAN_UP:
            this._transitionClass = Extras.Sync.TransitionPane.CameraPanTransition;
            break;
        case Extras.TransitionPane.TYPE_BLIND_BLACK_IN:
        case Extras.TransitionPane.TYPE_BLIND_BLACK_OUT:
            this._transitionClass = Extras.Sync.TransitionPane.BlindTransition;
            break;
        default:
            this._transitionClass = null;
            this._duration = null;
        }
    },
    
    /**
     * Removes old content: remove oldChildDiv from parent, set oldChildDiv to null.
     */
    removeOldContent: function() {
        if (this.oldChildDiv) {
            this.contentDiv.removeChild(this.oldChildDiv);
            this.oldChildDiv = null;
        }
    },

    _hideContent: function() {
        if (this.childDiv) {
            this.childDiv.style.visibility = "hidden";
        }
    },
    
    /**
     * Shows new content.
     */
    showContent: function() {
        if (this.childDiv) {
            this.childDiv.style.visibility = "visible";
        }
    },

    renderAdd: function(update, parentElement) {
        this._containerDiv = document.createElement("div");
        this._containerDiv.id = this.component.renderId;
        this._containerDiv.style.cssText = "position:absolute;overflow:auto;top:0;left:0;width:100%;height:100%;";
        
        this.contentDiv = document.createElement("div");
        this.contentDiv.style.cssText = "position:absolute;overflow:hidden;top:0;left:0;width:100%;height:100%;";
        this._containerDiv.appendChild(this.contentDiv);
        
        parentElement.appendChild(this._containerDiv);
        if (this.component.children.length > 0) {
            this._renderAddChild(update);
        }
    },
    
    _renderAddChild: function(update) {
        this._loadTransition();
        this.childDiv = document.createElement("div");
        this.childDiv.style.cssText = "position:absolute;top:0;left:0;width:100%;height:100%;";
        
        Echo.Render.renderComponentAdd(update, this.component.children[0], this.childDiv);
        
        if (this._initialContentLoaded) {
            this._hideContent();
            if (this._transitionClass) {
                this._transitionStart();
            } else {
                this.doImmediateTransition();
            }
        } else {
            this._initialContentLoaded = true;
        }

        this.contentDiv.appendChild(this.childDiv);
    },
    
    renderDispose: function(update) {
        this._initialContentLoaded = false;
        if (this._transition) {
            this._transition.abort();
        }
        this._childDiv = null;
        this.contentDiv = null;
        this._containerDiv = null;
    },

    renderUpdate: function(update) {
        var fullRender = false;
        if (update.hasUpdatedLayoutDataChildren()) {
            fullRender = true;
        } else if (update.hasUpdatedProperties()) {
            // Property updates
            var propertyNames = update.getUpdatedPropertyNames();
            if (!(propertyNames.length == 1 && propertyNames[0] == "type")) {
                // Properties other than 'type' have changed.
                fullRender = true;
            }
        }

        if (fullRender) {
            var contentDiv = this._containerDiv;
            var containerElement = contentDiv.parentNode;
            Echo.Render.renderComponentDispose(update, update.parent);
            containerElement.removeChild(contentDiv);
            this.renderAdd(update, containerElement);
        } else {
            if (this._transition) {
                this._transition.abort();
            }
        
            var removedChildren = update.getRemovedChildren();
            if (removedChildren) {
                // Remove children.
                this.oldChildDiv = this.childDiv;
                this.childDiv = null;
            }
            var addedChildren = update.getAddedChildren();
            if (update.parent.children > 1) {
                throw new Error("Cannot render more than one child in a TransitionPane.");
            }
            
            if (addedChildren) {
                // Add children.
                this._renderAddChild(update); 
            }
        }
        
        return fullRender;
    },
    
    _transitionStart: function() {
        this._transition = new this._transitionClass(this);
        this._transition.runTime = this.component.render("duration", this._transition.runTime);
        this._transition.start(Core.method(this, this._transitionFinish));
    },
    
    _transitionFinish: function(abort) {
        // Abort current transition, if necessary.
        if (this._transition) {
            this._transition = null;
            this.showContent();
        }
        
        // Remove content which was transitioned from.
        this.removeOldContent();
        
        // Refocus current focused component if it is within TransitionPane.
        if (this.component && this.component.application) {
            var focusedComponent = this.component.application.getFocusedComponent();
            if (focusedComponent != null && this.component.isAncestorOf(focusedComponent)) {
                Echo.Render.updateFocus(this.client);
            }
        }
    }
});

/**
 * Abstract base class for transition implementations.
 */
Extras.Sync.TransitionPane.Transition = Core.extend(Extras.Sync.Animation, {

    transitionPane: null,

    /**
     * Duration of the transition, in milliseconds.
     * This value should be overridden when a custom duration time is desired.
     * This value will automatically be overridden if the TransitionPane component
     * has its "duration" property set.
     * @type Number
     */
    runTime: 350,

    /**
     * Interval at which transition steps should be invoked, in milliseconds.