|
define([
|
'dojo/_base/declare',
|
'dojo/_base/lang',
|
'dojo/_base/array',
|
'dojo/_base/html',
|
'dojo/on',
|
'dojo/dom-construct',
|
'dojo/query',
|
'dijit/_WidgetBase',
|
'dijit/_TemplatedMixin',
|
'jimu/dijit/ViewStack',
|
'jimu/utils'
|
],
|
function(
|
declare, lang, array, html, on, domConstruct,
|
query, _WidgetBase, _TemplatedMixin, ViewStack, utils) {
|
/* global jimuConfig */
|
//label is not visible if node width is less than 80px, and icon should be scaled.
|
var NORMAL_MIN_WIDTH = 80,
|
NORMAL_WIDTH = 120, //node width should not be larger than this value.
|
MIN_MARGIN = 20, //minimux margin between this dom and the map box.
|
MIN_NODE_WIDTH = 10, //If node width is less than 10px, the node will not be visible.
|
MAX_ROWCOL = 4,
|
MIN_ROWCOL = 3;
|
//3*3 tile nodes, with a close button
|
return declare([_WidgetBase, _TemplatedMixin], {
|
baseClass: 'jimu-header-more-popup',
|
templateString: '<div><div class="pages" data-dojo-attach-point="pagesNode"></div>' +
|
'<div class="points jimu-corner-bottom"><div class="points-inner"' +
|
'data-dojo-attach-point="pointsNode"></div></div></div>',
|
margin: 4,
|
|
postCreate: function() {
|
this.nodes = [];
|
this.pages = [];
|
this.createCloseBtn();
|
},
|
|
startup: function() {
|
this.viewStack = new ViewStack({
|
views: [],
|
viewType: 'dom'
|
}, this.pagesNode);
|
this.viewStack.startup();
|
// this.createPages();
|
// if (this.viewStack.views.length > 0) {
|
// this._selectPage(0);
|
// }
|
this.resize();
|
},
|
|
resize: function() {
|
var gridParam = this._calculateGridParam(), closeDiv;
|
if(gridParam !== null){
|
html.setStyle(this.domNode, utils.getPositionStyle(gridParam.position));
|
this.nodeWidth = gridParam.cellSize - this.margin;
|
|
if(!this.oldGridParam || this.oldGridParam.rows !== gridParam.rows ||
|
this.oldGridParam.cols !== gridParam.cols){
|
//grid changed, re-create the pages
|
this.clearPages();
|
this.createPages(gridParam);
|
}
|
|
this.nodes.forEach(lang.hitch(this, function(node, i) {
|
this.setItemNodePosition(node, i, gridParam);
|
}));
|
|
this.oldGridParam = gridParam;
|
|
closeDiv = query('div.close', this.domNode)[0];
|
html.setStyle(closeDiv, {
|
width: this.nodeWidth * 0.25 + 'px',
|
height: this.nodeWidth * 0.25 + 'px'
|
});
|
}else{
|
this.oldGridParam = null;
|
html.setStyle(this.domNode, utils.getPositionStyle({
|
left:0,
|
top:0,
|
width:0,
|
height:0,
|
zIndex: 111
|
}));
|
this.nodeWidth = 0;
|
}
|
},
|
|
setItemNodePosition: function(node, i, gridParam) {
|
var ml, mt, imgWidth = 48, fontSize = 16, imgNode, labelNode; //margin-left, margin-top
|
|
if (i % gridParam.cols === 0) {
|
ml = 0;
|
} else {
|
ml = this.margin / 2;
|
}
|
|
// If the node is in the first row of each page, margin-top is 0, else margin-top is 2
|
if ((i % (gridParam.rows * gridParam.cols)) < gridParam.cols) {
|
mt = 0;
|
} else {
|
mt = this.margin / 2;
|
}
|
|
var nodeStyle = {};
|
if (typeof this.nodeWidth === "number") {
|
nodeStyle.width = this.nodeWidth + 'px';
|
nodeStyle.height = this.nodeWidth + 'px';
|
}
|
if (typeof ml === 'number') {
|
if (window.isRTL){
|
nodeStyle.marginRight = ml + 'px';
|
}else {
|
nodeStyle.marginLeft = ml + 'px';
|
}
|
}
|
if (typeof mt === 'number') {
|
nodeStyle.marginTop = mt + 'px';
|
}
|
|
imgNode = query('img', node)[0];
|
if(imgNode){
|
if(gridParam.iconScaled){
|
imgWidth = imgWidth * (this.nodeWidth / NORMAL_WIDTH);
|
html.setStyle(imgNode, {
|
width: imgWidth + 'px',
|
height: imgWidth + 'px'
|
});
|
}else{
|
html.setStyle(imgNode, {
|
width: imgWidth + 'px',
|
height: imgWidth + 'px'
|
});
|
}
|
}
|
|
labelNode = query('div.node-label', node)[0];
|
if(labelNode){
|
if(gridParam.showLabel){
|
if(gridParam.iconScaled){
|
fontSize = fontSize * (this.nodeWidth / NORMAL_WIDTH);
|
html.setStyle(labelNode, {
|
'font-size': fontSize + 'px',
|
display: 'block'
|
});
|
}else{
|
html.setStyle(labelNode, {
|
'font-size': fontSize + 'px',
|
display: 'block'
|
});
|
}
|
}else{
|
html.setStyle(labelNode, {
|
'font-size': fontSize + 'px',
|
display: 'none'
|
});
|
}
|
}
|
|
html.setStyle(node, nodeStyle);
|
},
|
|
clearPages: function(){
|
array.forEach(this.pages, function(page){
|
this.viewStack.removeView(page.pageNode);
|
}, this);
|
|
domConstruct.empty(this.pointsNode);
|
this.pages = [];
|
this.nodes = [];
|
},
|
|
/**
|
* Create node pages based on the gridParam object.
|
* @param {object} gridParam include rows:number, cols:number, cellSize:number,
|
* iconScaled:boolean, showLabel:boolean,
|
* position:object(left, right, top, bottom, width, height)
|
*/
|
createPages: function(gridParam) {
|
var count, pages, p, pageNode, pointNode;
|
count = this.items.length;
|
pages = Math.ceil(count / (gridParam.rows * gridParam.cols));
|
for (p = 0; p < pages; p++) {
|
pageNode = domConstruct.create('div', {
|
'class': 'page'
|
});
|
this.createPageItems(p, pageNode, gridParam);
|
this.viewStack.addView(pageNode);
|
|
if (pages > 1) {
|
pointNode = domConstruct.create('div', {
|
'class': 'point'
|
}, this.pointsNode);
|
this.own(on(pointNode, 'click', lang.hitch(this, this._onPageNodeClick, p)));
|
}
|
|
this.pages.push({
|
pageNode: pageNode,
|
pointNode: pointNode
|
});
|
}
|
|
if (this.viewStack.views.length > 0) {
|
this._selectPage(0);
|
}
|
},
|
|
_onPageNodeClick: function(p) {
|
this._selectPage(p);
|
},
|
|
_selectPage: function(p) {
|
if (this.pages.length > 1) {
|
query('.point', this.domNode).removeClass('point-selected');
|
html.addClass(this.pages[p].pointNode, 'point-selected');
|
}
|
this.viewStack.switchView(this.pages[p].pageNode);
|
},
|
|
createPageItems: function(page, pageNode, gridParam) {
|
var count, pageSize, i, b, e, empty;
|
count = this.items.length;
|
pageSize = gridParam.rows * gridParam.cols;
|
b = page * pageSize;
|
e = (page + 1) * pageSize;
|
empty = e - count;
|
e = Math.min(e, count);
|
for (i = b; i < e; i++) {
|
this.createItemNode(i, pageNode);
|
}
|
for (i = count; i < count + empty; i++) {
|
this.createEmptyItemNode(pageNode);
|
}
|
},
|
|
createItemNode: function(i, pageNode) {
|
var node, item;
|
item = this.items[i];
|
node = domConstruct.create('div', {
|
'class': 'icon-node jimu-float-leading jimu-main-background',
|
title: item.label,
|
settingId: item.id,
|
'data-widget-name': item.name
|
}, pageNode);
|
|
var imgNode = domConstruct.create('img', {
|
'src': item.icon
|
}, node);
|
|
if(window.isRTL && item.mirrorIconForRTL){
|
html.addClass(imgNode, 'jimu-flipx');
|
}
|
|
domConstruct.create('div', {
|
'class': 'node-label',
|
'title': item.label,
|
'innerHTML': utils.stripHTML(item.label)
|
}, node);
|
|
node.config = item;
|
|
this.own(on(node, 'click', lang.hitch(this, function() {
|
this.onNodeClicked(node);
|
})));
|
|
this.nodes.push(node);
|
},
|
|
createEmptyItemNode: function(pageNode) {
|
var node;
|
node = domConstruct.create('div', {
|
'class': 'icon-node jimu-float-leading jimu-main-background'
|
}, pageNode);
|
this.nodes.push(node);
|
return node;
|
},
|
|
createCloseBtn: function() {
|
var node;
|
node = domConstruct.create('div', {
|
'class': 'close'
|
}, this.domNode);
|
domConstruct.create('div', {
|
'class': 'close-inner jimu-main-background'
|
}, node);
|
|
on(node, 'click', lang.hitch(this, function() {
|
this.hide();
|
}));
|
|
return node;
|
},
|
|
hide: function() {
|
html.setStyle(this.domNode, 'display', 'none');
|
},
|
|
show: function() {
|
html.setStyle(this.domNode, 'display', 'block');
|
},
|
|
onNodeClicked: function(node) {
|
/* jshint unused: false*/
|
this.hide();
|
},
|
|
_calculateGridParam: function(){
|
var mapBox, minLen, position, rows, cols, cellSize, iconScaled = false,
|
showLabel = true;
|
mapBox = html.getContentBox(jimuConfig.mapId);
|
minLen = Math.min(mapBox.w, mapBox.h) - MIN_MARGIN * 2;
|
|
//calculate node width
|
if(minLen >= NORMAL_WIDTH * MIN_ROWCOL){
|
cellSize = NORMAL_WIDTH;
|
}else{
|
cellSize = Math.floor(minLen / MIN_ROWCOL);
|
|
if(cellSize < MIN_NODE_WIDTH){
|
return null;
|
}
|
|
iconScaled = true;
|
|
if(cellSize < NORMAL_MIN_WIDTH){
|
showLabel = false;
|
}
|
}
|
|
//calculate rows and columns
|
rows = Math.floor((mapBox.h - MIN_MARGIN * 2) / cellSize);
|
cols = Math.floor((mapBox.w - MIN_MARGIN * 2) / cellSize);
|
rows = rows > MAX_ROWCOL ? MAX_ROWCOL : rows;
|
cols = cols > MAX_ROWCOL ? MAX_ROWCOL : cols;
|
rows = rows < MIN_ROWCOL ? MIN_ROWCOL : rows;
|
cols = rows < MIN_ROWCOL ? MIN_ROWCOL : cols;
|
|
//calculate position
|
position = {
|
top: (mapBox.h - cellSize * rows) / 2,
|
bottom: (mapBox.h - cellSize * rows) / 2,
|
left: (mapBox.w - cellSize * cols) / 2,
|
right: (mapBox.w - cellSize * cols) / 2,
|
width: cellSize * cols - this.margin * (cols - 1) / 2,
|
height: cellSize * rows - this.margin * (rows - 1) / 2,
|
zIndex: 111
|
};
|
|
return {
|
rows: rows,
|
cols: cols,
|
cellSize: cellSize,
|
iconScaled: iconScaled,
|
showLabel: showLabel,
|
position: position
|
};
|
}
|
});
|
});
|
