@cquiroz/aladin-lite
Version:
AladinLite module
228 lines (188 loc) • 7.12 kB
JavaScript
// Copyright 2013-2017 - UDS/CNRS
// The Aladin Lite program is distributed under the terms
// of the GNU General Public License version 3.
//
// This file is part of Aladin Lite.
//
// Aladin Lite is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, version 3 of the License.
//
// Aladin Lite is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// The GNU General Public License is available in COPYING file
// along with Aladin Lite.
//
/******************************************************************************
* Aladin Lite project
*
* File Box
*
* A Box instance is a GUI element providing a div nested
* in Aladin Lite parent div
*
* Author: Thomas Boch [CDS]
*
*****************************************************************************/
var Box = function () {
// constructor
var Box = function Box(properties) {
this.$parentDiv = document.createElement("div");
this.$parentDiv.classList.add('aladin-box');
properties = properties || {};
this.css = properties.css || {
padding: '4px'
};
this.position = properties.position || 'bottom'; // position can be bottom, left, top or right
if (this.position === 'right') {
this.css['left'] = 'unset';
}
this.css[this.position] = '4px';
this.contentCss = properties.contentCss || {};
this.title = properties.title || undefined;
this.content = properties.content || undefined;
this.showHandler = properties.showHandler !== undefined ? properties.showHandler : true;
this.openCallback = properties.openCallback || undefined; // callback called when the user opens the panel
this.closeCallback = properties.closeCallback || undefined; // callback called when the user closes the panel
this.changingDim = 'width';
if (this.position === 'top' || this.position === 'bottom') {
this.changingDim = 'height';
}
this.open = false;
this._render();
this.$parentDiv.style.display = '';
this.open = true;
this.hide();
};
Box.prototype = {
show: function show() {
if (this.open) {
return;
}
this.open = true;
this.$parentDiv.style.display = '';
this._updateChevron();
if (this.changingDim === 'width') {
this.$parentDiv.find('.aladin-box-title-label').style.display = '';
}
var self = this;
var options = {};
options[this.changingDim] = 'show';
var delay = this.changingDim === 'width' ? 0 : 400;
this.$parentDiv.find('.aladin-box-content').animate(options, delay, function () {
self.css[self.position] = '4px';
self.updateStyle(self.css);
typeof self.openCallback === 'function' && self.openCallback();
});
},
hide: function hide() {
if (!this.open) {
return;
}
this.open = false;
this._updateChevron();
if (this.changingDim === 'width') {
this.$parentDiv.find('.aladin-box-title-label').hide();
}
var self = this;
var options = {};
options[this.changingDim] = 'hide'; // var delay = this.changingDim==='width' ? 0 : 400;
self.css[self.position] = '0px';
self.updateStyle(self.css); // this.$parentDiv.querySelectorAll('.aladin-box-content').forEach(node => {
// animate(options, delay, function() {
// self.css[self.position] = '0px';
// self.updateStyle(self.css);
//
// typeof self.closeCallback === 'function' && self.closeCallback();
// })
// });
},
// complety hide parent div
realHide: function realHide() {
this.open = false;
this.$parentDiv.hide();
},
updateStyle: function updateStyle(css) {
this.css = css;
this.$parentDiv.style = css;
},
setContent: function setContent(content) {
this.content = content;
this._render();
},
setTitle: function setTitle(title) {
this.title = title;
this._render();
},
enable: function enable() {
this.$parentDiv.enable();
},
disable: function disable() {
this.$parentDiv.disable();
},
// fill $parentDiv with HTML corresponding to current state
_render: function _render() {
var self = this; // this.$parentDiv.empty();
while (this.$parentDiv.firstChild) {
this.$parentDiv.removeChild(this.$parentDiv.firstChild);
} // this.$parentDiv.off();
// var titleDiv = $('<div class="aladin-box-title">');
var titleDiv = document.createElement("div");
titleDiv.classList.add("aladin-box-title");
if (this.showHandler) {
var chevron = document.createElement("span");
chevron.classList.add("aladin-chevron"); // var chevron = $('<span class="aladin-chevron">');
titleDiv.append(chevron);
}
if (this.title) {
var _titleDiv = document.createElement("span");
_titleDiv.classList.add("aladin-box-title-label");
_titleDiv.textContent = this.title; // titleDiv.append(' <span class="aladin-box-title-label">' + this.title + '</span>');
}
this.$parentDiv.append(titleDiv);
var $content = document.createElement("div");
$content.classList.add("aladin-box-content");
$content.content = this.content ? this.content : ''; // var $content = $('<div class="aladin-box-content">' + (this.content?this.content:'') + '</div>');
$content.style = this.contentCss;
this.$parentDiv.append($content);
this._updateChevron();
this.updateStyle(this.css);
titleDiv.addEventListener('click', function () {
if (self.open) {
self.style.display = 'none';
} else {
self.style.display = '';
}
});
},
_updateChevron: function _updateChevron() {
var chevron = this.$parentDiv.querySelectorAll('.aladin-chevron');
chevron.forEach(node => {
node.classList.remove(...node.classList);
node.classList.add('aladin-chevron');
node.classList.add(getChevronClass(this.position, this.open));
node.setAttribute('title', 'Click to ' + (this.open ? 'hide ' : 'show ') + (this.title ? this.title : '') + ' panel');
});
}
};
var getChevronClass = function getChevronClass(position, isOpen) {
if (position === 'top' && isOpen || position === 'bottom' && !isOpen) {
return 'aladin-chevron-up';
}
if (position === 'bottom' && isOpen || position === 'top' && !isOpen) {
return 'aladin-chevron-down';
}
if (position === 'right' && isOpen || position === 'left' && !isOpen) {
return 'aladin-chevron-right';
}
if (position === 'left' && isOpen || position === 'right' && !isOpen) {
return 'aladin-chevron-left';
}
return '';
};
return Box;
}();
export default Box;