almet/umap
1
0
Fork 0
mirror of https://github.com/umap-project/umap.git synced 2025-05-04 13:41:49 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

first step moving ES6

Browse source
This commit is contained in:
vinyll 2018-07-07 17:48:52 +02:00
parent 705d0cbb73
commit b73aa38918
6 changed files with 2796 additions and 454 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
.babelrc Normal file
View file

@ -0,0 +1,9 @@
{
"presets": [
["env", {
"targets": {
"ie": 8
}
}]
]
}

4
Makefile
View file

@ -44,12 +44,14 @@ ui:
installjs:
npm install
testjsfx:
firefox umap/static/umap/test/index.html
/Applications/Firefox.app/Contents/MacOS/firefox umap/static/umap/test/index.html
testjs: node_modules
@./node_modules/mocha-phantomjs/bin/mocha-phantomjs --view 1024x768 umap/static/umap/test/index.html
tx_push:
tx push -s
tx_pull:
tx pull
build:
npm run build
.PHONY: ui

2712
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

4
package.json
View file

@ -6,6 +6,8 @@
"test": "test"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.7.0",
"chai": "^3.3.0",
"grunt": "^0.4.4",
"grunt-cli": "^1.2.0",
@ -21,7 +23,7 @@
},
"scripts": {
"test": "firefox test/index.html",
"build": "grunt"
"build": "npm babel umap/static/umap/src/ --out-dir umap/static/umap/js/"
},
"repository": {
"type": "git",

184
umap/static/umap/js/umap.ui.js
View file

@ -1,13 +1,34 @@
'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
*/
L.U.UI = L.Evented.extend({
ALERTS: Array(),
ALERT_ID: null,
TOOLTIP_ID: null,
var UI = function (_L$Evented) {
_inherits(UI, _L$Evented);
initialize: function (parent) {
function UI() {
_classCallCheck(this, UI);
var _this = _possibleConstructorReturn(this, (UI.__proto__ || Object.getPrototypeOf(UI)).apply(this, arguments));
_this.ALERTS = Array();
_this.ALERT_ID = null;
_this.TOOLTIP_ID = null;
return _this;
}
_createClass(UI, [{
key: 'initialize',
value: function initialize(parent) {
this.parent = parent;
this.container = L.DomUtil.create('div', 'leaflet-ui-container', this.parent);
L.DomEvent.disableClickPropagation(this.container);
@ -20,13 +41,15 @@ L.U.UI = L.Evented.extend({
this._alert.id = 'umap-alert-container';
this._tooltip = L.DomUtil.create('div', '', this.container);
this._tooltip.id = 'umap-tooltip-container';
},
resetPanelClassName: function () {
}
}, {
key: 'resetPanelClassName',
value: function resetPanelClassName() {
this._panel.className = 'with-transition';
},
openPanel: 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...
@ -34,8 +57,7 @@ L.U.UI = L.Evented.extend({
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;
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);
@ -56,32 +78,34 @@ L.U.UI = L.Evented.extend({
L.DomUtil.addClass(this.parent, 'umap-ui');
}
L.DomEvent.on(closeLink, 'click', this.closePanel, this);
},
closePanel: function () {
}
}, {
key: 'closePanel',
value: function closePanel() {
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;
}
}, {
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;
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
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);
@ -93,8 +117,7 @@ L.U.UI = L.Evented.extend({
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.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;
@ -103,74 +126,77 @@ L.U.UI = L.Evented.extend({
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);
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);
}
}
self.ALERT_ID = timeoutID = window.setTimeout(L.bind(close, this), e.duration || 3000);
},
tooltip: function (e) {
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();
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); }
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 () {
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),
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) {
}
}, {
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 });
},
anchorTooltipLeft: function (el) {
}
}, {
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 });
},
closeTooltip: function (id) {
}
}, {
key: 'closeTooltip',
value: function closeTooltip(id) {
if (id && id !== this.TOOLTIP_ID) return;
this._tooltip.innerHTML = '';
L.DomUtil.removeClass(this.parent, 'umap-tooltip');
},
getPosition: function (el) {
}
}, {
key: 'getPosition',
value: function getPosition(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 () {
}
}, {
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
);
},
return Math.max(D.body.scrollHeight, D.documentElement.scrollHeight, D.body.offsetHeight, D.documentElement.offsetHeight, D.body.clientHeight, D.documentElement.clientHeight);
}
}]);
});
return UI;
}(L.Evented);
L.U.UI = UI;

169
umap/static/umap/src/umap.ui.js Normal file
View 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;