123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507 |
- $axure.internal(function($ax) {
- $ax.adaptive = {};
- $axure.utils.makeBindable($ax.adaptive, ["viewChanged"]);
- var _auto = true;
- var _autoIsHandledBySidebar = false;
- var _views;
- var _idToView;
- var _enabledViews = [];
- var _initialViewToLoad;
- var _initialViewSizeToLoad;
- var _loadFinished = false;
- $ax.adaptive.loadFinished = function() {
- if(_loadFinished) return;
- _loadFinished = true;
- if($ax.adaptive.currentViewId) $ax.viewChangePageAndMasters();
- else $ax.postAdaptiveViewChanged();
- };
- var _handleResize = function(forceSwitchTo) {
- if(!_auto) return;
- if(_auto && _autoIsHandledBySidebar && !forceSwitchTo) return;
- var $window = $(window);
- var height = $window.height();
- var width = $window.width();
- var toView = _getAdaptiveView(width, height);
- var toViewId = toView && toView.id;
- _switchView(toViewId, forceSwitchTo);
- };
- var _setAuto = $ax.adaptive.setAuto = function(val) {
- if(_auto != val) {
- _auto = Boolean(val);
- }
- };
- var _setLineImage = function(id, imageUrl) {
- var imageQuery = $jobj(id).attr('src', imageUrl);
- if(imageUrl.indexOf(".png") > -1) $ax.utils.fixPng(imageQuery[0]);
- };
- var _switchView = function (viewId, forceSwitchTo) {
- if(!$ax.pageData.isAdaptiveEnabled) return;
- var previousViewId = $ax.adaptive.currentViewId;
- if(typeof previousViewId == 'undefined') previousViewId = '';
- if(typeof viewId == 'undefined') viewId = '';
- if (viewId == previousViewId) {
- if(forceSwitchTo) $ax.postAdaptiveViewChanged(forceSwitchTo);
- return;
- }
- $ax('*').each(function(obj, elementId) {
- if (!$ax.public.fn.IsTreeNodeObject(obj.type)) return;
- if(!obj.hasOwnProperty('isExpanded')) return;
- var query = $ax('#' + elementId);
- var defaultExpanded = obj.isExpanded;
- query.expanded(defaultExpanded);
- });
- // reset all the positioning on the style tags, including size and transformation
- $axure('*').each(function(diagramObject, elementId) {
- var element = document.getElementById(elementId);
- if(element && !diagramObject.isContained) {
- var resetCss = {
- top: "", left: "", width: "", height: "", opacity: "",
- transform: "", webkitTransform: "", MozTransform: "", msTransform: "", OTransform: ""
- };
- var query = $(element);
- var children = query.children();
- var sketchyImage = $('#' + $ax.repeater.applySuffixToElementId(elementId, '_image_sketch'));
- var textChildren = query.children('div.text');
- query.css(resetCss);
- if(children) children.css(resetCss);
- if(sketchyImage) sketchyImage.css(resetCss);
- if(textChildren) textChildren.css(resetCss);
- $ax.dynamicPanelManager.resetFixedPanel(diagramObject, element);
- $ax.dynamicPanelManager.resetAdaptivePercentPanel(diagramObject, element);
- }
- });
- $ax.adaptive.currentViewId = viewId; // we need to set this so the enabled and selected styles will apply properly
- if(previousViewId) {
- $ax.style.clearAdaptiveStyles();
- $('*').removeClass(previousViewId);
- } else {
- $ax.style.reselectElements();
- }
- $axure('*').each(function(obj, elementId) {
- $ax.style.updateElementIdImageStyle(elementId); // When image override exists, fix styling/borders
- });
- // reset all the images only if we're going back to the default view
- if(!viewId) {
- _updateInputVisibility('', $axure('*'));
- $axure('*').each(function(diagramObject, elementId) {
- $ax.placeholderManager.refreshPlaceholder(elementId);
- var images = diagramObject.images;
- if(diagramObject.type == 'horizontalLine' || diagramObject.type == 'verticalLine') {
- var startImg = images['start~'];
- _setLineImage(elementId + "_start", startImg);
- var endImg = images['end~'];
- _setLineImage(elementId + "_end", endImg);
- var lineImg = images['line~'];
- _setLineImage(elementId + "_line", lineImg);
- } else if(diagramObject.type == $ax.constants.CONNECTOR_TYPE) {
- _setAdaptiveConnectorImages(elementId, images, '');
- } else if(images) {
- if (diagramObject.generateCompound) {
- if($ax.style.IsWidgetDisabled(elementId)) {
- disabledImage = _getImageWithTag(images, 'disabled~');
- if(disabledImage) $ax.style.applyImage(elementId, disabledImage, 'disabled');
- return;
- }
- if($ax.style.IsWidgetSelected(elementId)) {
- selectedImage = _getImageWithTag(images, 'selected~');
- if(selectedImage) $ax.style.applyImage(elementId, selectedImage, 'selected');
- return;
- }
- $ax.style.applyImage(elementId, _getImageWithTag(images, 'normal~'));
- } else {
- if ($ax.style.IsWidgetDisabled(elementId)) {
- var disabledImage = $ax.style.getElementImageOverride(elementId, 'disabled') || images['disabled~'];
- if (disabledImage) $ax.style.applyImage(elementId, disabledImage, 'disabled');
- return;
- }
- if ($ax.style.IsWidgetSelected(elementId)) {
- var selectedImage = $ax.style.getElementImageOverride(elementId, 'selected') || images['selected~'];
- if (selectedImage) $ax.style.applyImage(elementId, selectedImage, 'selected');
- return;
- }
- $ax.style.applyImage(elementId, $ax.style.getElementImageOverride(elementId, 'normal') || images['normal~']);
- }
- }
- var child = $jobj(elementId).children('.text');
- if(child.length) $ax.style.transformTextWithVerticalAlignment(child[0].id, function() { });
- });
- // we have to reset visibility if we aren't applying a new view
- $ax.visibility.resetLimboAndHiddenToDefaults();
- $ax.repeater.refreshAllRepeaters();
- $ax.dynamicPanelManager.updateAllFitPanels();
- $ax.dynamicPanelManager.updatePercentPanelCache($ax('*'));
- } else {
- $ax.visibility.clearLimboAndHidden();
- _applyView(viewId);
- $ax.repeater.refreshAllRepeaters();
- }
- $ax.adaptive.triggerEvent('viewChanged', {});
- if(_loadFinished) $ax.viewChangePageAndMasters(forceSwitchTo);
- };
- var _getImageWithTag = function(image, tag) {
- var flattened = {};
- for (var component in image) {
- var componentImage = image[component][tag];
- if(componentImage) flattened[component] = componentImage;
- }
- return flattened;
- }
- // gets if input is hidden due to sketch
- var BORDER_WIDTH = "borderWidth";
- var COLOR_STYLE = "colorStyle";
- var SKETCH_FACTOR = "sketchFactor";
- var _areInputsHidden = function(viewId) {
- var chain = _getAdaptiveIdChain(viewId);
- var page = $ax.pageData.page;
- var adaptiveStyles = page.adaptiveStyles;
- // keep track of props that are not sketchy, as you continue to climb up your parents;
- var notSketch = [];
- for(var i = chain.length - 1; i >= -1; i--) {
- var style = i == -1 ? page.style : adaptiveStyles[chain[i]];
- if(notSketch.indexOf(BORDER_WIDTH) == -1 && style.hasOwnProperty(BORDER_WIDTH)) {
- if(style[BORDER_WIDTH] != 0) return true;
- notSketch.push(BORDER_WIDTH);
- }
- if(notSketch.indexOf(COLOR_STYLE) == -1 && style.hasOwnProperty(COLOR_STYLE)) {
- if(style[COLOR_STYLE] != 'appliedColor') return true;
- notSketch.push(COLOR_STYLE);
- }
- if(notSketch.indexOf(SKETCH_FACTOR) == -1 && style.hasOwnProperty(SKETCH_FACTOR)) {
- if(style[SKETCH_FACTOR] != 0) return true;
- notSketch.push(SKETCH_FACTOR);
- }
- }
- return false;
- };
- var _updateInputVisibility = function(viewId, query) {
- var func = _areInputsHidden(viewId) ? 'addClass' : 'removeClass';
- query.each(function(obj, elementId) {
- var input = $jobj($ax.repeater.applySuffixToElementId(elementId, '_input'));
- if(input.length == 0) return;
- input[func]('form_sketch');
- });
- };
- // gets the inheritance chain of a particular view.
- var _getAdaptiveIdChain = $ax.adaptive.getAdaptiveIdChain = function(viewId) {
- if(!viewId) return [];
- var view = _idToView[viewId];
- var chain = [];
- var current = view;
- while(current) {
- chain[chain.length] = current.id;
- current = _idToView[current.baseViewId];
- }
- return chain.reverse();
- };
- var _getPageStyle = $ax.adaptive.getPageStyle = function() {
- var currentViewId = $ax.adaptive.currentViewId;
- var adaptiveChain = _getAdaptiveIdChain(currentViewId);
- var currentStyle = $.extend({}, $ax.pageData.page.style);
- for(var i = 0; i < adaptiveChain.length; i++) {
- var viewId = adaptiveChain[i];
- $.extend(currentStyle, $ax.pageData.page.adaptiveStyles[viewId]);
- }
- return currentStyle;
- };
- var _setAdaptiveLineImages = function(elementId, images, viewIdChain) {
- for(var i = viewIdChain.length - 1; i >= 0; i--) {
- var viewId = viewIdChain[i];
- var startImg = images['start~' + viewId];
- if(startImg) {
- _setLineImage(elementId + "_start", startImg);
- var endImg = images['end~' + viewId];
- _setLineImage(elementId + "_end", endImg);
- var lineImg = images['line~' + viewId];
- _setLineImage(elementId + "_line", lineImg);
- break;
- }
- }
- };
- var _setAdaptiveConnectorImages = function (elementId, images, view) {
- var conn = $jobj(elementId);
- var count = conn.children().length-1; // -1 for rich text panel
- for(var i = 0; i < count; i++) {
- var img = images['' + i + '~' + view];
- $jobj(elementId + '_seg' + i).attr('src', img);
- }
- };
- var _applyView = $ax.adaptive.applyView = function(viewId, query) {
- var limboIds = {};
- var hiddenIds = {};
- var jquery;
- if(query) {
- jquery = query.jQuery();
- jquery = jquery.add(jquery.find('*'));
- var jqueryAnn = $ax.annotation.jQueryAnn(query);
- jquery = jquery.add(jqueryAnn);
- } else {
- jquery = $('*');
- query = $ax('*');
- }
- jquery.addClass(viewId);
- _updateInputVisibility(viewId, query);
- var viewIdChain = _getAdaptiveIdChain(viewId);
- // this could be made more efficient by computing it only once per object
- query.each(function(diagramObject, elementId) {
- _applyAdaptiveViewOnObject(diagramObject, elementId, viewIdChain, viewId, limboIds, hiddenIds);
- });
- $ax.visibility.addLimboAndHiddenIds(limboIds, hiddenIds, query);
- $ax.dynamicPanelManager.updateAllFitPanels();
- $ax.dynamicPanelManager.updatePercentPanelCache(query);
- };
- var _applyAdaptiveViewOnObject = function(diagramObject, elementId, viewIdChain, viewId, limboIds, hiddenIds) {
- var adaptiveChain = [];
- for(var i = 0; i < viewIdChain.length; i++) {
- var viewId = viewIdChain[i];
- var viewStyle = diagramObject.adaptiveStyles[viewId];
- if(viewStyle) {
- adaptiveChain[adaptiveChain.length] = viewStyle;
- if (viewStyle.size) $ax.public.fn.convertToSingleImage($jobj(elementId));
- }
- }
- var state = $ax.style.generateState(elementId);
- // set the image
- var images = diagramObject.images;
- if(images) {
- if(diagramObject.type == 'horizontalLine' || diagramObject.type == 'verticalLine') {
- _setAdaptiveLineImages(elementId, images, viewIdChain);
- } else if (diagramObject.type == $ax.constants.CONNECTOR_TYPE) {
- _setAdaptiveConnectorImages(elementId, images, viewId);
- } else if (diagramObject.generateCompound) {
- var compoundUrl = _matchImageCompound(diagramObject, elementId, viewIdChain, state);
- if (compoundUrl) $ax.style.applyImage(elementId, compoundUrl, state);
- }else {
- var imgUrl = _matchImage(elementId, images, viewIdChain, state);
- if(imgUrl) $ax.style.applyImage(elementId, imgUrl, state);
- }
- // for(var i = viewIdChain.length - 1; i >= 0; i--) {
- // var viewId = viewIdChain[i];
- // var imgUrl = $ax.style.getElementImageOverride(elementId, state) || images[state + '~' + viewId] || images['normal~' + viewId];
- // if(imgUrl) {
- // $ax.style.applyImage(elementId, imgUrl, state);
- // break;
- // }
- // }
- // }
- }
- // addaptive override style (not including default style props)
- var adaptiveStyle = $ax.style.computeAllOverrides(elementId, undefined, state, viewId);
- // this style INCLUDES the object's my style
- var compoundStyle = $.extend({}, diagramObject.style, adaptiveStyle);
- //$ax.style.setAdaptiveStyle(elementId, adaptiveStyle);
- if(!diagramObject.isContained) {
- $ax.style.setAdaptiveStyle(elementId, adaptiveStyle);
- }
- var scriptId = $ax.repeater.getScriptIdFromElementId(elementId);
- if(compoundStyle.limbo && !diagramObject.isContained) limboIds[scriptId] = true;
- // sigh, javascript. we need the === here because undefined means not overriden
- if(compoundStyle.visible === false) hiddenIds[scriptId] = true;
- };
- var _matchImage = function(id, images, viewIdChain, state) {
- var override = $ax.style.getElementImageOverride(id, state);
- if(override) return override;
- if(!images) return undefined;
- // first check all the images for this state
- for(var i = viewIdChain.length - 1; i >= 0; i--) {
- var viewId = viewIdChain[i];
- var img = images[state + "~" + viewId];
- if(img) return img;
- }
- // check for the default state style
- var defaultStateImage = images[state + '~'];
- if(defaultStateImage) return defaultStateImage;
- state = $ax.style.progessState(state);
- if(state) return _matchImage(id, images, viewIdChain, state);
- // SHOULD NOT REACH HERE! NORMAL SHOULD ALWAYS CATCH AT THE DEFAULT!
- return images['normal~']; // this is the default
- };
- var _matchImageCompound = function(diagramObject, id, viewIdChain, state) {
- var images = [];
- for(var i = 0; i < diagramObject.compoundChildren.length; i++) {
- var component = diagramObject.compoundChildren[i];
- images[component] = _matchImage(id, diagramObject.images[component], viewIdChain, state);
- }
- return images;
- };
- $ax.adaptive.getImageForStateAndView = function(id, state) {
- var viewIdChain = _getAdaptiveIdChain($ax.adaptive.currentViewId);
- var diagramObject = $ax.getObjectFromElementId(id);
- if (diagramObject.generateCompound) return _matchImageCompound(diagramObject, id, viewIdChain, state);
- else return _matchImage(id, diagramObject.images, viewIdChain, state);
- };
- var _getAdaptiveView = function(winWidth, winHeight) {
- var _isViewOneGreaterThanTwo = function(view1, view2) {
- return view1.size.width > view2.size.width || (view1.size.width == view2.size.width && view1.size.height > view2.size.height);
- };
- var _isViewOneLessThanTwo = function(view1, view2) {
- var width2 = view2.size.width || 1000000; // artificially large number
- var height2 = view2.size.height || 1000000;
- var width1 = view1.size.width || 1000000;
- var height1 = view1.size.height || 1000000;
- return width1 < width2 || (width1 == width2 && height1 < height2);
- };
- var _isWindowGreaterThanView = function(view, width, height) {
- return width >= view.size.width && height >= view.size.height;
- };
- var _isWindowLessThanView = function(view1, width, height) {
- var viewWidth = view1.size.width || 1000000;
- var viewHeight = view1.size.height || 1000000;
- return width <= viewWidth && height <= viewHeight;
- };
- var greater = undefined;
- var less = undefined;
- for(var i = 0; i < _enabledViews.length; i++) {
- var view = _enabledViews[i];
- if(view.condition == ">=") {
- if(_isWindowGreaterThanView(view, winWidth, winHeight)) {
- if(!greater || _isViewOneGreaterThanTwo(view, greater)) greater = view;
- }
- } else {
- if(_isWindowLessThanView(view, winWidth, winHeight)) {
- if(!less || _isViewOneLessThanTwo(view, less)) less = view;
- }
- }
- }
- return less || greater;
- };
- var _isAdaptiveInitialized = function() {
- return typeof _idToView != 'undefined';
- };
- $ax.messageCenter.addMessageListener(function(message, data) {
- //If the adaptive plugin hasn't been initialized yet then
- //save the view to load so that it can get set when initialize occurs
- if(message == 'switchAdaptiveView') {
- var href = window.location.href.split('#')[0];
- var lastSlash = href.lastIndexOf('/');
- href = href.substring(lastSlash + 1);
- if(href != data.src) return;
- var view = data.view == 'auto' ? undefined : (data.view == 'default' ? '' : data.view);
- if(!_isAdaptiveInitialized()) {
- _initialViewToLoad = view;
- } else _handleLoadViewId(view);
- } else if(message == 'setAdaptiveViewForSize') {
- _autoIsHandledBySidebar = true;
- if(!_isAdaptiveInitialized()) {
- _initialViewSizeToLoad = data;
- } else _handleSetViewForSize(data.width, data.height);
- }
- });
- $ax.adaptive.setAdaptiveView = function(view) {
- var viewIdForSitemapToUnderstand = view == 'auto' ? undefined : (view == 'default' ? '' : view);
- if(!_isAdaptiveInitialized()) {
- _initialViewToLoad = viewIdForSitemapToUnderstand;
- } else _handleLoadViewId(viewIdForSitemapToUnderstand);
- };
- $ax.adaptive.initialize = function() {
- _views = $ax.document.adaptiveViews;
- _idToView = {};
- if(_views && _views.length > 0) {
- for(var i = 0; i < _views.length; i++) {
- var view = _views[i];
- _idToView[view.id] = view;
- }
- var enabledViewIds = $ax.document.configuration.enabledViewIds;
- for(var i = 0; i < enabledViewIds.length; i++) {
- _enabledViews[_enabledViews.length] = _idToView[enabledViewIds[i]];
- }
- if(_autoIsHandledBySidebar && _initialViewSizeToLoad) _handleSetViewForSize(_initialViewSizeToLoad.width, _initialViewSizeToLoad.height);
- else _handleLoadViewId(_initialViewToLoad);
- }
- $axure.resize(function(e) {
- _handleResize();
- $ax.postResize(e); //window resize fires after view changed
- });
- };
- var _handleLoadViewId = function (loadViewId, forceSwitchTo) {
- if(typeof loadViewId != 'undefined') {
- _setAuto(false);
- _switchView(loadViewId != 'default' ? loadViewId : '', forceSwitchTo);
- } else {
- _setAuto(true);
- _handleResize(forceSwitchTo);
- }
- };
- var _handleSetViewForSize = function (width, height) {
- if(!_auto) return;
- var toView = _getAdaptiveView(width, height);
- var toViewId = toView && toView.id;
- _switchView(toViewId);
- };
- });
|