diff --git a/Sunfish/ShareWeb/$sunfish/$index.html b/Sunfish/ShareWeb/$sunfish/$index.html
index 1e23acf..d71dfe4 100644
--- a/Sunfish/ShareWeb/$sunfish/$index.html
+++ b/Sunfish/ShareWeb/$sunfish/$index.html
@@ -4,6 +4,7 @@
+
@@ -27,7 +28,7 @@
{%:sunfish-header}{%Items:directory-item}{%:sunfish-footer}
-
+
{Name}
diff --git a/Sunfish/ShareWeb/$sunfish/konsole.js b/Sunfish/ShareWeb/$sunfish/konsole.js
index a9e0b69..fd5ba0f 100644
--- a/Sunfish/ShareWeb/$sunfish/konsole.js
+++ b/Sunfish/ShareWeb/$sunfish/konsole.js
@@ -1,76 +1,106 @@
function Konsole() {
- var ktab, kpanel, kin, kout;
+ var k = {};
function init() {
- build();
+ buildUI();
install();
+ function inject() {
+ buildStyles();
+ document.body.appendChild(k.root);
+ }
+ if (document.body)
+ inject();
+ else
+ window.addEventListener("load", inject);
}
- function build() {
- ktab = document.createElement("div");
- ktab.style.position = "fixed";
- ktab.style.top = "0";
- ktab.style.right = "20px";
- ktab.style.width = "20px";
- ktab.style.height = "30px";
- ktab.style.fontFamily = "sans-serif";
- ktab.style.textAlign = "center";
- ktab.style.paddingTop = "5px";
- ktab.style.backgroundColor = "#bb5530";
- ktab.style.color = "white";
- ktab.style.borderBottomLeftRadius = "13px";
- ktab.style.borderBottomRightRadius = "3px";
- ktab.style.zIndex = "100";
- ktab.innerText = "K";
- ktab.addEventListener("click", function () {
- if (kpanel.style.display == "none")
+ function build(def, into) {
+ var el;
+ if (!def.$) {
+ el = document.createTextNode(def);
+ if (into)
+ into.appendChild(el);
+ return el;
+ }
+ el = document.createElement(def.$);
+ var childs = def._;
+ delete def.$;
+ delete def._;
+ for (var i in def) {
+ if (i == "style")
+ for (var sn in def.style)
+ el.style[sn] = def.style[sn];
+ else if (i == "event")
+ for (var en in def.event)
+ el.addEventListener(en, def.event[en]);
+ else
+ el[i] = def[i];
+ }
+ if (childs)
+ if (typeof childs == "string")
+ el.appendChild(document.createTextNode(childs));
+ else
+ for (var i in childs)
+ build(childs[i], el);
+ if (into)
+ into.appendChild(el);
+ return el;
+ }
+
+ function buildStyles() {
+ k.style = build({ $: "style" }, document.head);
+ var rules = "";
+ function rule(name, content) {
+ if (rules)
+ rules += "\n";
+ rules += name + "{" + content + "}";
+ }
+ rule("div#konsole", "all:initial;all:unset;position:fixed;top:0;left:0;width:0;height:0;font-family:sans-serif;z-index:1000");
+ rule("div#konsole div#konsole-tab", "position:fixed;top:0;right:15px;width:20px;height:26px;text-align:center;padding-top:4px;background-color:#bd7a00;user-select:none;" +
+ "color:white;border-bottom-left-radius:10px;border-bottom-right-radius:2px;z-index:10;opacity:0.2;cursor:pointer;transition: opacity 0.2s, background-color 0.2s;" +
+ "font-size:16px;");
+ rule("div#konsole div#konsole-tab:hover", "opacity:1;");
+ rule("div#konsole div#konsole-tab.error", "opacity:1;background-color:tomato;");
+ rule("div#konsole div#konsole-panel", "position:fixed;top:0;left:50px;right:50px;height:0%;background-color:#bd7a00;color:white;" +
+ "border-bottom-left-radius:30px;border-bottom-right-radius:5px;font-size:12px;overflow:hidden;transition: height 0.3s");
+ rule("div#konsole div#konsole-panel.open", "height:98%");
+ rule("div#konsole div#konsole-input-panel", "position:absolute;left:8px;right:8px;bottom:8px;");
+ rule("div#konsole input#konsole-input", "width:100%;border-radius:5px;border-bottom-left-radius:20px;border-top-left-radius:10px");
+ rule("div#konsole div#konsole-output", "position:absolute;top:0;left:8px;right:8px;bottom:44px;overflow:auto;background-color:white;padding-top:10px;" +
+ "border-bottom-left-radius:5px;border-bottom-right-radius:5px;color:black");
+ rule("div#konsole div.konsole-sign", "display:inline-block;width:16px;text-align:center;font-weight:bold;vertical-align:top;");
+ rule("div#konsole div.konsole-sign.error", "color:tomato");
+ rule("div#konsole div.konsole-sign.input", "color:#00459e");
+ rule("div#konsole div.konsole-sign.output", "color:#7bc012");
+ rule("div#konsole div.konsole-block", "display:inline-block");
+ k.style.innerHTML = rules;
+ }
+
+ function buildUI() {
+ function kTabClick() {
+ if (k.panel.className == "")
open();
else
close();
- });
- kpanel = document.createElement("div");
- kpanel.style.position = "fixed";
- kpanel.style.top = "0";
- kpanel.style.left = "32px";
- kpanel.style.right = "32px";
- kpanel.style.bottom = "32px";
- kpanel.style.backgroundColor = "#e9e3df";
- kpanel.style.color = "white";
- kpanel.style.borderBottomLeftRadius = "39px";
- kpanel.style.borderBottomRightRadius = "9px";
- kpanel.style.fontFamily = "sans-serif";
- kpanel.style.color = "black";
- kpanel.style.display = "none";
- kpanel.style.zIndex = "99";
- var kinp = document.createElement("div");
- kinp.style.position = "absolute";
- kinp.style.left = "32px";
- kinp.style.right = "16px";
- kinp.style.bottom = "16px";
- kin = document.createElement("input");
- kin.style.width = "100%";
- kin.addEventListener("keypress", function (e) {
- if (e.which == 13)
+ }
+ function kInputKeypress(e) {
+ if (e.keyCode == 13)
try {
- var cmd = kin.value.trim();
+ var cmd = k.in.value.trim();
if (cmd == "")
return;
- kin.value = "";
+ k.in.value = "";
exec(cmd);
} catch (e) {
error(e);
}
- });
- kinp.appendChild(kin);
- kpanel.appendChild(kinp);
- kout = document.createElement("div");
- kout.style.position = "absolute";
- kout.style.top = "16px";
- kout.style.left = "16px";
- kout.style.right = "16px";
- kout.style.bottom = "48px";
- kout.style.overflow = "auto";
- kpanel.appendChild(kout);
+ }
+ k.root = build({ $: "div", id: "konsole" });
+ k.tab = build({ $: "div", id: "konsole-tab", title: "Konsole", _: "K", event: { click: kTabClick } }, k.root);
+ k.panel = build({ $: "div", id: "konsole-panel" }, k.root);
+ k.inp = build({ $: "div", id: "konsole-input-panel" }, k.panel);
+ k.in = build({ $: "input", id: "konsole-input", event: { keypress: kInputKeypress } }, k.inp);
+ k.out = build({ $: "div", id: "konsole-output" }, k.panel);
}
function install() {
@@ -88,42 +118,28 @@
kk("log", "l");
kk("debug", "d");
kk("error", "e");
- window.onerror=function(err){
- ktab.style.backgroundColor = "tomato";
- out("e", err);
- }
+ window.addEventListener('error', function (e) {
+ k.tab.className = "error";
+ var msg = e.message;
+ if (e.filename)
+ msg += "\n on " + e.filename + " (" + e.lineno + ":" + e.colno + ")";
+ out("!", msg, e);
+ });
}
function rowDiv(type, child) {
- var d = document.createElement("div");
- var s = document.createElement("div");
- s.style.display = "inline-block";
- s.style.width = "24px";
- s.style.textAlign = "center";
- s.style.fontWeight = "bold";
- s.style.verticalAlign = "top";
- switch (type) {
- case "!":
- case "e":
- s.style.color = "tomato";
- break;
- case "<":
- s.style.color = "#7bc012";
- break;
- case ">":
- s.style.color = "#00459e";
- break;
+ var types = {
+ "!": "error",
+ ">": "input",
+ "<": "output",
}
- s.innerText = type;
- d.appendChild(s);
- var di = document.createElement("div");
- di.style.display = "inline-block";
+ var d = build({ $: "div", _: [{ $: "div", className: "konsole-sign " + types[type], _: type }] }, k.out);
+ var di = build({ $: "div", className: "konsole-block" }, d);
if (typeof child == "string")
di.innerText = child;
else
di.appendChild(child);
- d.appendChild(di);
- kout.appendChild(d);
+ d.scrollIntoView();
}
function error(s) {
@@ -216,10 +232,8 @@
}
}
- function out(type, data) {
- var row = document.createElement("div");
- row.className = "object";
- row.style.display = "inline-block"
+ function out(type, data, extended) {
+ var row = build({ $: "div", className: "konsole-block object" });
dump(data, row, true);
rowDiv(type, row);
}
@@ -230,21 +244,20 @@
}
function showTab() {
- document.body.appendChild(ktab);
+ k.root.appendChild(k.tab);
}
function hideTab() {
- document.body.removeChild(ktab);
+ k.root.removeChild(k.tab);
}
function open(obj) {
- document.body.appendChild(kpanel);
- kpanel.style.display = "";
- ktab.style.backgroundColor = "#bb5530";
+ k.panel.className = "open";
+ k.tab.className = "";
}
function close() {
- kpanel.style.display = "none";
+ k.panel.className = "";
}
init();
diff --git a/Sunfish/ShareWeb/$sunfish/style.css b/Sunfish/ShareWeb/$sunfish/style.css
index ae8b2e0..b57d43e 100644
--- a/Sunfish/ShareWeb/$sunfish/style.css
+++ b/Sunfish/ShareWeb/$sunfish/style.css
@@ -136,6 +136,22 @@
margin-left: 0.3rem;
}
+.test{
+ background-color: #4f6e05;
+}
+
+.item.active {
+ cursor: pointer;
+}
+
+.item>a {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+}
+
.desktop .item-actions {
display: none;
}
diff --git a/Sunfish/ShareWeb/$sunfish/sunfish-directory.js b/Sunfish/ShareWeb/$sunfish/sunfish-directory.js
index e232912..4e4ef7f 100644
--- a/Sunfish/ShareWeb/$sunfish/sunfish-directory.js
+++ b/Sunfish/ShareWeb/$sunfish/sunfish-directory.js
@@ -1,46 +1,62 @@
-sunfish.deleteFile = function (sender, file, isfolder) {
- var ask;
- var eitem=sender.parentElement.parentElement;
- if (isfolder)
- ask = "Sure to delete folder " + file + " and all its contents? can not be undone.";
- else
- ask = "Sure to delete " + file + "? can not be undone.";
- sunfish.ask(ask,
- { b: 'Cancel' },
- {
- b: 'Delete', class: 'warning', do: function () {
- var unlock = sunfish.lock("deleting...");
- sunfish.ajax(document.location.href + file + "?action=delete", {
- ok: function (result) {
- if (result == "OK"){
- unlock();
- eitem.parentNode.removeChild(eitem);
- }else {
- unlock();
- sunfish.error("Error deleting file", function () {
- document.location.reload();
- });
+(function () {
+
+ /**
+ * Get the item element form any sub element
+ * @param {*} subElement DOM element child of item
+ */
+ function getItem(subElement) {
+ while (subElement.className.indexOf("item-row") < 0)
+ subElement = subElement.parentElement;
+ return subElement;
+ }
+
+ sunfish.deleteFile = function (sender) {
+ var ask;
+ var item = getItem(sender);
+ var isfolder = item.className.indexOf("directory") >= 0;
+ var file = item.querySelector("div.item-name").innerText;
+ if (isfolder)
+ ask = "Sure to delete folder " + file + " and all its contents? can not be undone.";
+ else
+ ask = "Sure to delete " + file + "? can not be undone.";
+ sunfish.ask(ask,
+ { b: 'Cancel' },
+ {
+ b: 'Delete', class: 'warning', do: function () {
+ var unlock = sunfish.lock("deleting...");
+ sunfish.ajax(document.location.href + file + "?action=delete", {
+ ok: function (result) {
+ if (result == "OK") {
+ unlock();
+ item.parentNode.removeChild(item);
+ } else {
+ unlock();
+ sunfish.error("Error deleting file", function () {
+ document.location.reload();
+ });
+ }
}
- }
- })
+ })
+ }
}
- }
- );
-}
+ );
+ }
-sunfish.renameFile = function (sender, file) {
- var eitem=sender.parentElement.parentElement;
- sunfish.askString('Rename to:', file, function (newName) {
- sunfish.ajax(document.location.href + file + "?action=rename&to=" + newName, {
- ok: function (result) {
- if (result == "OK"){
- eitem.querySelector("div.item-name").innerText=newName;
- }else
- sunfish.error("Error renaming file", function () {
- document.location.reload();
- });
- }
+ sunfish.renameFile = function (sender) {
+ var item = getItem(sender);
+ var file = item.querySelector("div.item-name").innerText;
+ sunfish.askString('Rename to:', file, function (newName) {
+ sunfish.ajax(document.location.href + file + "?action=rename&to=" + newName, {
+ ok: function (result) {
+ if (result == "OK") {
+ item.querySelector("div.item-name").innerText = newName;
+ } else
+ sunfish.error("Error renaming file", function () {
+ document.location.reload();
+ });
+ }
+ });
});
- });
-}
\ No newline at end of file
+ }
+})();
\ No newline at end of file
diff --git a/Sunfish/Sunfish/Services/WebService.cs b/Sunfish/Sunfish/Services/WebService.cs
index 7647340..b55cf8b 100644
--- a/Sunfish/Sunfish/Services/WebService.cs
+++ b/Sunfish/Sunfish/Services/WebService.cs
@@ -230,18 +230,19 @@
Name = d,
Description = "Directory",
Link = d + "/",
+ Style = "directory",
Actions = new WebUILink[]{
readOnly?null:new WebUILink()
{
Icon="drive_file_rename_outline",
Tooltip="Rename",
- Click="sunfish.renameFile(this,'"+d+"');"
+ Click="sunfish.renameFile(this)"
},
allowDelete?new WebUILink()
{
Icon="delete",
Tooltip="Delete folder",
- Click="sunfish.deleteFile(this,'"+d+"',true);"
+ Click="sunfish.deleteFile(this);"
}:null
}
});
@@ -263,19 +264,19 @@
{
Icon="api",
Tooltip="Open in server",
- Link=d+"?action=open"
+ Click="sunfish.openFile(this)"
}:null,
readOnly?null:new WebUILink()
{
Icon="drive_file_rename_outline",
Tooltip="Rename",
- Click="sunfish.renameFile(this,'"+d+"');"
+ Click="sunfish.renameFile(this)"
},
allowDelete?new WebUILink()
{
Icon="delete",
Tooltip="Delete file",
- Click="sunfish.deleteFile(this,'"+d+"',false);"
+ Click="sunfish.deleteFile(this)"
}:null
}
}); ;