server/document/需求/原型/20171017_机考数据管理中心原型设计（HTML）/resources/scripts/axure/visibility.js

$axure.internal(function($ax) {
    var document = window.document;
    var _visibility = {};
    $ax.visibility = _visibility;

    var _defaultHidden = {};
    var _defaultLimbo = {};

    // ******************  Visibility and State Functions ****************** //

    var _isIdVisible = $ax.visibility.IsIdVisible = function(id) {
        return $ax.visibility.IsVisible(window.document.getElementById(id));
    };

    $ax.visibility.IsVisible = function(element) {
        //cannot use css('visibility') because that gets the effective visiblity
        //e.g. won't be able to set visibility on panels inside hidden panels
        return element.style.visibility != 'hidden';
    };

    $ax.visibility.SetIdVisible = function(id, visible) {
        $ax.visibility.SetVisible(window.document.getElementById(id), visible);
        // Hide lightbox if necessary
        if(!visible) {
            $jobj($ax.repeater.applySuffixToElementId(id, '_lightbox')).remove();
            $ax.flyoutManager.unregisterPanel(id, true);
        }
    };

    $ax.visibility.SetVisible = function(element, visible) {
        //todo -- ahhhh! I really don't want to add this, I don't know why it is necessary (right now sliding panel state out then in then out breaks
        //and doesn't go hidden on the second out if we do not set display here.
        element.style.display = visible ? '' : 'none';
        element.style.visibility = visible ? 'visible' : 'hidden';
    };

    var _setWidgetVisibility = $ax.visibility.SetWidgetVisibility = function(elementId, options) {
        // If limboed, just fire the next action then leave.
        if(_limboIds[elementId]) {
            $ax.action.fireAnimationFromQueue(elementId);
            return;
        }

        var parentId = $jobj(elementId).parent().attr('id');
        _setVisibility(parentId, elementId, options);

        //set the visibility of the annotation box as well if it exists
        var ann = document.getElementById(elementId + "_ann");
        if(ann) _visibility.SetVisible(ann, options.value);

        //set ref visibility for ref of flow shape, if that exists
        var ref = document.getElementById(elementId + '_ref');
        if(ref) _visibility.SetVisible(ref, options.value);
    };

    var _setVisibility = function(parentId, childId, options) {
        var widget = $jobj(childId);

        var visible = $ax.visibility.IsIdVisible(childId);

        if(visible == options.value) {
            $ax.action.fireAnimationFromQueue(childId);
            return;
        }

        var child = $jobj(childId);
        var parent = parentId ? $jobj(parentId) : child.parent();

        var needContainer = options.easing && options.easing != 'none';
        var cullPosition = options.cull ? options.cull.css('position') : '';

        if(needContainer) {
            var fixedInfo = $ax.dynamicPanelManager.getFixedInfo(childId);
            var containerId = childId + '_container';
            var container = _makeContainer(containerId, options.cull || child, fixedInfo);
            container.insertBefore(child);
            child.appendTo(container);

            if(!options.settingChild) {
                child.css({
                    position: 'absolute',
                    left: 0,
                    top: 0,
                    'margin-left': 0,
                    'margin-top': 0
                });
            }
        }

        var onComplete = function() {
            if(needContainer) {
                var css = {};
                if(fixedInfo.fixed) {
                    css.position = 'fixed';

                    if(fixedInfo.horizontal == 'left') css.left = fixedInfo.x;
                    else if(fixedInfo.horizontal == 'center') {
                        css.left = '50%';
                        css['margin-left'] = fixedInfo.x;
                    } else if(fixedInfo.horizontal == 'right') {
                        css.left = 'auto';
                        css.right = fixedInfo.x;
                    }

                    if(fixedInfo.vertical == 'top') css.top = fixedInfo.y;
                    else if(fixedInfo.vertical == 'middle') {
                        css.top = '50%';
                        css['margin-top'] = fixedInfo.y;
                    } else if(fixedInfo.vertical == 'bottom') {
                        css.top = 'auto';
                        css.bottom = fixedInfo.y;
                    }
                } else {
                    css.top = Number(container.css('top').replace('px', '')) || 0;
                    css.left = Number(container.css('left').replace('px', '')) || 0;
                }

                child.insertBefore(container);
                container.remove();
                child.css(css);

                if(options.cull) options.cull.css('position', cullPosition);
            }
            options.onComplete && options.onComplete();
            if(options.fire) {
                $ax.event.raiseSyntheticEvent(childId, options.value ? 'onShow' : 'onHide');
                $ax.action.fireAnimationFromQueue(childId);
            }
        };

        var size = options.size || (needContainer ? child : parent);
        if(!options.easing || options.easing == 'none') {
            $ax.visibility.SetIdVisible(childId, options.value);
            onComplete();
        } else if(options.easing == 'fade') {
            if(options.value) {
                // Can't use $ax.visibility.SetIdVisible, because we only want to set visible, we don't want to display, fadeIn will handle that.
                widget.css('visibility', 'visible');
                widget.fadeIn(options.duration, onComplete);
            } else {
                // Fading here is being retarded...
                widget.animate({ opacity: 0 }, options.duration, 'swing', function() {
                    $ax.visibility.SetIdVisible(childId, false);
                    widget.css('opacity', '');

                    onComplete();
                });
            }
        } else {
            if(options.value) {
                _slideStateIn(childId, childId, options.easing, options.direction, options.duration, size, false, onComplete);
            } else {
                var top = child.css('top');
                var left = child.css('left');

                var onOutComplete = function() {
                    $ax.visibility.SetIdVisible(childId, false);
                    child.css('top', top);
                    child.css('left', left);

                    onComplete();
                };
                _slideStateOut(size, childId, options.easing, options.direction, options.duration, onOutComplete);
            }
        }



        // If showing, go through all rich text objects inside you, and try to redo alignment of them
        if(options.value) {
            var descendants = $jobj(childId).find('*');
            for(var i = 0; i < descendants.length; i++) {
                var decendantId = descendants[i].id;
                // This check is probably redundant? UpdateTextAlignment should ignore any text objects that haven't set the vAlign yet.
                if($ax.getTypeFromElementId(decendantId) != 'richTextPanel') continue;
                $ax.style.updateTextAlignmentForVisibility(decendantId);
            }
        }
    };

    $ax.visibility.GetPanelState = function(id) {
        var children = $jobj(id).children();
        for(var i = 0; i < children.length; i++) {
            if(children[i].style && $ax.visibility.IsVisible(children[i])) return children[i].id;
        }
        return '';
    };


    $ax.visibility.SetPanelState = function(id, stateId, easingOut, directionOut, durationOut, easingIn, directionIn, durationIn, showWhenSet) {
        var show = !$ax.visibility.IsIdVisible(id) && showWhenSet;
        if(show) $ax.visibility.SetIdVisible(id, true);

        // Exit here if already at desired state.
        if($ax.visibility.IsIdVisible(stateId)) {
            if(show) $ax.event.raiseSyntheticEvent(id, 'onShow');
            $ax.action.fireAnimationFromQueue(id);
            return;
        }

        var state = $jobj(stateId);
        var oldStateId = $ax.visibility.GetPanelState(id);
        var oldState = $jobj(oldStateId);
        $ax.dynamicPanelManager.adjustFixed(id, oldState.width(), oldState.height(), state.width(), state.height());

        _bringPanelStateToFront(id, oldStateId);

        var fitToContent = $ax.dynamicPanelManager.isIdFitToContent(id);
        var resized = false;
        if(fitToContent) {
            // Set resized
            resized = state.width() != oldState.width() || state.height() != oldState.height();
        }

        var movement = (directionOut == 'left' || directionOut == 'up' || state.children().length == 0) && oldState.children().length != 0 ? oldState : state;
        var onCompleteCount = 0;

        var onComplete = function() {
            $ax.dynamicPanelManager.fitParentPanel(id);
            $ax.dynamicPanelManager.updatePanelPercentWidth(id);
            $ax.dynamicPanelManager.updatePanelContentPercentWidth(id);
            $ax.action.fireAnimationFromQueue(id);
            $ax.event.raiseSyntheticEvent(id, "onPanelStateChange");
            $ax.event.leavingState(oldStateId);
        };
        // Must do state out first, so if we cull by new state, location is correct
        _setVisibility(id, oldStateId, {
            value: false,
            easing: easingOut,
            direction: directionOut,
            duration: durationOut,
            onComplete: function() { _bringPanelStateToFront(id, stateId); if(++onCompleteCount == 2) onComplete(); },
            settingChild: true,
            size: movement,
            cull: easingOut == 'none' || state.children().length == 0 ? oldState : state
        });

        _setVisibility(id, stateId, {
            value: true,
            easing: easingIn,
            direction: directionIn,
            duration: durationIn,
            onComplete: function() { if(++onCompleteCount == 2) onComplete(); },
            settingChild: true,
            size: movement
        });

        if(show) $ax.event.raiseSyntheticEvent(id, 'onShow');
        if(resized) $ax.event.raiseSyntheticEvent(id, 'onResize');
    };

    var _makeContainer = function(containerId, rect, fixedInfo) {
        var container = $('<div></div>');
        container.attr('id', containerId);
        var css = {
            position: 'absolute',
            width: rect.width(),
            height: rect.height(),
            overflow: 'hidden'
        };

        // todo: **mas** make sure tihs is ok
        if(fixedInfo.fixed) {
            css.position = 'fixed';

            if(fixedInfo.horizontal == 'left') css.left = fixedInfo.x;
            else if(fixedInfo.horizontal == 'center') {
                css.left = '50%';
                css['margin-left'] = fixedInfo.x;
            } else if(fixedInfo.horizontal = 'right') {
                css.left = 'auto';
                css.right = fixedInfo.x;
            }

            if(fixedInfo.vertical == 'top') css.top = fixedInfo.y;
            else if(fixedInfo.vertical == 'middle') {
                css.top = '50%';
                css['margin-top'] = fixedInfo.y;
            } else if(fixedInfo.vertical == 'bottom') {
                css.top = 'auto';
                css.bottom = fixedInfo.y;
            }
        } else {
            css.left = Number(rect.css('left').replace('px', '')) || 0;
            css.top = Number(rect.css('top').replace('px', '')) || 0;
        }

        container.css(css);
        return container;
    };

    var _slideStateOut = function(container, stateId, easingOut, directionOut, durationOut, onComplete) {
        var width = container.width();
        var height = container.height();

        if(directionOut == "right") {
            $ax.move.MoveWidget(stateId, width, 0, easingOut, durationOut, false, onComplete);
        } else if(directionOut == "left") {
            $ax.move.MoveWidget(stateId, -width, 0, easingOut, durationOut, false, onComplete);
        } else if(directionOut == "up") {
            $ax.move.MoveWidget(stateId, 0, -height, easingOut, durationOut, false, onComplete);
        } else if(directionOut == "down") {
            $ax.move.MoveWidget(stateId, 0, height, easingOut, durationOut, false, onComplete);
        }
    };

    var _slideStateIn = function(id, stateId, easingIn, directionIn, durationIn, container, makePanelVisible, onComplete) {
        var width = container.width();
        var height = container.height();

        var state = $jobj(stateId);

        var oldTop = 0;
        var oldLeft = 0;

        if(directionIn == "right") {
            state.css('left', oldLeft - width + 'px');
        } else if(directionIn == "left") {
            state.css('left', oldLeft + width + 'px');
        } else if(directionIn == "up") {
            state.css('top', oldTop + height + 'px');
        } else if(directionIn == "down") {
            state.css('top', oldTop - height + 'px');
        }

        if(makePanelVisible) $ax.visibility.SetIdVisible(id, true);
        $ax.visibility.SetIdVisible(stateId, true);

        if(directionIn == "right") {
            $ax.move.MoveWidget(stateId, width, 0, easingIn, durationIn, false, onComplete);
        } else if(directionIn == "left") {
            $ax.move.MoveWidget(stateId, -width, 0, easingIn, durationIn, false, onComplete);
        } else if(directionIn == "up") {
            $ax.move.MoveWidget(stateId, 0, -height, easingIn, durationIn, false, onComplete);
        } else if(directionIn == "down") {
            $ax.move.MoveWidget(stateId, 0, height, easingIn, durationIn, false, onComplete);
        }
    };

    $ax.visibility.GetPanelStateId = function(dpId, index) {
        var itemNum = $ax.repeater.getItemIdFromElementId(dpId);
        var panelStateId = $ax.repeater.getScriptIdFromElementId(dpId) + '_state' + index;
        return $ax.repeater.createElementId(panelStateId, itemNum);
    };

    var _bringPanelStateToFront = function(dpId, stateid) {
        $('#' + stateid).appendTo($('#' + dpId));
    };

    var _limboIds = _visibility.limboIds = {};
    // limboId's is a dictionary of id->true, essentially a set.
    var _addLimboAndHiddenIds = $ax.visibility.addLimboAndHiddenIds = function(newLimboIds, newHiddenIds, query) {
        var limboedByMaster = {};
        for(var key in newLimboIds) {
            if($ax.getObjectFromElementId(key).type != 'referenceDiagramObject') continue;
            var ids = $ax.model.idsInRdo(key);
            for(var i = 0; i < ids.length; i++) limboedByMaster[ids[i]] = true;
        }

        var hiddenByMaster = {};
        for(key in newHiddenIds) {
            if($ax.getObjectFromElementId(key).type != 'referenceDiagramObject') continue;
            ids = $ax.model.idsInRdo(key);
            for(i = 0; i < ids.length; i++) hiddenByMaster[ids[i]] = true;
        }

        // Extend with children of rdos
        newLimboIds = $.extend(newLimboIds, limboedByMaster);
        newHiddenIds = $.extend(newHiddenIds, hiddenByMaster);

        // something is only visible if it's not hidden and limboed

        //if(!skipSetting) {
        query.each(function(diagramObject, elementId) {
            // Rdos already handled, contained widgets are limboed by the parent, and sub menus should be ignored
            if(diagramObject.type == 'referenceDiagramObject' || diagramObject.type == 'tableCell' || diagramObject.isContained || $jobj(elementId).hasClass('sub_menu')) return;
            if(diagramObject.type == 'table' && $jobj(elementId).parent().hasClass('ax_menu')) return;
            var shouldBeVisible = Boolean(!newLimboIds[elementId] && !newHiddenIds[elementId]);
            var isVisible = Boolean(_isIdVisible(elementId));
            if(shouldBeVisible != isVisible) {
                _setWidgetVisibility(elementId, { value: shouldBeVisible });
            }
        });
        //}

        _limboIds = _visibility.limboIds = $.extend(_limboIds, newLimboIds);

    };

    var _clearLimboAndHidden = $ax.visibility.clearLimboAndHidden = function(ids) {
        _limboIds = _visibility.limboIds = {};
    };

    $ax.visibility.clearLimboAndHiddenIds = function(ids) {
        for(var i = 0; i < ids.length; i++) delete _limboIds[ids[i]];
    };

    $ax.visibility.resetLimboAndHiddenToDefaults = function() {
        _clearLimboAndHidden();
        _addLimboAndHiddenIds(_defaultLimbo, _defaultHidden, $ax('*'));
    };

    $ax.visibility.initialize = function() {
        // initialize initial visible states
        $axure('*').each(function(diagramObject, elementId) {
            // sigh, javascript. we need the === here because undefined means not overriden
            if(diagramObject.style.visible === false) _defaultHidden[elementId] = true;
            //todo: **mas** check if the limboed widgets are hidden by default by the generator
            if(diagramObject.style.limbo) _defaultLimbo[elementId] = true;
        });
        $ax.visibility.addLimboAndHiddenIds(_defaultLimbo, _defaultHidden, $ax('*'));

    };

});