mirror of
https://github.com/umap-project/umap.git
synced 2025-05-04 13:41:49 +02:00
first step moving ES6
This commit is contained in:
parent
705d0cbb73
commit
b73aa38918
6 changed files with 2796 additions and 454 deletions
9
.babelrc
Normal file
9
.babelrc
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
{
|
||||||
|
"presets": [
|
||||||
|
["env", {
|
||||||
|
"targets": {
|
||||||
|
"ie": 8
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
]
|
||||||
|
}
|
4
Makefile
4
Makefile
|
@ -44,12 +44,14 @@ ui:
|
||||||
installjs:
|
installjs:
|
||||||
npm install
|
npm install
|
||||||
testjsfx:
|
testjsfx:
|
||||||
firefox umap/static/umap/test/index.html
|
/Applications/Firefox.app/Contents/MacOS/firefox umap/static/umap/test/index.html
|
||||||
testjs: node_modules
|
testjs: node_modules
|
||||||
@./node_modules/mocha-phantomjs/bin/mocha-phantomjs --view 1024x768 umap/static/umap/test/index.html
|
@./node_modules/mocha-phantomjs/bin/mocha-phantomjs --view 1024x768 umap/static/umap/test/index.html
|
||||||
tx_push:
|
tx_push:
|
||||||
tx push -s
|
tx push -s
|
||||||
tx_pull:
|
tx_pull:
|
||||||
tx pull
|
tx pull
|
||||||
|
build:
|
||||||
|
npm run build
|
||||||
|
|
||||||
.PHONY: ui
|
.PHONY: ui
|
||||||
|
|
2712
package-lock.json
generated
2712
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
@ -6,6 +6,8 @@
|
||||||
"test": "test"
|
"test": "test"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"babel-cli": "^6.26.0",
|
||||||
|
"babel-preset-env": "^1.7.0",
|
||||||
"chai": "^3.3.0",
|
"chai": "^3.3.0",
|
||||||
"grunt": "^0.4.4",
|
"grunt": "^0.4.4",
|
||||||
"grunt-cli": "^1.2.0",
|
"grunt-cli": "^1.2.0",
|
||||||
|
@ -21,7 +23,7 @@
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"test": "firefox test/index.html",
|
"test": "firefox test/index.html",
|
||||||
"build": "grunt"
|
"build": "npm babel umap/static/umap/src/ --out-dir umap/static/umap/js/"
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
|
|
|
@ -1,176 +1,202 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||||
|
|
||||||
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||||
|
|
||||||
|
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||||
|
|
||||||
|
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Modals
|
* Modals
|
||||||
*/
|
*/
|
||||||
L.U.UI = L.Evented.extend({
|
|
||||||
|
|
||||||
ALERTS: Array(),
|
var UI = function (_L$Evented) {
|
||||||
ALERT_ID: null,
|
_inherits(UI, _L$Evented);
|
||||||
TOOLTIP_ID: null,
|
|
||||||
|
|
||||||
initialize: function (parent) {
|
function UI() {
|
||||||
this.parent = parent;
|
_classCallCheck(this, UI);
|
||||||
this.container = L.DomUtil.create('div', 'leaflet-ui-container', this.parent);
|
|
||||||
L.DomEvent.disableClickPropagation(this.container);
|
|
||||||
L.DomEvent.on(this.container, 'contextmenu', L.DomEvent.stopPropagation); // Do not activate our custom context menu.
|
|
||||||
L.DomEvent.on(this.container, 'mousewheel', L.DomEvent.stopPropagation);
|
|
||||||
L.DomEvent.on(this.container, 'MozMousePixelScroll', L.DomEvent.stopPropagation);
|
|
||||||
this._panel = L.DomUtil.create('div', '', this.container);
|
|
||||||
this._panel.id = 'umap-ui-container';
|
|
||||||
this._alert = L.DomUtil.create('div', 'with-transition', this.container);
|
|
||||||
this._alert.id = 'umap-alert-container';
|
|
||||||
this._tooltip = L.DomUtil.create('div', '', this.container);
|
|
||||||
this._tooltip.id = 'umap-tooltip-container';
|
|
||||||
},
|
|
||||||
|
|
||||||
resetPanelClassName: function () {
|
var _this = _possibleConstructorReturn(this, (UI.__proto__ || Object.getPrototypeOf(UI)).apply(this, arguments));
|
||||||
this._panel.className = 'with-transition';
|
|
||||||
},
|
|
||||||
|
|
||||||
openPanel: function (e) {
|
_this.ALERTS = Array();
|
||||||
this.fire('panel:open');
|
_this.ALERT_ID = null;
|
||||||
// We reset all because we can't know which class has been added
|
_this.TOOLTIP_ID = null;
|
||||||
// by previous ui processes...
|
return _this;
|
||||||
this.resetPanelClassName();
|
}
|
||||||
this._panel.innerHTML = '';
|
|
||||||
var actionsContainer = L.DomUtil.create('ul', 'toolbox', this._panel);
|
_createClass(UI, [{
|
||||||
var body = L.DomUtil.create('div', 'body', this._panel);
|
key: 'initialize',
|
||||||
if (e.data.html.nodeType && e.data.html.nodeType === 1) body.appendChild(e.data.html);
|
value: function initialize(parent) {
|
||||||
else body.innerHTML = e.data.html;
|
this.parent = parent;
|
||||||
var closeLink = L.DomUtil.create('li', 'umap-close-link', actionsContainer);
|
this.container = L.DomUtil.create('div', 'leaflet-ui-container', this.parent);
|
||||||
L.DomUtil.add('i', 'umap-close-icon', closeLink);
|
L.DomEvent.disableClickPropagation(this.container);
|
||||||
var label = L.DomUtil.create('span', '', closeLink);
|
L.DomEvent.on(this.container, 'contextmenu', L.DomEvent.stopPropagation); // Do not activate our custom context menu.
|
||||||
label.title = label.innerHTML = L._('Close');
|
L.DomEvent.on(this.container, 'mousewheel', L.DomEvent.stopPropagation);
|
||||||
if (e.actions) {
|
L.DomEvent.on(this.container, 'MozMousePixelScroll', L.DomEvent.stopPropagation);
|
||||||
for (var i = 0; i < e.actions.length; i++) {
|
this._panel = L.DomUtil.create('div', '', this.container);
|
||||||
actionsContainer.appendChild(e.actions[i]);
|
this._panel.id = 'umap-ui-container';
|
||||||
}
|
this._alert = L.DomUtil.create('div', 'with-transition', this.container);
|
||||||
|
this._alert.id = 'umap-alert-container';
|
||||||
|
this._tooltip = L.DomUtil.create('div', '', this.container);
|
||||||
|
this._tooltip.id = 'umap-tooltip-container';
|
||||||
}
|
}
|
||||||
if (e.className) L.DomUtil.addClass(this._panel, e.className);
|
}, {
|
||||||
if (L.DomUtil.hasClass(this.parent, 'umap-ui')) {
|
key: 'resetPanelClassName',
|
||||||
// Already open.
|
value: function resetPanelClassName() {
|
||||||
this.fire('panel:ready');
|
this._panel.className = 'with-transition';
|
||||||
} else {
|
}
|
||||||
L.DomEvent.once(this._panel, 'transitionend', function (e) {
|
}, {
|
||||||
|
key: 'openPanel',
|
||||||
|
value: function openPanel(e) {
|
||||||
|
this.fire('panel:open');
|
||||||
|
// We reset all because we can't know which class has been added
|
||||||
|
// by previous ui processes...
|
||||||
|
this.resetPanelClassName();
|
||||||
|
this._panel.innerHTML = '';
|
||||||
|
var actionsContainer = L.DomUtil.create('ul', 'toolbox', this._panel);
|
||||||
|
var body = L.DomUtil.create('div', 'body', this._panel);
|
||||||
|
if (e.data.html.nodeType && e.data.html.nodeType === 1) body.appendChild(e.data.html);else body.innerHTML = e.data.html;
|
||||||
|
var closeLink = L.DomUtil.create('li', 'umap-close-link', actionsContainer);
|
||||||
|
L.DomUtil.add('i', 'umap-close-icon', closeLink);
|
||||||
|
var label = L.DomUtil.create('span', '', closeLink);
|
||||||
|
label.title = label.innerHTML = L._('Close');
|
||||||
|
if (e.actions) {
|
||||||
|
for (var i = 0; i < e.actions.length; i++) {
|
||||||
|
actionsContainer.appendChild(e.actions[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (e.className) L.DomUtil.addClass(this._panel, e.className);
|
||||||
|
if (L.DomUtil.hasClass(this.parent, 'umap-ui')) {
|
||||||
|
// Already open.
|
||||||
this.fire('panel:ready');
|
this.fire('panel:ready');
|
||||||
}, this);
|
} else {
|
||||||
L.DomUtil.addClass(this.parent, 'umap-ui');
|
L.DomEvent.once(this._panel, 'transitionend', function (e) {
|
||||||
}
|
this.fire('panel:ready');
|
||||||
L.DomEvent.on(closeLink, 'click', this.closePanel, this);
|
}, this);
|
||||||
},
|
L.DomUtil.addClass(this.parent, 'umap-ui');
|
||||||
|
|
||||||
closePanel: function () {
|
|
||||||
this.resetPanelClassName();
|
|
||||||
L.DomUtil.removeClass(this.parent, 'umap-ui');
|
|
||||||
this.fire('panel:closed');
|
|
||||||
},
|
|
||||||
|
|
||||||
alert: function (e) {
|
|
||||||
if (L.DomUtil.hasClass(this.parent, 'umap-alert')) this.ALERTS.push(e);
|
|
||||||
else this.popAlert(e);
|
|
||||||
},
|
|
||||||
|
|
||||||
popAlert: function (e) {
|
|
||||||
var self = this;
|
|
||||||
if(!e) {
|
|
||||||
if (this.ALERTS.length) e = this.ALERTS.pop();
|
|
||||||
else return;
|
|
||||||
}
|
|
||||||
var timeoutID,
|
|
||||||
level_class = e.level && e.level == 'info'? 'info': 'error';
|
|
||||||
this._alert.innerHTML = '';
|
|
||||||
L.DomUtil.addClass(this.parent, 'umap-alert');
|
|
||||||
L.DomUtil.addClass(this._alert, level_class);
|
|
||||||
var close = function () {
|
|
||||||
if (timeoutID !== this.ALERT_ID) { return;} // Another alert has been forced
|
|
||||||
this._alert.innerHTML = '';
|
|
||||||
L.DomUtil.removeClass(this.parent, 'umap-alert');
|
|
||||||
L.DomUtil.removeClass(this._alert, level_class);
|
|
||||||
if (timeoutID) window.clearTimeout(timeoutID);
|
|
||||||
this.popAlert();
|
|
||||||
};
|
|
||||||
var closeLink = L.DomUtil.create('a', 'umap-close-link', this._alert);
|
|
||||||
closeLink.href = '#';
|
|
||||||
L.DomUtil.add('i', 'umap-close-icon', closeLink);
|
|
||||||
var label = L.DomUtil.create('span', '', closeLink);
|
|
||||||
label.title = label.innerHTML = L._('Close');
|
|
||||||
L.DomEvent.on(closeLink, 'click', L.DomEvent.stop)
|
|
||||||
.on(closeLink, 'click', close, this);
|
|
||||||
L.DomUtil.add('div', '', this._alert, e.content);
|
|
||||||
if (e.actions) {
|
|
||||||
var action, el;
|
|
||||||
for (var i = 0; i < e.actions.length; i++) {
|
|
||||||
action = e.actions[i];
|
|
||||||
el = L.DomUtil.element('a', {'className': 'umap-action'}, this._alert);
|
|
||||||
el.href = '#';
|
|
||||||
el.innerHTML = action.label;
|
|
||||||
L.DomEvent.on(el, 'click', L.DomEvent.stop)
|
|
||||||
.on(el, 'click', close, this);
|
|
||||||
if (action.callback) L.DomEvent.on(el, 'click', action.callback, action.callbackContext || this.map);
|
|
||||||
}
|
}
|
||||||
|
L.DomEvent.on(closeLink, 'click', this.closePanel, this);
|
||||||
}
|
}
|
||||||
self.ALERT_ID = timeoutID = window.setTimeout(L.bind(close, this), e.duration || 3000);
|
}, {
|
||||||
},
|
key: 'closePanel',
|
||||||
|
value: function closePanel() {
|
||||||
|
this.resetPanelClassName();
|
||||||
|
L.DomUtil.removeClass(this.parent, 'umap-ui');
|
||||||
|
this.fire('panel:closed');
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: 'alert',
|
||||||
|
value: function alert(e) {
|
||||||
|
if (L.DomUtil.hasClass(this.parent, 'umap-alert')) this.ALERTS.push(e);else this.popAlert(e);
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: 'popAlert',
|
||||||
|
value: function popAlert(e) {
|
||||||
|
if (!e) {
|
||||||
|
if (this.ALERTS.length) e = this.ALERTS.pop();else return;
|
||||||
|
}
|
||||||
|
var timeoutID,
|
||||||
|
level_class = e.level && e.level == 'info' ? 'info' : 'error';
|
||||||
|
this._alert.innerHTML = '';
|
||||||
|
L.DomUtil.addClass(this.parent, 'umap-alert');
|
||||||
|
L.DomUtil.addClass(this._alert, level_class);
|
||||||
|
var close = function close() {
|
||||||
|
if (timeoutID !== this.ALERT_ID) {
|
||||||
|
return;
|
||||||
|
} // Another alert has been forced
|
||||||
|
this._alert.innerHTML = '';
|
||||||
|
L.DomUtil.removeClass(this.parent, 'umap-alert');
|
||||||
|
L.DomUtil.removeClass(this._alert, level_class);
|
||||||
|
if (timeoutID) window.clearTimeout(timeoutID);
|
||||||
|
this.popAlert();
|
||||||
|
};
|
||||||
|
var closeLink = L.DomUtil.create('a', 'umap-close-link', this._alert);
|
||||||
|
closeLink.href = '#';
|
||||||
|
L.DomUtil.add('i', 'umap-close-icon', closeLink);
|
||||||
|
var label = L.DomUtil.create('span', '', closeLink);
|
||||||
|
label.title = label.innerHTML = L._('Close');
|
||||||
|
L.DomEvent.on(closeLink, 'click', L.DomEvent.stop).on(closeLink, 'click', close, this);
|
||||||
|
L.DomUtil.add('div', '', this._alert, e.content);
|
||||||
|
if (e.actions) {
|
||||||
|
var action, el;
|
||||||
|
for (var i = 0; i < e.actions.length; i++) {
|
||||||
|
action = e.actions[i];
|
||||||
|
el = L.DomUtil.element('a', { 'className': 'umap-action' }, this._alert);
|
||||||
|
el.href = '#';
|
||||||
|
el.innerHTML = action.label;
|
||||||
|
L.DomEvent.on(el, 'click', L.DomEvent.stop).on(el, 'click', close, this);
|
||||||
|
if (action.callback) L.DomEvent.on(el, 'click', action.callback, action.callbackContext || this.map);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.ALERT_ID = timeoutID = window.setTimeout(L.bind(close, this), e.duration || 3000);
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: 'tooltip',
|
||||||
|
value: function tooltip(e) {
|
||||||
|
this.TOOLTIP_ID = Math.random();
|
||||||
|
var id = this.TOOLTIP_ID;
|
||||||
|
L.DomUtil.addClass(this.parent, 'umap-tooltip');
|
||||||
|
if (e.anchor && e.position === 'top') this.anchorTooltipTop(e.anchor);else if (e.anchor && e.position === 'left') this.anchorTooltipLeft(e.anchor);else this.anchorTooltipAbsolute();
|
||||||
|
this._tooltip.innerHTML = e.content;
|
||||||
|
function closeIt() {
|
||||||
|
this.closeTooltip(id);
|
||||||
|
}
|
||||||
|
if (e.anchor) L.DomEvent.once(e.anchor, 'mouseout', closeIt, this);
|
||||||
|
if (e.duration !== Infinity) window.setTimeout(L.bind(closeIt, this), e.duration || 3000);
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: 'anchorTooltipAbsolute',
|
||||||
|
value: function anchorTooltipAbsolute() {
|
||||||
|
this._tooltip.className = '';
|
||||||
|
var left = this.parent.offsetLeft + this.parent.clientWidth / 2 - this._tooltip.clientWidth / 2,
|
||||||
|
top = this.parent.offsetTop + 75;
|
||||||
|
this.setTooltipPosition({ top: top, left: left });
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: 'anchorTooltipTop',
|
||||||
|
value: function anchorTooltipTop(el) {
|
||||||
|
this._tooltip.className = 'tooltip-top';
|
||||||
|
var coords = this.getPosition(el);
|
||||||
|
this.setTooltipPosition({ left: coords.left - 10, bottom: this.getDocHeight() - coords.top + 11 });
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: 'anchorTooltipLeft',
|
||||||
|
value: function anchorTooltipLeft(el) {
|
||||||
|
this._tooltip.className = 'tooltip-left';
|
||||||
|
var coords = this.getPosition(el);
|
||||||
|
this.setTooltipPosition({ top: coords.top, right: document.documentElement.offsetWidth - coords.left + 11 });
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: 'closeTooltip',
|
||||||
|
value: function closeTooltip(id) {
|
||||||
|
if (id && id !== this.TOOLTIP_ID) return;
|
||||||
|
this._tooltip.innerHTML = '';
|
||||||
|
L.DomUtil.removeClass(this.parent, 'umap-tooltip');
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: 'getPosition',
|
||||||
|
value: function getPosition(el) {
|
||||||
|
return el.getBoundingClientRect();
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: 'setTooltipPosition',
|
||||||
|
value: function setTooltipPosition(coords) {
|
||||||
|
if (coords.left) this._tooltip.style.left = coords.left + 'px';else this._tooltip.style.left = 'initial';
|
||||||
|
if (coords.right) this._tooltip.style.right = coords.right + 'px';else this._tooltip.style.right = 'initial';
|
||||||
|
if (coords.top) this._tooltip.style.top = coords.top + 'px';else this._tooltip.style.top = 'initial';
|
||||||
|
if (coords.bottom) this._tooltip.style.bottom = coords.bottom + 'px';else this._tooltip.style.bottom = 'initial';
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: 'getDocHeight',
|
||||||
|
value: function getDocHeight() {
|
||||||
|
var D = document;
|
||||||
|
return Math.max(D.body.scrollHeight, D.documentElement.scrollHeight, D.body.offsetHeight, D.documentElement.offsetHeight, D.body.clientHeight, D.documentElement.clientHeight);
|
||||||
|
}
|
||||||
|
}]);
|
||||||
|
|
||||||
tooltip: function (e) {
|
return UI;
|
||||||
this.TOOLTIP_ID = Math.random();
|
}(L.Evented);
|
||||||
var id = this.TOOLTIP_ID;
|
|
||||||
L.DomUtil.addClass(this.parent, 'umap-tooltip');
|
|
||||||
if (e.anchor && e.position === 'top') this.anchorTooltipTop(e.anchor);
|
|
||||||
else if (e.anchor && e.position === 'left') this.anchorTooltipLeft(e.anchor);
|
|
||||||
else this.anchorTooltipAbsolute();
|
|
||||||
this._tooltip.innerHTML = e.content;
|
|
||||||
function closeIt () { this.closeTooltip(id); }
|
|
||||||
if (e.anchor) L.DomEvent.once(e.anchor, 'mouseout', closeIt, this);
|
|
||||||
if (e.duration !== Infinity) window.setTimeout(L.bind(closeIt, this), e.duration || 3000);
|
|
||||||
},
|
|
||||||
|
|
||||||
anchorTooltipAbsolute: function () {
|
L.U.UI = UI;
|
||||||
this._tooltip.className = '';
|
|
||||||
var left = this.parent.offsetLeft + (this.parent.clientWidth / 2) - (this._tooltip.clientWidth / 2),
|
|
||||||
top = this.parent.offsetTop + 75;
|
|
||||||
this.setTooltipPosition({top: top, left: left});
|
|
||||||
},
|
|
||||||
|
|
||||||
anchorTooltipTop: function (el) {
|
|
||||||
this._tooltip.className = 'tooltip-top';
|
|
||||||
var coords = this.getPosition(el);
|
|
||||||
this.setTooltipPosition({left: coords.left - 10, bottom: this.getDocHeight() - coords.top + 11});
|
|
||||||
},
|
|
||||||
|
|
||||||
anchorTooltipLeft: function (el) {
|
|
||||||
this._tooltip.className = 'tooltip-left';
|
|
||||||
var coords = this.getPosition(el);
|
|
||||||
this.setTooltipPosition({top: coords.top, right: document.documentElement.offsetWidth - coords.left + 11});
|
|
||||||
},
|
|
||||||
|
|
||||||
closeTooltip: function (id) {
|
|
||||||
if (id && id !== this.TOOLTIP_ID) return;
|
|
||||||
this._tooltip.innerHTML = '';
|
|
||||||
L.DomUtil.removeClass(this.parent, 'umap-tooltip');
|
|
||||||
},
|
|
||||||
|
|
||||||
getPosition: function (el) {
|
|
||||||
return el.getBoundingClientRect();
|
|
||||||
},
|
|
||||||
|
|
||||||
setTooltipPosition: function (coords) {
|
|
||||||
if (coords.left) this._tooltip.style.left = coords.left + 'px';
|
|
||||||
else this._tooltip.style.left = 'initial';
|
|
||||||
if (coords.right) this._tooltip.style.right = coords.right + 'px';
|
|
||||||
else this._tooltip.style.right = 'initial';
|
|
||||||
if (coords.top) this._tooltip.style.top = coords.top + 'px';
|
|
||||||
else this._tooltip.style.top = 'initial';
|
|
||||||
if (coords.bottom) this._tooltip.style.bottom = coords.bottom + 'px';
|
|
||||||
else this._tooltip.style.bottom = 'initial';
|
|
||||||
},
|
|
||||||
|
|
||||||
getDocHeight: function () {
|
|
||||||
var D = document;
|
|
||||||
return Math.max(
|
|
||||||
D.body.scrollHeight, D.documentElement.scrollHeight,
|
|
||||||
D.body.offsetHeight, D.documentElement.offsetHeight,
|
|
||||||
D.body.clientHeight, D.documentElement.clientHeight
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
});
|
|
169
umap/static/umap/src/umap.ui.js
Normal file
169
umap/static/umap/src/umap.ui.js
Normal file
|
@ -0,0 +1,169 @@
|
||||||
|
/*
|
||||||
|
* Modals
|
||||||
|
*/
|
||||||
|
|
||||||
|
class UI extends L.Evented {
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super(...arguments);
|
||||||
|
this.ALERTS = Array();
|
||||||
|
this.ALERT_ID = null;
|
||||||
|
this.TOOLTIP_ID = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
initialize(parent) {
|
||||||
|
this.parent = parent;
|
||||||
|
this.container = L.DomUtil.create('div', 'leaflet-ui-container', this.parent);
|
||||||
|
L.DomEvent.disableClickPropagation(this.container);
|
||||||
|
L.DomEvent.on(this.container, 'contextmenu', L.DomEvent.stopPropagation); // Do not activate our custom context menu.
|
||||||
|
L.DomEvent.on(this.container, 'mousewheel', L.DomEvent.stopPropagation);
|
||||||
|
L.DomEvent.on(this.container, 'MozMousePixelScroll', L.DomEvent.stopPropagation);
|
||||||
|
this._panel = L.DomUtil.create('div', '', this.container);
|
||||||
|
this._panel.id = 'umap-ui-container';
|
||||||
|
this._alert = L.DomUtil.create('div', 'with-transition', this.container);
|
||||||
|
this._alert.id = 'umap-alert-container';
|
||||||
|
this._tooltip = L.DomUtil.create('div', '', this.container);
|
||||||
|
this._tooltip.id = 'umap-tooltip-container';
|
||||||
|
}
|
||||||
|
|
||||||
|
resetPanelClassName() {
|
||||||
|
this._panel.className = 'with-transition';
|
||||||
|
}
|
||||||
|
|
||||||
|
openPanel(e) {
|
||||||
|
this.fire('panel:open');
|
||||||
|
// We reset all because we can't know which class has been added
|
||||||
|
// by previous ui processes...
|
||||||
|
this.resetPanelClassName();
|
||||||
|
this._panel.innerHTML = '';
|
||||||
|
var actionsContainer = L.DomUtil.create('ul', 'toolbox', this._panel);
|
||||||
|
var body = L.DomUtil.create('div', 'body', this._panel);
|
||||||
|
if (e.data.html.nodeType && e.data.html.nodeType === 1) body.appendChild(e.data.html);else body.innerHTML = e.data.html;
|
||||||
|
var closeLink = L.DomUtil.create('li', 'umap-close-link', actionsContainer);
|
||||||
|
L.DomUtil.add('i', 'umap-close-icon', closeLink);
|
||||||
|
var label = L.DomUtil.create('span', '', closeLink);
|
||||||
|
label.title = label.innerHTML = L._('Close');
|
||||||
|
if (e.actions) {
|
||||||
|
for (var i = 0; i < e.actions.length; i++) {
|
||||||
|
actionsContainer.appendChild(e.actions[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (e.className) L.DomUtil.addClass(this._panel, e.className);
|
||||||
|
if (L.DomUtil.hasClass(this.parent, 'umap-ui')) {
|
||||||
|
// Already open.
|
||||||
|
this.fire('panel:ready');
|
||||||
|
} else {
|
||||||
|
L.DomEvent.once(this._panel, 'transitionend', function (e) {
|
||||||
|
this.fire('panel:ready');
|
||||||
|
}, this);
|
||||||
|
L.DomUtil.addClass(this.parent, 'umap-ui');
|
||||||
|
}
|
||||||
|
L.DomEvent.on(closeLink, 'click', this.closePanel, this);
|
||||||
|
}
|
||||||
|
|
||||||
|
closePanel() {
|
||||||
|
this.resetPanelClassName();
|
||||||
|
L.DomUtil.removeClass(this.parent, 'umap-ui');
|
||||||
|
this.fire('panel:closed');
|
||||||
|
}
|
||||||
|
|
||||||
|
alert(e) {
|
||||||
|
if (L.DomUtil.hasClass(this.parent, 'umap-alert')) this.ALERTS.push(e);else this.popAlert(e);
|
||||||
|
}
|
||||||
|
|
||||||
|
popAlert(e) {
|
||||||
|
if (!e) {
|
||||||
|
if (this.ALERTS.length) e = this.ALERTS.pop();else return;
|
||||||
|
}
|
||||||
|
var timeoutID,
|
||||||
|
level_class = e.level && e.level == 'info' ? 'info' : 'error';
|
||||||
|
this._alert.innerHTML = '';
|
||||||
|
L.DomUtil.addClass(this.parent, 'umap-alert');
|
||||||
|
L.DomUtil.addClass(this._alert, level_class);
|
||||||
|
var close = function () {
|
||||||
|
if (timeoutID !== this.ALERT_ID) {
|
||||||
|
return;
|
||||||
|
} // Another alert has been forced
|
||||||
|
this._alert.innerHTML = '';
|
||||||
|
L.DomUtil.removeClass(this.parent, 'umap-alert');
|
||||||
|
L.DomUtil.removeClass(this._alert, level_class);
|
||||||
|
if (timeoutID) window.clearTimeout(timeoutID);
|
||||||
|
this.popAlert();
|
||||||
|
};
|
||||||
|
var closeLink = L.DomUtil.create('a', 'umap-close-link', this._alert);
|
||||||
|
closeLink.href = '#';
|
||||||
|
L.DomUtil.add('i', 'umap-close-icon', closeLink);
|
||||||
|
var label = L.DomUtil.create('span', '', closeLink);
|
||||||
|
label.title = label.innerHTML = L._('Close');
|
||||||
|
L.DomEvent.on(closeLink, 'click', L.DomEvent.stop).on(closeLink, 'click', close, this);
|
||||||
|
L.DomUtil.add('div', '', this._alert, e.content);
|
||||||
|
if (e.actions) {
|
||||||
|
var action, el;
|
||||||
|
for (var i = 0; i < e.actions.length; i++) {
|
||||||
|
action = e.actions[i];
|
||||||
|
el = L.DomUtil.element('a', { 'className': 'umap-action' }, this._alert);
|
||||||
|
el.href = '#';
|
||||||
|
el.innerHTML = action.label;
|
||||||
|
L.DomEvent.on(el, 'click', L.DomEvent.stop).on(el, 'click', close, this);
|
||||||
|
if (action.callback) L.DomEvent.on(el, 'click', action.callback, action.callbackContext || this.map);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.ALERT_ID = timeoutID = window.setTimeout(L.bind(close, this), e.duration || 3000);
|
||||||
|
}
|
||||||
|
|
||||||
|
tooltip(e) {
|
||||||
|
this.TOOLTIP_ID = Math.random();
|
||||||
|
var id = this.TOOLTIP_ID;
|
||||||
|
L.DomUtil.addClass(this.parent, 'umap-tooltip');
|
||||||
|
if (e.anchor && e.position === 'top') this.anchorTooltipTop(e.anchor);else if (e.anchor && e.position === 'left') this.anchorTooltipLeft(e.anchor);else this.anchorTooltipAbsolute();
|
||||||
|
this._tooltip.innerHTML = e.content;
|
||||||
|
function closeIt() {
|
||||||
|
this.closeTooltip(id);
|
||||||
|
}
|
||||||
|
if (e.anchor) L.DomEvent.once(e.anchor, 'mouseout', closeIt, this);
|
||||||
|
if (e.duration !== Infinity) window.setTimeout(L.bind(closeIt, this), e.duration || 3000);
|
||||||
|
}
|
||||||
|
|
||||||
|
anchorTooltipAbsolute() {
|
||||||
|
this._tooltip.className = '';
|
||||||
|
var left = this.parent.offsetLeft + this.parent.clientWidth / 2 - this._tooltip.clientWidth / 2,
|
||||||
|
top = this.parent.offsetTop + 75;
|
||||||
|
this.setTooltipPosition({ top: top, left: left });
|
||||||
|
}
|
||||||
|
|
||||||
|
anchorTooltipTop(el) {
|
||||||
|
this._tooltip.className = 'tooltip-top';
|
||||||
|
var coords = this.getPosition(el);
|
||||||
|
this.setTooltipPosition({ left: coords.left - 10, bottom: this.getDocHeight() - coords.top + 11 });
|
||||||
|
}
|
||||||
|
|
||||||
|
anchorTooltipLeft(el) {
|
||||||
|
this._tooltip.className = 'tooltip-left';
|
||||||
|
var coords = this.getPosition(el);
|
||||||
|
this.setTooltipPosition({ top: coords.top, right: document.documentElement.offsetWidth - coords.left + 11 });
|
||||||
|
}
|
||||||
|
|
||||||
|
closeTooltip(id) {
|
||||||
|
if (id && id !== this.TOOLTIP_ID) return;
|
||||||
|
this._tooltip.innerHTML = '';
|
||||||
|
L.DomUtil.removeClass(this.parent, 'umap-tooltip');
|
||||||
|
}
|
||||||
|
|
||||||
|
getPosition(el) {
|
||||||
|
return el.getBoundingClientRect();
|
||||||
|
}
|
||||||
|
|
||||||
|
setTooltipPosition(coords) {
|
||||||
|
if (coords.left) this._tooltip.style.left = coords.left + 'px';else this._tooltip.style.left = 'initial';
|
||||||
|
if (coords.right) this._tooltip.style.right = coords.right + 'px';else this._tooltip.style.right = 'initial';
|
||||||
|
if (coords.top) this._tooltip.style.top = coords.top + 'px';else this._tooltip.style.top = 'initial';
|
||||||
|
if (coords.bottom) this._tooltip.style.bottom = coords.bottom + 'px';else this._tooltip.style.bottom = 'initial';
|
||||||
|
}
|
||||||
|
|
||||||
|
getDocHeight() {
|
||||||
|
var D = document;
|
||||||
|
return Math.max(D.body.scrollHeight, D.documentElement.scrollHeight, D.body.offsetHeight, D.documentElement.offsetHeight, D.body.clientHeight, D.documentElement.clientHeight);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
L.U.UI = UI;
|
Loading…
Reference in a new issue