Hello web interface (small editor update)

This commit is contained in:
markseu 2014-03-31 14:44:41 +02:00
parent 5dfcbf1b1d
commit fdcc7eb527
2 changed files with 29 additions and 10 deletions

View file

@ -1,9 +1,10 @@
/* Yellow web interface 0.2.2 */
/* Yellow web interface 0.2.3 */
.yellow-bar { position:relative; overflow:hidden; line-height:2.0em; }
.yellow-bar-left { display:block; float:left; }
.yellow-bar-left a { margin-right:1em; }
.yellow-bar-right { display:block; float:right; }
.yellow-body-modal-open { overflow:hidden; }
.yellow-pane {
position:absolute; display:none; z-index:10;

View file

@ -4,7 +4,7 @@
// Yellow main API
var yellow =
{
version: "0.2.3",
version: "0.2.4",
onClick: function(e) { yellow.webinterface.hidePanesOnClick(yellow.toolbox.getEventElement(e)); },
onKeydown: function(e) { yellow.webinterface.hidePanesOnKeydown(yellow.toolbox.getEventKeycode(e)); },
onResize: function() { yellow.webinterface.resizePanes(); },
@ -116,11 +116,13 @@ yellow.webinterface =
// Show or hide pane
showPane: function(id)
{
if(!yellow.toolbox.isVisible(document.getElementById(id)))
var element = document.getElementById(id);
if(!yellow.toolbox.isVisible(element))
{
this.hidePanes();
if(yellow.debug) console.log("yellow.webinterface.showPane id:"+id);
document.getElementById(id).style.display = "block";
element.style.display = "block";
yellow.toolbox.addClass(document.body, "yellow-body-modal-open");
this.resizePanes();
} else {
this.hidePane(id);
@ -130,10 +132,12 @@ yellow.webinterface =
// Hide pane
hidePane: function(id)
{
if(yellow.toolbox.isVisible(document.getElementById(id)))
var element = document.getElementById(id);
if(yellow.toolbox.isVisible(element))
{
if(yellow.debug) console.log("yellow.webinterface.hidePane id:"+id);
document.getElementById(id).style.display = "none";
element.style.display = "none";
yellow.toolbox.removeClass(document.body, "yellow-body-modal-open");
}
},
@ -230,7 +234,21 @@ yellow.toolbox =
{
referenceElement.parentNode.insertBefore(newElement, referenceElement.nextSibling);
},
// Add element class
addClass: function(element, name)
{
var string = element.className + " " + name;
element.className = string.replace(/^\s+|\s+$/, "");
},
// Remove element class
removeClass: function(element, name)
{
var string = (" " + element.className + " ").replace(" " + name + " ", " ");
element.className = string.replace(/^\s+|\s+$/, "");
},
// Add event handler
addEvent: function(element, type, handler)
{
@ -266,7 +284,7 @@ yellow.toolbox =
setOuterHeight: function(element, height, maxHeight)
{
height -=this.getBoxSize(element).height;
height -= this.getBoxSize(element).height;
if(maxHeight)
{
element.style.maxHeight = Math.max(0, height) + "px";
@ -278,14 +296,14 @@ yellow.toolbox =
// Return element width/height in pixel, including padding and border
getOuterWidth: function(element, includeMargin)
{
width = element.offsetWidth;
var width = element.offsetWidth;
if(includeMargin) width += this.getMarginSize(element).width;
return width;
},
getOuterHeight: function(element, includeMargin)
{
height = element.offsetHeight;
var height = element.offsetHeight;
if(includeMargin) height += this.getMarginSize(element).height;
return height;
},