Retour à la documentation
var deps = [
'dojo/_base/declare', 'dojo/_base/lang', 'dojo/_base/array', 'dojo/on',
'dojo/dom-construct', 'dojo/dom-style', 'dojo/dom-class', 'dojo/Stateful',
'dijit/layout/ContentPane', 'dijit/Destroyable', 'dijit/TitlePane',
'dojo/dom-geometry', 'dojox/gesture/tap', "spw/api/SidePanel"
];
//var nav = typeof navigator!=='undefined'?navigator:{};
//if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Windows Phone/i.test( nav.userAgent)) {
// deps.push('spw/api/SidePanel');
//}
/**
* SpwMobile est une classe particulière de l'API permettant la gestion de l'affichage du viewer en format mobile
*/
define(deps, function(declare, lang, array, on, domConstruct, domStyle, domClass, Stateful,
ContentPane, Destroyable, TitlePane, domGeom, tap, SidePanel) {
return declare([Stateful, Destroyable], {
spwViewer: null,
menuPanel: null,
widgetPanels: null,
currentWidget: null,
currentLabel: null,
labels: null,
idxWidget: 0,
/**
* Initialise la classe sur base d'une configuration
* @param cfg la configuration du viewer mobile
*/
constructor: function(cfg) {
lang.mixin(this, cfg);
this.labels = {};
this.widgetPanels = {};
},
/**
* Permet d'obtenir la zone du viewer qui n'est pas recouverte par un panel ou un widget
*/
getScreenVisibleZone: function(w, y) {
var w = this.getBodyWidth();
var h = this.getBodyHeight();
var cb = null;
// if (this.menuPanel && this.menuPanel._visible) {
// cb = domGeom.getContentBox(this.menuPanel.domNode);
//
// w -= cb.w;
// }
for (var key in this.widgetPanels) {
if (this.widgetPanels.hasOwnProperty(key) && this.widgetPanels[key] && this.widgetPanels[key]._visible) {
cb = domGeom.getContentBox(this.widgetPanels[key].domNode);
if (['top', 'bottom'].indexOf(key) > -1) {
h -= cb.h;
}
else {
w -= cb.w;
}
}
}
return {
w: w,
h: h
};
},
/**
* Retourne la largeur du body
*/
getBodyWidth: function() {
return window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth ||
document.body.offsetWidth;
},
/**
* Retourne la hauteur du body
*/
getBodyHeight: function() {
return window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight ||
document.body.offsetHeight;
},
/**
* Toggle l'ouverture du menu
*/
openMenu: function() {
if (this.menuPanel) {
this.menuPanel.toggle();
}
},
/**
* Ajoute un widget au menu (équivalent de la toolbar dans le mode desktop)
* @param widget le widget à ajouter au menu
*/
addToMenu: function(widget) {
widget.solitary = true;
if (['integrated', 'panel', 'panel-light', 'bottom', 'right', 'top'].indexOf(widget.position) < 0) {
return;
}
if (this.menuPanel == null) {
this.menuPanel = new SidePanel({
spwMobile: this,
mode: 'overlay',
position: 'start',
menu: true,
overlay: true,
defaultDim: this.regions.left
}, domConstruct.create('div', null, document.body, 'last'));
this.menuPanel.startup();
}
var panel = this.menuPanel;
domStyle.set(widget.domNode, 'z-index', '2001');
switch (widget.position) {
case 'integrated':
case 'left':
panel.addWidget(widget);
break;
case 'panel':
case 'panel-light':
case 'bottom':
case 'top':
case 'right':
var div = new ContentPane({
'class': 'sidePanelItem'
});
domConstruct.create('span', {
'class': 'sidePanelItemImg ' + (widget.iconClass ? widget.iconClass : 'noIcon')
}, div.domNode);
domConstruct.create('span', {
'class': 'sidePanelItemText',
innerHTML: widget.widgetTitle
}, div.domNode);
div.startup();
panel.addWidget(div);
widget.mobileIdx = this.idxWidget++;
this.labels[widget.mobileIdx] = div;
this.own(
//on(div, 'click', lang.hitch(this, this.onLabelClicked, widget)),
on(div, tap, lang.hitch(this, this.onLabelClicked, widget))
);
break;
default:
console.log('Le widget ' + widget.widgetId + ' n\'a pas de région correcte');
}
},
/**
* Méthode appelée lorsque le label d'un widget est cliqué dans le menu latéral
* @param le widget cliqué
*/
onLabelClicked: function(widget) {
var pos = this.getSidePos(widget);
if (this.currentWidget !== widget) {
widget.onActivate(); // appelle le showwidget...
}
else if (this.widgetPanels[pos]) {
this.widgetPanels[pos].toggle();
if (this.widgetPanels[pos]._visible) {
this.menuPanel.close();
}
}
},
/**
* Permet d'obtenir la position du widget (où placer le widget à son activation)
* @param le widget dont on veut la position
*/
getSidePos: function(widget) {
if (widget == null) {
return '';
}
if (!this.isPortrait() && widget.mobile && widget.mobile.landscapePosition) {
return widget.mobile.landscapePosition.replace(/panel-light|panel|end/, 'right').replace('start', 'left');
}
return widget.position.replace(/panel-light|panel|end/, 'right').replace('start', 'left');
},
/**
* Détermine si l'orientation du widget est portrait ou pas
*/
isPortrait: function() {
return window.innerHeight > window.innerWidth;
},
/**
* Détermine si l'orientation du widget est horizontale ou pas
*/
isLandscape: function() {
return (window.orientation === 90 || window.orientation === -90);
},
/**
* Retire le widget du viewer
* @param widget le widget à retirer
*/
removeWidget: function(widget) {
if (widget === this.currentWidget) {
this.removeCurrentWidget();
}
if (this.labels[widget.mobileIdx]) {
this.menuPanel.destroyWidget(this.labels[widget.mobileIdx]);
//this.labels[widget.mobileIdx].destroy();
this.labels[widget.mobileIdx] = null;
}
},
/**
* Change la position du widget
* @param widget le widget dont on veut changer la position
* @param oldPosition la position du widget avant changement
*/
changePosition: function(widget, oldPos) {
this.widgetPanels[oldPos].removeWidget(widget);
this.currentWidget = null;
this.showWidget(widget);
},
/**
* Affiche le widget
* @param widget le widget à afficher
*/
showWidget: function(widget) {
var pos = this.getSidePos(widget);
if (this.widgetPanels[pos] == null) {
this.widgetPanels[pos] = new SidePanel({
spwMobile: this,
mode: 'overlay',
position: pos,
defaultDim: this.regions[pos]
}, domConstruct.create('div', null, document.body, 'last'));
this.widgetPanels[pos].startup();
}
this.removeCurrentWidget(this.getSidePos(this.currentWidget) === pos);
this.widgetPanels[pos].showWidget(widget);
widget.onActivate();
if (this.labels[widget.mobileIdx]) {
domClass.add(this.labels[widget.mobileIdx].domNode, 'selected');
this.currentLabel = this.labels[widget.mobileIdx];
}
else {
this.currentLabel = null;
}
this.currentWidget = widget;
if (this.menuPanel) {
this.menuPanel.close();
}
},
/**
* Retire le widget actuellement ouvert
* @param stayOpen
*/
removeCurrentWidget: function(stayOpen) {
if (this.currentWidget == null) {
return;
}
var pos = this.getSidePos(this.currentWidget);
if (this.widgetPanels[pos] == null) {
return;
}
this.widgetPanels[pos].removeWidget(this.currentWidget, stayOpen);
if (this.currentWidget.activated) {
this.currentWidget.onDeactivate();
}
if (this.currentLabel) {
domClass.remove(this.currentLabel.domNode, 'selected');
}
this.currentWidget = null;
this.currentLabel = null;
}
});
});