Skip to content
Permalink
Browse files

layby

  • Loading branch information...
michmech committed Feb 10, 2018
1 parent 82e422e commit 4da7f4675a2529a345758287aef189fa3c5f5211
Showing with 84 additions and 5 deletions.
  1. BIN bin_closed.png
  2. +29 −2 xonomy.css
  3. +55 −3 xonomy.js
BIN +538 Bytes bin_closed.png
Binary file not shown.
@@ -225,7 +225,7 @@
.xonomy.laic .element > .children > .textnode > .value { display: inline-block; font-family: monospace; background-color: #ffffff; padding: 4px 0px; border-bottom: 1px solid #999999; cursor: pointer; min-width: 2em; }
.xonomy.laic .element.oneliner > .children > .textnode > .value { text-align: center; }
.xonomy.laic .element > .tag.closing { display: none; }
.xonomy.laic .element > .tag { display: block; padding: 5px 10px; background-color: #eeeeee; box-shadow: 0px 0px 2px #999999; z-index: 10; }
.xonomy.laic .element > .tag { display: block; padding: 5px 10px; background-color: #eeeeee; box-shadow: 0px 0px 2px #999999; z-index: 9; }
.xonomy.laic .element > .tag > .name {font-weight: bold; color: #315696; cursor: pointer; }
.xonomy.laic .element > .tag.opening > .attributes > .attribute { margin-left: 0.75em; border-left: 1px solid #cccccc; padding-left: 0.75em; padding-top: 5px; padding-bottom: 5px; }
.xonomy.laic .element > .tag.opening > .attributes > .attribute > .name { font-weight: bold; color: #6385bf; cursor: pointer; }
@@ -255,7 +255,7 @@
.xonomy.laic .element.hasText .element.oneliner.collapsed > .tag { display: none; }

/*The "collapsoid" (= rectangle that hides collapsed stuff)*/
.xonomy.laic .element > .childrenCollapsed { display: none; border: 1px solid #cccccc; color: #999999; padding: 1px 5px; cursor: pointer; font-family: monospace; background-color: #ffffff; font-size: 0.85rem; z-index: 11; }
.xonomy.laic .element > .childrenCollapsed { display: none; border: 1px solid #cccccc; color: #999999; padding: 1px 5px; cursor: pointer; font-family: monospace; background-color: #ffffff; font-size: 0.85rem; z-index: 9; }
.xonomy.laic .element.collapsed > .childrenCollapsed { display: block; position: absolute; top: 8px; right: 3px; }
.xonomy.laic .element.collapsed > .childrenCollapsed:hover { background-color: #f4f4f4; }

@@ -428,3 +428,30 @@
.xonomy div.modeSwitcher:hover {box-shadow: 0px 0px 1px #999999; }
.xonomy.nerd div.modeSwitcher span.nerd {background-color: #fbeb93; }
.xonomy.laic div.modeSwitcher span.laic {background-color: #fbeb93; }

.xonomy div.layby { position: fixed; bottom: 0px; top: 0px; right: 0px; padding: 10px 10px 0px 10px; background-color: #fffef4; z-index: 12; border-left: 2px solid #cccccc; z-index: 9}
.xonomy div.layby.closed { width: 30px; }
.xonomy div.layby span.button {display: inline-block; width: 30px; height: 30px; background-position: center center; background-repeat: no-repeat; background-color: #ffffff; border: 1px solid #cccccc; cursor: pointer;}
.xonomy div.layby span.button:hover {box-shadow: 0px 0px 1px #666666;}
.xonomy div.layby span.opener {background-image: url(bullet_arrow_up.png);}
.xonomy div.layby span.closer {background-image: url(bullet_arrow_down.png);}
.xonomy div.layby span.purger {background-image: url(bin_closed.png); float: right;}
.xonomy div.layby.closed span.opener { display: inline-block; }
.xonomy div.layby.closed span.closer { display: none; }
.xonomy div.layby.closed span.purger { display: none; }
.xonomy div.layby.closed div.content { display: none; }
.xonomy div.layby.open { width: 30%; }
.xonomy div.layby.open span.opener { display: none; }
.xonomy div.layby.open span.closer { display: inline-block; }
.xonomy div.layby.open div.content { display: block; }
.xonomy div.layby.empty span.purger { display: none; }
.xonomy div.layby.nonempty.open span.purger { display: inline-block; }
.xonomy div.layby div.message { display: none; position: absolute; top: 50px; left: 10px; right: 10px; bottom: 0px; overflow: hidden; font-family: sans-serif; font-size: 1.25rem; line-height: 1.5em; text-align: center; padding-top: 100px; color: #cccccc;}
.xonomy div.layby.empty.open div.message { display: block; }
.xonomy div.layby.activeDropper {background-color: #f9f6dc;}
.xonomy div.layby > div.content { position: absolute; top: 50px; left: 10px; right: 10px; bottom: 0px; overflow-x: hidden; overflow-y: auto;}
.xonomy.laic div.layby > div.content { padding-right: 1px; }
.xonomy.nerd div.layby > div.content > .element {margin-left: 10px;}
.xonomy.laic div.layby > div.content > .element {margin-left: 35px;}
.xonomy.laic div.layby > div.content .children {background-color: transparent !important;}
.xonomy.laic div.layby > div.content .textnode > .value {background-color: transparent !important;}
@@ -441,6 +441,18 @@ Xonomy.render=function(data, editor, docSpec) { //renders the contents of an edi
$(editor).hide();
editor.innerHTML=Xonomy.renderElement(data, editor);
$(editor).show();

if(docSpec.allowLayby){
var laybyHtml="<div class='layby closed empty' ondragover='Xonomy.dragOver(event)' ondragleave='Xonomy.dragOut(event)' ondrop='Xonomy.drop(event)''>";
laybyHtml+="<span class='button opener' onclick='Xonomy.openLayby()'>&nbsp;</span>";
laybyHtml+="<span class='button closer' onclick='Xonomy.closeLayby()'>&nbsp;</span>";
laybyHtml+="<span class='button purger' onclick='Xonomy.emptyLayby()'>&nbsp;</span>";
laybyHtml+="<div class='content'></div>";
laybyHtml+="<div class='message'>"+docSpec.laybyMessage+"</div>";
laybyHtml+="</div>";
$(laybyHtml).appendTo($(editor));
}

if(docSpec.allowModeSwitching){
$("<div class='modeSwitcher'><span class='nerd'></span><span class='laic'></span></div>").appendTo($(editor)).on("click", function(e){
if(Xonomy.mode=="nerd") { Xonomy.setMode("laic"); } else { Xonomy.setMode("nerd"); }
@@ -1340,28 +1352,68 @@ Xonomy.drag=function(ev) { //called when dragging starts
};
Xonomy.dragOver=function(ev) {
ev.preventDefault();
$(ev.target.parentNode).addClass("activeDropper");
if($(ev.currentTarget).hasClass("layby")){
$(ev.currentTarget).addClass("activeDropper");
} else {
$(ev.target.parentNode).addClass("activeDropper");
}
};
Xonomy.dragOut=function(ev) {
ev.preventDefault();
$(".xonomy .activeDropper").removeClass("activeDropper");
if($(ev.currentTarget).hasClass("layby")){
$(ev.currentTarget).removeClass("activeDropper");
} else {
$(".xonomy .activeDropper").removeClass("activeDropper");
}
};
Xonomy.drop=function(ev) {
ev.preventDefault();
var node=document.getElementById(Xonomy.draggingID); //the thing we are moving
$(node).hide();
$(ev.target.parentNode).replaceWith(node);
if($(ev.currentTarget).hasClass("layby")) {
$(".xonomy .layby > .content").append(node);
} else {
$(ev.target.parentNode).replaceWith(node);
}
$(node).fadeIn(function(){
Xonomy.changed();
});
Xonomy.openCloseLayby();
Xonomy.recomputeLayby();
};
Xonomy.dragend=function(ev) {
$(".xonomy .attributeDropper").remove();
$(".xonomy .elementDropper").remove();
$(".xonomy .dragging").removeClass("dragging");
Xonomy.refresh();
$(".xonomy .layby").removeClass("activeDropper");
};

Xonomy.openCloseLayby=function(){ //open the layby if it's full, close it if it's empty
if($(".xonomy .layby > .content > *").length>0){
$(".xonomy .layby").removeClass("closed").addClass("open");
} else {
$(".xonomy .layby").removeClass("open").addClass("closed");
}
};
Xonomy.openLayby=function(){
$(".xonomy .layby").removeClass("closed").addClass("open");
};
Xonomy.closeLayby=function(){
$(".xonomy .layby").removeClass("open").addClass("closed");
};
Xonomy.emptyLayby=function(){
$(".xonomy .layby .content").html("");
$(".xonomy .layby").removeClass("nonempty").addClass("empty");
};
Xonomy.recomputeLayby=function(){
if($(".xonomy .layby > .content > *").length>0){
$(".xonomy .layby").removeClass("empty").addClass("nonempty");
} else {
$(".xonomy .layby").removeClass("nonempty").addClass("empty");
}
}

Xonomy.changed=function(jsElement) { //called when the document changes
Xonomy.refresh();
Xonomy.validate();

0 comments on commit 4da7f46

Please sign in to comment.
You can’t perform that action at this time.