///////////////////////////////////////////////////////////////////////////
|
// Copyright © 2014 - 2018 Esri. All Rights Reserved.
|
//
|
// Licensed under the Apache License Version 2.0 (the "License");
|
// you may not use this file except in compliance with the License.
|
// You may obtain a copy of the License at
|
//
|
// http://www.apache.org/licenses/LICENSE-2.0
|
//
|
// Unless required by applicable law or agreed to in writing, software
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
// See the License for the specific language governing permissions and
|
// limitations under the License.
|
///////////////////////////////////////////////////////////////////////////
|
|
define(['dojo/_base/declare',
|
'dojo/_base/lang',
|
'dojo/_base/array',
|
'dijit/_WidgetBase',
|
'dojo/dom-construct',
|
'dojo/dom-geometry',
|
'dojo/dom-style',
|
'dojo/dom-class',
|
'dojo/on',
|
'dojo/Deferred',
|
'dojo/query',
|
'dojo/debounce',
|
'dojo/Evented',
|
'dojo/dnd/move',
|
'dojo/_base/fx',
|
'dojo/fx',
|
'dijit/_TemplatedMixin',
|
'dojo/text!./Panel.html'
|
],
|
function(declare, lang, array, _WidgetBase, domConstruct, domGeometry, domStyle, domClass,
|
on, Deferred, query, debounce, Evented, Move, baseFx, coreFx, _TemplatedMixin, template) {
|
var ANIMATION_DURATION = 300;
|
var PORTRAIT_MODE = 1, LANDSCAPE_MODE = 2;
|
var THRESHOLD = 150; // If swipe more than 150px, trigger the action.
|
var WIDGET_NORMAL = 0, WIDGET_MINIMIZED = 1, WIDGET_MAXIMIZED = 2;
|
var MAP_RATIO_PORTRAIT = 0.5, WIDGET_MIN_WIDTH = 320, SPLITTER_HEIGHT = 16;
|
|
return declare([_WidgetBase, _TemplatedMixin, Evented], {
|
baseClass: 'jimu-dnd-mobile-panel',
|
templateString: template,
|
mobileLayout: PORTRAIT_MODE,
|
layoutId: '',
|
mapId: '',
|
widgetIds: null,
|
panels: null,
|
currentIndex: 0,
|
leftPos: 0,
|
count: '',
|
title: '',
|
widgetMode: WIDGET_NORMAL,
|
layoutManager: null, // instance of GridLayoutManager
|
|
_moveStartX: 0,
|
_moveStartY: 0,
|
|
postCreate: function(){
|
this.inherited(arguments);
|
|
this.setMobileLayout(this.mobileLayout);
|
domConstruct.place(window.jimuConfig.mapId, this.mapNode);
|
|
this.own(on(this.previousArrow, 'click', lang.hitch(this, this._switchPrevious)));
|
this.own(on(this.nextArrow, 'click', lang.hitch(this, this._switchNext)));
|
|
this._initSplitter();
|
domStyle.set(this.footerNode, 'opacity', '0');
|
this.resize();
|
},
|
|
clearPanels: function() {
|
this.widgetIds = [];
|
this.panels = [];
|
domConstruct.empty(this.containerNode);
|
domStyle.set(this.containerNode, 'left', 0);
|
this.currentIndex = 0;
|
this._updateHeader(this.currentIndex - 1, this.currentIndex);
|
},
|
|
setPanels: function(widgetIds, panels) {
|
this.widgetIds = widgetIds;
|
this.panels = panels || {};
|
this.currentIndex = 0;
|
if (this.widgetIds.length <= 1) {
|
domStyle.set(this.previousArrow, 'display', 'none');
|
domStyle.set(this.nextArrow, 'display', 'none');
|
} else {
|
domStyle.set(this.previousArrow, 'display', 'block');
|
domStyle.set(this.nextArrow, 'display', 'block');
|
}
|
domStyle.set(this.footerNode, 'opacity', '0');
|
this._openPanel();
|
this._updateHeader(this.currentIndex - 1, this.currentIndex);
|
},
|
|
_resizeActivePanel: function() {
|
if (this.widgetIds && this.panels) {
|
var widgetId = this.widgetIds[this.currentIndex];
|
var activePanel = this.panels[widgetId];
|
if (activePanel && typeof activePanel.resize === 'function') {
|
activePanel.resize();
|
}
|
}
|
},
|
|
_openPanel: function() {
|
var widgetId = this.widgetIds[this.currentIndex];
|
var activePanel = this.panels[widgetId], otherPanel;
|
if (!activePanel || !activePanel.domNode) {
|
this.layoutManager._loadDashboardWidget(this.widgetIds[this.currentIndex])
|
.then(lang.hitch(this, function(panel) {
|
if(panel) {
|
var div = domConstruct.create('div', {
|
'data-widgetId': widgetId,
|
'class': 'dnd-mobile-container'
|
}, this.containerNode);
|
panel.placeAt(div);
|
this.panels[widgetId] = panel;
|
this.layoutManager.panelManager.openPanel(panel);
|
|
this.labelNode.innerHTML = panel.config.label;
|
}
|
}));
|
} else {
|
var numOfPanels = query('div[data-widgetId="' + widgetId + '"]', this.containerNode);
|
if (numOfPanels.length === 0) {
|
var div = domConstruct.create('div', {
|
'data-widgetId': widgetId,
|
'class': 'dnd-mobile-container'
|
}, this.containerNode);
|
activePanel.placeAt(div);
|
}
|
this.layoutManager.panelManager.openPanel(activePanel);
|
}
|
|
// Close all other panels
|
array.forEach(this.widgetIds, lang.hitch(this, function(wid) {
|
if (wid !== widgetId) {
|
otherPanel = this.panels[wid];
|
if (otherPanel) {
|
this.layoutManager.panelManager.closePanel(otherPanel);
|
}
|
}
|
}));
|
},
|
|
_initSplitter: function() {
|
if(this.moveable){
|
this.moveable.destroy();
|
}
|
this.moveable = new Move.parentConstrainedMoveable(this.splitterNode, {
|
area: 'content',
|
within: true
|
});
|
this.own(on(this.moveable, 'MoveStart', lang.hitch(this, this.onMoveStart)));
|
this.own(on(this.moveable, 'Moving', debounce(lang.hitch(this, this.onMoving), 50)));
|
this.own(on(this.moveable, 'MoveStop', lang.hitch(this, this.onMoveStop)));
|
},
|
|
destroy: function() {
|
if(this.moveable){
|
this.moveable.destroy();
|
this.moveable = null;
|
}
|
var widgetId = this.widgetIds[this.currentIndex];
|
var activePanel = this.panels[widgetId];
|
if (activePanel) {
|
this.layoutManager.panelManager.closePanel(activePanel);
|
}
|
domConstruct.empty(this.containerNode);
|
this.inherited(arguments);
|
},
|
|
setMobileLayout: function(mode) {
|
if (mode === LANDSCAPE_MODE) {
|
this.mobileLayout = LANDSCAPE_MODE;
|
domClass.remove(this.domNode, 'portrait');
|
domClass.add(this.domNode, 'landscape');
|
} else {
|
this.mobileLayout = PORTRAIT_MODE;
|
domClass.remove(this.domNode, 'landscape');
|
domClass.add(this.domNode, 'portrait');
|
}
|
},
|
|
resize: function() {
|
var deferred;
|
if (this.mobileLayout === LANDSCAPE_MODE) {
|
deferred = this._restoreLandscapeLayout();
|
} else {
|
deferred = this._restorePortraitLayout();
|
}
|
// trigger the resized event after the animation finished
|
deferred.then(lang.hitch(this, function() {
|
// may have been destroyed after animation finished because of layout changes from
|
// mobile to desktop.
|
if (this.domNode) {
|
var containerSize = domGeometry.getMarginBox(this.widgetContainerNode);
|
if (window.isRTL) {
|
this.emit('resized', {
|
right: containerSize.l,
|
top: containerSize.t,
|
width: containerSize.w,
|
height: containerSize.h
|
});
|
} else {
|
this.emit('resized', {
|
left: containerSize.l,
|
top: containerSize.t,
|
width: containerSize.w,
|
height: containerSize.h
|
});
|
}
|
}
|
}));
|
},
|
|
_updateHeader: function(previousIndex, currentIndex) {
|
if (this.widgetIds && this.widgetIds.length > 0) {
|
var currentWidgetId = this.widgetIds[currentIndex],
|
previousWidgetId = this.widgetIds[previousIndex];
|
var currentPanel = this.panels[currentWidgetId],
|
previousPanel = this.panels[previousWidgetId];
|
var currentWidget, previousWidget;
|
|
this.countNode.innerHTML = (currentIndex + 1) + '/' + this.widgetIds.length;
|
if(previousIndex && previousPanel) {
|
previousWidget = previousPanel.getWidgetById(previousWidgetId);
|
previousWidget.onDeActive();
|
}
|
if (currentPanel) {
|
currentWidget = currentPanel.getWidgetById(currentWidgetId);
|
if (currentWidget) { // may be undefined because widgets in panel is loaded async
|
currentWidget.onActive();
|
this.labelNode.innerHTML = currentWidget.label;
|
}
|
} else {
|
this.labelNode.innerHTML = '';
|
}
|
} else {
|
this.labelNode.innerHTML = '';
|
this.countNode.innerHTML = '';
|
}
|
|
if (currentIndex === 0) {
|
domClass.add(this.previousArrow, 'disabled');
|
} else {
|
domClass.remove(this.previousArrow, 'disabled');
|
}
|
if (currentIndex === this.widgetIds.length - 1) {
|
domClass.add(this.nextArrow, 'disabled');
|
} else {
|
domClass.remove(this.nextArrow, 'disabled');
|
}
|
},
|
|
_switchPrevious: function() {
|
if (this.currentIndex > 0) {
|
this._updateHeader(this.currentIndex, this.currentIndex - 1);
|
this.currentIndex--;
|
this._play();
|
}
|
},
|
|
_switchNext: function() {
|
if (this.currentIndex < this.widgetIds.length - 1) {
|
this._updateHeader(this.currentIndex, this.currentIndex + 1);
|
this.currentIndex++;
|
this._play();
|
}
|
},
|
|
_play: function() {
|
var size = domGeometry.getMarginBox(this.containerNode);
|
var props;
|
if (window.isRTL) {
|
props = {
|
right: -this.currentIndex * size.w
|
};
|
} else {
|
props = {
|
left: -this.currentIndex * size.w
|
};
|
}
|
|
baseFx.animateProperty({
|
node: this.containerNode,
|
duration: ANIMATION_DURATION,
|
properties: props,
|
onEnd: lang.hitch(this, function() {
|
domStyle.set(this.footerNode, 'opacity', '1');
|
baseFx.animateProperty({
|
node: this.footerNode,
|
duration: ANIMATION_DURATION * 7,
|
properties: {
|
opacity: 0
|
}
|
}).play();
|
})
|
}).play();
|
this._openPanel();
|
},
|
|
onMoveStart: function(mover){
|
if (window.isRTL) {
|
var size = domGeometry.getMarginBox(this.layoutId);
|
var right = parseFloat(domStyle.get(mover.node, 'right'));
|
this._moveStartX = size.w - right;
|
domStyle.set(this.splitterNode, {
|
left: this._moveStartX + 'px',
|
right: 'auto'
|
});
|
} else {
|
this._moveStartX = domStyle.get(mover.node, 'left');
|
}
|
this._moveStartY = domStyle.get(mover.node, 'top');
|
},
|
|
onMoving: function(mover){
|
if (!mover || !mover.node) {
|
return;
|
}
|
var dx = domStyle.get(mover.node, 'left') - this._moveStartX,
|
dy = domStyle.get(mover.node, 'top') - this._moveStartY;
|
|
if (this.mobileLayout === PORTRAIT_MODE) { // Move horizontally
|
domStyle.set(this.widgetContainerNode, 'top', (this._moveStartY + dy +
|
SPLITTER_HEIGHT) + 'px');
|
domStyle.set(this.splitterNode, 'top', (this._moveStartY + dy) + 'px');
|
domStyle.set(this.splitterNode, 'left', '0');
|
} else if (this.mobileLayout === LANDSCAPE_MODE) {
|
// Move horizontally
|
domStyle.set(this.widgetContainerNode, {
|
left: (this._moveStartX + dx + SPLITTER_HEIGHT) + 'px',
|
right: 'auto'
|
});
|
domStyle.set(this.splitterNode, {
|
left: (this._moveStartX + dx) + 'px',
|
right: 'auto',
|
top: 0
|
});
|
}
|
},
|
|
onMoveStop: function(mover){
|
var dx = domStyle.get(mover.node, 'left') - this._moveStartX,
|
dy = domStyle.get(mover.node, 'top') - this._moveStartY;
|
if (this.mobileLayout === PORTRAIT_MODE) {
|
this._resizeWidgetVertically(dy);
|
} else if (this.mobileLayout === LANDSCAPE_MODE) {
|
this._resizeWidgetHorizontally(dx);
|
}
|
},
|
|
_resizeWidgetVertically: function(dy) {
|
var size = domGeometry.getMarginBox(this.layoutId);
|
var containerSize = domGeometry.getMarginBox(this.containerNode);
|
var threshold = containerSize.h / 3, changed = false, animArray = [], animation;
|
threshold = threshold > THRESHOLD ? THRESHOLD : threshold;
|
|
var splitterTop, mapTop, mapHeight, widgetHeight;
|
if (this.widgetMode === WIDGET_NORMAL && dy < -threshold) { // normal to maximize
|
this.widgetMode = WIDGET_MAXIMIZED;
|
splitterTop = 0;
|
mapTop = -size.h * MAP_RATIO_PORTRAIT;
|
mapHeight = size.h * MAP_RATIO_PORTRAIT;
|
widgetHeight = size.h - SPLITTER_HEIGHT;
|
changed = true;
|
this.emit('resized', {
|
left: 0,
|
top: splitterTop + SPLITTER_HEIGHT,
|
width: size.w,
|
height: widgetHeight
|
});
|
} else if(this.widgetMode === WIDGET_NORMAL && dy > threshold) { // normal to minimize
|
this.widgetMode = WIDGET_MINIMIZED;
|
splitterTop = size.h - SPLITTER_HEIGHT;
|
mapHeight = size.h - SPLITTER_HEIGHT;
|
mapTop = 0;
|
widgetHeight = size.h * (1 - MAP_RATIO_PORTRAIT) - SPLITTER_HEIGHT;
|
changed = true;
|
this.emit('resized', {
|
left: 0,
|
top: splitterTop + SPLITTER_HEIGHT,
|
width: size.w,
|
height: widgetHeight
|
});
|
} else if(this.widgetMode === WIDGET_MINIMIZED && dy < -threshold || // minimize to normal
|
this.widgetMode === WIDGET_MAXIMIZED && dy > threshold) { // maximize to normal
|
this.widgetMode = WIDGET_NORMAL;
|
splitterTop = size.h * MAP_RATIO_PORTRAIT;
|
mapHeight = size.h * MAP_RATIO_PORTRAIT;
|
mapTop = 0;
|
widgetHeight = size.h * (1 - MAP_RATIO_PORTRAIT) - SPLITTER_HEIGHT;
|
changed = true;
|
this.emit('resized', {
|
left: 0,
|
top: splitterTop + SPLITTER_HEIGHT,
|
width: size.w,
|
height: widgetHeight
|
});
|
}
|
if (changed) {
|
animArray.push(baseFx.animateProperty({
|
node: this.widgetContainerNode,
|
duration: ANIMATION_DURATION,
|
properties: {
|
top: splitterTop + SPLITTER_HEIGHT,
|
height: widgetHeight
|
}
|
}));
|
|
animArray.push(baseFx.animateProperty({
|
node: this.containerNode,
|
duration: ANIMATION_DURATION,
|
properties: {
|
left: -this.currentIndex * size.w,
|
width: size.w
|
}
|
}));
|
|
animArray.push(baseFx.animateProperty({
|
node: this.splitterNode,
|
duration: ANIMATION_DURATION,
|
properties: {
|
top: splitterTop
|
}
|
}));
|
|
animArray.push(baseFx.animateProperty({
|
node: this.mapNode,
|
duration: ANIMATION_DURATION,
|
properties: {
|
height: mapHeight,
|
top: mapTop
|
}
|
}));
|
|
animation = coreFx.combine(animArray);
|
animation.onEnd = lang.hitch(this, this._resizeActivePanel);
|
animation.play();
|
} else {
|
this._restorePortraitLayout();
|
}
|
},
|
|
_resizeWidgetHorizontally: function(dx) {
|
var size = domGeometry.getMarginBox(this.layoutId);
|
var containerSize = domGeometry.getMarginBox(this.containerNode);
|
var threshold = containerSize.w / 3, changed = false, animArray = [], animation;
|
threshold = threshold > THRESHOLD ? THRESHOLD : threshold;
|
|
var splitterLeft, mapLeft, splitterRight, mapRight, mapWidth, widgetWidth;
|
if (window.isRTL) {
|
if (this.widgetMode === WIDGET_NORMAL && dx > threshold) { // normal to maximize
|
this.widgetMode = WIDGET_MAXIMIZED;
|
splitterRight = 0;
|
mapWidth = size.w - WIDGET_MIN_WIDTH - SPLITTER_HEIGHT;
|
mapRight = -mapWidth;
|
widgetWidth = size.w - SPLITTER_HEIGHT;
|
changed = true;
|
this.emit('resized', {
|
left: splitterRight + SPLITTER_HEIGHT,
|
right: 'auto',
|
top: 0,
|
width: widgetWidth,
|
height: size.h
|
});
|
} else if(this.widgetMode === WIDGET_NORMAL && dx < -threshold) { // normal to minimize
|
this.widgetMode = WIDGET_MINIMIZED;
|
mapWidth = size.w - SPLITTER_HEIGHT;
|
splitterRight = mapWidth;
|
mapRight = 0;
|
widgetWidth = WIDGET_MIN_WIDTH;
|
changed = true;
|
this.emit('resized', {
|
left: splitterRight + SPLITTER_HEIGHT,
|
right: 'auto',
|
top: 0,
|
width: widgetWidth,
|
height: size.h
|
});
|
} else if((this.widgetMode === WIDGET_MINIMIZED && dx > threshold) || // minimize to normal
|
(this.widgetMode === WIDGET_MAXIMIZED && dx < -threshold)) { // maximize to normal
|
this.widgetMode = WIDGET_NORMAL;
|
mapWidth = size.w - WIDGET_MIN_WIDTH - SPLITTER_HEIGHT;
|
splitterRight = mapWidth;
|
mapRight = 0;
|
widgetWidth = WIDGET_MIN_WIDTH;
|
changed = true;
|
this.emit('resized', {
|
left: splitterRight + SPLITTER_HEIGHT,
|
right: 'auto',
|
top: 0,
|
width: widgetWidth,
|
height: size.h
|
});
|
}
|
if (changed) {
|
animArray.push(baseFx.animateProperty({
|
node: this.widgetContainerNode,
|
duration: ANIMATION_DURATION,
|
properties: {
|
left: 'auto',
|
right: splitterRight + SPLITTER_HEIGHT,
|
width: widgetWidth
|
}
|
}));
|
|
animArray.push(baseFx.animateProperty({
|
node: this.containerNode,
|
duration: ANIMATION_DURATION,
|
properties: {
|
left: 'auto',
|
right: -this.currentIndex * widgetWidth,
|
width: widgetWidth
|
}
|
}));
|
|
animArray.push(baseFx.animateProperty({
|
node: this.splitterNode,
|
duration: ANIMATION_DURATION,
|
properties: {
|
left: 'auto',
|
right: splitterRight
|
}
|
}));
|
|
animArray.push(baseFx.animateProperty({
|
node: this.mapNode,
|
duration: ANIMATION_DURATION,
|
properties: {
|
left: 'auto',
|
width: mapWidth,
|
right: mapRight
|
}
|
}));
|
|
animation = coreFx.combine(animArray);
|
animation.onEnd = lang.hitch(this, this._resizeActivePanel);
|
animation.play();
|
} else {
|
this._restoreLandscapeLayout();
|
}
|
} else {
|
if (this.widgetMode === WIDGET_NORMAL && dx < -threshold) { // normal to maximize
|
this.widgetMode = WIDGET_MAXIMIZED;
|
splitterLeft = 0;
|
mapWidth = size.w - WIDGET_MIN_WIDTH - SPLITTER_HEIGHT;
|
mapLeft = -mapWidth;
|
widgetWidth = size.w - SPLITTER_HEIGHT;
|
changed = true;
|
this.emit('resized', {
|
left: splitterLeft + SPLITTER_HEIGHT,
|
top: 0,
|
width: widgetWidth,
|
height: size.h
|
});
|
} else if(this.widgetMode === WIDGET_NORMAL && dx > threshold) { // normal to minimize
|
this.widgetMode = WIDGET_MINIMIZED;
|
mapWidth = size.w - SPLITTER_HEIGHT;
|
splitterLeft = mapWidth;
|
mapLeft = 0;
|
widgetWidth = WIDGET_MIN_WIDTH;
|
changed = true;
|
this.emit('resized', {
|
left: splitterLeft + SPLITTER_HEIGHT,
|
top: 0,
|
width: widgetWidth,
|
height: size.h
|
});
|
} else if(this.widgetMode === WIDGET_MINIMIZED && dx < -threshold || // minimize to normal
|
this.widgetMode === WIDGET_MAXIMIZED && dx > threshold) { // maximize to normal
|
this.widgetMode = WIDGET_NORMAL;
|
mapWidth = size.w - WIDGET_MIN_WIDTH - SPLITTER_HEIGHT;
|
splitterLeft = mapWidth;
|
mapLeft = 0;
|
widgetWidth = WIDGET_MIN_WIDTH;
|
changed = true;
|
this.emit('resized', {
|
left: splitterLeft + SPLITTER_HEIGHT,
|
top: 0,
|
width: widgetWidth,
|
height: size.h
|
});
|
}
|
if (changed) {
|
animArray.push(baseFx.animateProperty({
|
node: this.widgetContainerNode,
|
duration: ANIMATION_DURATION,
|
properties: {
|
left: splitterLeft + SPLITTER_HEIGHT,
|
width: widgetWidth
|
}
|
}));
|
|
animArray.push(baseFx.animateProperty({
|
node: this.containerNode,
|
duration: ANIMATION_DURATION,
|
properties: {
|
left: -this.currentIndex * widgetWidth,
|
width: widgetWidth
|
}
|
}));
|
|
animArray.push(baseFx.animateProperty({
|
node: this.splitterNode,
|
duration: ANIMATION_DURATION,
|
properties: {
|
left: splitterLeft
|
}
|
}));
|
|
animArray.push(baseFx.animateProperty({
|
node: this.mapNode,
|
duration: ANIMATION_DURATION,
|
properties: {
|
width: mapWidth,
|
left: mapLeft
|
}
|
}));
|
|
animation = coreFx.combine(animArray);
|
animation.onEnd = lang.hitch(this, this._resizeActivePanel);
|
animation.play();
|
} else {
|
this._restoreLandscapeLayout();
|
}
|
}
|
},
|
|
_restorePortraitLayout: function() {
|
var size = domGeometry.getMarginBox(this.layoutId);
|
var animArray = [], animation, deferred = new Deferred();
|
|
var splitterTop, mapTop, mapHeight, widgetHeight;
|
if (this.widgetMode === WIDGET_NORMAL) { // normal
|
splitterTop = size.h * MAP_RATIO_PORTRAIT;
|
mapHeight = size.h * MAP_RATIO_PORTRAIT;
|
mapTop = 0;
|
widgetHeight = size.h - mapHeight - SPLITTER_HEIGHT;
|
} else if(this.widgetMode === WIDGET_MAXIMIZED) { // maximize
|
splitterTop = 0;
|
mapTop = -size.h * MAP_RATIO_PORTRAIT;
|
mapHeight = size.h * MAP_RATIO_PORTRAIT;
|
widgetHeight = size.h - SPLITTER_HEIGHT;
|
} else if(this.widgetMode === WIDGET_MINIMIZED) { // minimized
|
splitterTop = size.h - SPLITTER_HEIGHT;
|
mapHeight = size.h - SPLITTER_HEIGHT;
|
mapTop = 0;
|
widgetHeight = size.h * (1 - MAP_RATIO_PORTRAIT) - SPLITTER_HEIGHT;
|
}
|
animArray.push(baseFx.animateProperty({
|
node: this.widgetContainerNode,
|
duration: ANIMATION_DURATION,
|
properties: {
|
left: 0,
|
right: 0,
|
top: splitterTop + SPLITTER_HEIGHT,
|
height: widgetHeight,
|
width: size.w
|
}
|
}));
|
|
var containerProps;
|
if(window.isRTL) {
|
containerProps = {
|
right: -this.currentIndex * size.w,
|
width: size.w
|
}
|
} else {
|
containerProps = {
|
left: -this.currentIndex * size.w,
|
width: size.w
|
};
|
}
|
animArray.push(baseFx.animateProperty({
|
node: this.containerNode,
|
duration: ANIMATION_DURATION,
|
properties: containerProps
|
}));
|
|
animArray.push(baseFx.animateProperty({
|
node: this.splitterNode,
|
duration: ANIMATION_DURATION,
|
properties: {
|
top: splitterTop,
|
left: 0,
|
right: 0,
|
width: size.w,
|
height: SPLITTER_HEIGHT
|
}
|
}));
|
|
animArray.push(baseFx.animateProperty({
|
node: this.mapNode,
|
duration: ANIMATION_DURATION,
|
properties: {
|
height: mapHeight,
|
width: size.w,
|
top: mapTop,
|
left: 0,
|
right: 0
|
}
|
}));
|
|
animation = coreFx.combine(animArray);
|
animation.onEnd = lang.hitch(this, function() {
|
this._resizeActivePanel();
|
deferred.resolve();
|
});
|
animation.play();
|
|
return deferred;
|
},
|
|
_restoreLandscapeLayout: function() {
|
var size = domGeometry.getMarginBox(this.layoutId);
|
var animArray = [], animation, deferred = new Deferred();
|
var splitterLeft, mapLeft, splitterRight, mapRight, mapWidth, widgetWidth;
|
|
if (window.isRTL) {
|
if (this.widgetMode === WIDGET_NORMAL) { // normal
|
mapWidth = size.w - WIDGET_MIN_WIDTH - SPLITTER_HEIGHT;
|
splitterRight = mapWidth;
|
mapRight = 0;
|
widgetWidth = WIDGET_MIN_WIDTH;
|
} else if(this.widgetMode === WIDGET_MAXIMIZED) { // maximize
|
splitterRight = 0;
|
mapWidth = size.w - WIDGET_MIN_WIDTH - SPLITTER_HEIGHT;
|
mapRight = -mapWidth;
|
widgetWidth = size.w - SPLITTER_HEIGHT;
|
} else if(this.widgetMode === WIDGET_MINIMIZED) { // minimize
|
mapWidth = size.w - SPLITTER_HEIGHT;
|
splitterRight = mapWidth;
|
mapRight = 0;
|
widgetWidth = WIDGET_MIN_WIDTH;
|
}
|
|
animArray.push(baseFx.animateProperty({
|
node: this.widgetContainerNode,
|
duration: ANIMATION_DURATION,
|
properties: {
|
top: 0,
|
right: splitterRight + SPLITTER_HEIGHT,
|
width: widgetWidth,
|
height: size.h
|
}
|
}));
|
|
animArray.push(baseFx.animateProperty({
|
node: this.containerNode,
|
duration: ANIMATION_DURATION,
|
properties: {
|
right: -this.currentIndex * widgetWidth,
|
width: widgetWidth
|
}
|
}));
|
|
animArray.push(baseFx.animateProperty({
|
node: this.splitterNode,
|
duration: ANIMATION_DURATION,
|
properties: {
|
right: splitterRight,
|
top: 0,
|
height: size.h,
|
width: SPLITTER_HEIGHT
|
}
|
}));
|
|
animArray.push(baseFx.animateProperty({
|
node: this.mapNode,
|
duration: ANIMATION_DURATION,
|
properties: {
|
width: mapWidth,
|
height: size.h,
|
right: mapRight,
|
top: 0
|
}
|
}));
|
} else {
|
if (this.widgetMode === WIDGET_NORMAL) { // normal
|
mapWidth = size.w - WIDGET_MIN_WIDTH - SPLITTER_HEIGHT;
|
splitterLeft = mapWidth;
|
mapLeft = 0;
|
widgetWidth = WIDGET_MIN_WIDTH;
|
} else if(this.widgetMode === WIDGET_MAXIMIZED) { // maximize
|
splitterLeft = 0;
|
mapWidth = size.w - WIDGET_MIN_WIDTH - SPLITTER_HEIGHT;
|
mapLeft = -mapWidth;
|
widgetWidth = size.w - SPLITTER_HEIGHT;
|
} else if(this.widgetMode === WIDGET_MINIMIZED) { // minimize
|
mapWidth = size.w - SPLITTER_HEIGHT;
|
splitterLeft = mapWidth;
|
mapLeft = 0;
|
widgetWidth = WIDGET_MIN_WIDTH;
|
}
|
|
animArray.push(baseFx.animateProperty({
|
node: this.widgetContainerNode,
|
duration: ANIMATION_DURATION,
|
properties: {
|
top: 0,
|
left: splitterLeft + SPLITTER_HEIGHT,
|
width: widgetWidth,
|
height: size.h
|
}
|
}));
|
|
animArray.push(baseFx.animateProperty({
|
node: this.containerNode,
|
duration: ANIMATION_DURATION,
|
properties: {
|
left: -this.currentIndex * widgetWidth,
|
width: widgetWidth
|
}
|
}));
|
|
animArray.push(baseFx.animateProperty({
|
node: this.splitterNode,
|
duration: ANIMATION_DURATION,
|
properties: {
|
left: splitterLeft,
|
top: 0,
|
height: size.h,
|
width: SPLITTER_HEIGHT
|
}
|
}));
|
|
animArray.push(baseFx.animateProperty({
|
node: this.mapNode,
|
duration: ANIMATION_DURATION,
|
properties: {
|
width: mapWidth,
|
height: size.h,
|
left: mapLeft,
|
top: 0
|
}
|
}));
|
}
|
|
animation = coreFx.combine(animArray);
|
animation.onEnd = lang.hitch(this, function() {
|
this._resizeActivePanel();
|
deferred.resolve();
|
});
|
animation.play();
|
|
return deferred;
|
}
|
});
|
});
|
