commit 175c1de2a15f87d30299b50a801eeff18a58eed1
parent 8a5360845471379e0d28ce1c4c58dd7cb6cfdecf
Author: markseu <mark2011@mayberg.se>
Date: Thu, 23 May 2013 08:24:50 +0200
Hello responsive web
Diffstat:
15 files changed, 381 insertions(+), 189 deletions(-)
diff --git a/README.md b/README.md
@@ -10,6 +10,7 @@ Copy all files to your web server hosting.
Open your website in a browser, that's it!
Installation requirements are Apache, mod_rewrite, PHP 5.3 and multibyte support.
+There are extensions for Yellow, you can find them at [Yellow extension on Github](https://github.com/markseu/yellowcms-extensions).
Need help? Have a question?
---------------------------
diff --git a/content/1-home/page.txt b/content/1-home/page.txt
@@ -1,7 +1,7 @@
---
Title: Home
---
-Yes, it works! Your Yellow installation was successful.
+Yes, your Yellow installation works!
You can now [edit this page](@baselocation/wiki/) or use your favorite text editor.
Visit [Yellow on Github](https://github.com/markseu/yellowcms).
\ No newline at end of file
diff --git a/content/2-services/page.txt b/content/2-services/page.txt
@@ -1,4 +1,6 @@
---
Title: Services
---
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna pizza. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna pizza. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\ No newline at end of file
diff --git a/content/3-about/page.txt b/content/3-about/page.txt
@@ -1,4 +1,6 @@
---
Title: About
---
+Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna pizza. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna pizza. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\ No newline at end of file
diff --git a/media/styles/default.css b/media/styles/default.css
@@ -0,0 +1,45 @@
+/* Yellow default style 0.1.0 */
+
+html, body, div, span { margin:0; padding:0; border:0; vertical-align:baseline; }
+body {
+ margin:1em;
+ background-color:#fff; color:#717171;
+ font-family:Helvetica,sans-serif;
+ font-size:0.95em;
+ font-weight:200;
+ line-height:1.5;
+}
+h1, h2, h3, h4, h5, h6 { color:#07d; font-weight:normal; }
+hr { height:1px; background:#ddd; border:0; }
+a, img { border:none; text-decoration:none; }
+a { color:#717171; }
+a:hover { color:#07d; }
+.header h1 { margin-top:1em; margin-bottom:0em; font-size:2.5em; }
+.header a { color:#111; }
+.navigation { margin-bottom:1em; border-bottom:1px solid #ddd; line-height:2em; }
+.navigation a { color:#111; padding:0 0.3em; display:inline-block; }
+.navigation a:hover { color:#07d; }
+.navigation li a.active { color:#07d; }
+.navigation li a.active:hover { color:#07d; }
+.navigation li { display:inline; }
+.navigation ul { margin:0 -0.3em; padding:0; list-style:none; }
+.content a { color:#07d; }
+.content a:hover { color:#07d; text-decoration:underline; }
+.footer { margin-top:0.5em; padding-top:0.5em; border-top:1px solid #ddd; }
+
+/* Responsive and print */
+
+@media screen and (min-width:62em) {
+ body { width:60em; margin:1em auto; }
+}
+@media screen and (max-width:30em) {
+ body { margin:0.5em; font-size:0.9em; }
+ .header h1, h1, h2 { font-size:1.3em; }
+ .header h1, .header, .navigation, .footer, .page { margin:0; padding:0; }
+ .footer { padding-top:0.5em; }
+}
+@media print {
+ body, h1, h2, h3, h4, h5, h6 { background-color:white; color:black; }
+ .page { border:none !important; }
+ .navigation, .footer { display:none !important; }
+}
+\ No newline at end of file
diff --git a/media/styles/default_style.css b/media/styles/default_style.css
@@ -1,14 +0,0 @@
-html, body { margin:0px; padding:0px; }
-body { width:600px; margin:50px auto; font-family:"Helvetica Neue",Helvetica,sans-serif; background:#fff; color:#777; }
-a { text-decoration:none; color:#05d; }
-a:hover { text-decoration:none; color:#f00; }
-h1, h2, h3, h4, h5, h6 { font-weight:normal; color:#111; }
-h1 { font-size:1.5em; }
-p, ul { line-height:1.5; }
-img { vertical-align:top; }
-.header a { font-size:2.0em; color:#111; }
-.navigation { margin-top:1em; margin-bottom:1em; padding-bottom:1em; border-bottom:solid 2px #ec0; font-size:1.2em; font-weight:bold; }
-.navigation ul { list-style:none; margin:0px; padding:0px; }
-.navigation li { display:inline; margin-right:1em; }
-.navigation li a.active { color: red; }
-.footer { margin-top:2em; padding-top:1em; border-top:solid 2px #ec0; }
-\ No newline at end of file
diff --git a/media/styles/print_style.css b/media/styles/print_style.css
@@ -1,2 +0,0 @@
-body, h1, h2, h3, h4, h5, h6 { background:white; color:black; }
-.navigation, .footer { display:none !important; }
-\ No newline at end of file
diff --git a/system/config/config.ini b/system/config/config.ini
@@ -4,22 +4,24 @@
sitename = Website
author = Website
language = en
-
parser = markdown
template = default
-stylesLocation = /media/styles/
-imagesLocation = /media/images/
-pluginsLocation = /media/plugins/
+style = default
+
+styleLocation = /media/styles/
+imageLocation = /media/images/
+pluginLocation = /media/plugins/
systemDir = system/
configDir = system/config/
pluginDir = system/plugins/
snippetDir = system/snippets/
templateDir = system/templates/
+styleDir = media/styles/
+imageDir = media/images/
contentDir = content/
contentHomeDir = 1-home/
contentDefaultFile = page.txt
contentExtension = .txt
configExtension = .ini
-systemExtension = .php
errorPageFile = error(.*).txt
textStringFile = text_(.*).ini
\ No newline at end of file
diff --git a/system/core/core.php b/system/core/core.php
@@ -5,7 +5,7 @@
// Yellow main class
class Yellow
{
- const Version = "0.1.2";
+ const Version = "0.1.3";
var $page; //current page data
var $pages; //current page tree from file system
var $toolbox; //toolbox with helpers
@@ -24,22 +24,24 @@ class Yellow
$this->config->setDefault("language", "en");
$this->config->setDefault("parser", "markdown");
$this->config->setDefault("template", "default");
+ $this->config->setDefault("style", "default");
$this->config->setDefault("yellowVersion", Yellow::Version);
$this->config->setDefault("baseLocation", $this->toolbox->getBaseLocation());
- $this->config->setDefault("stylesLocation", "/media/styles/");
- $this->config->setDefault("imagesLocation", "/media/images/");
- $this->config->setDefault("pluginsLocation", "media/plugins/");
+ $this->config->setDefault("styleLocation", "/media/styles/");
+ $this->config->setDefault("imageLocation", "/media/images/");
+ $this->config->setDefault("pluginLocation", "media/plugins/");
$this->config->setDefault("systemDir", "system/");
$this->config->setDefault("configDir", "system/config/");
$this->config->setDefault("pluginDir", "system/plugins/");
$this->config->setDefault("snippetDir", "system/snippets/");
$this->config->setDefault("templateDir", "system/templates/");
+ $this->config->setDefault("styleDir", "media/styles/");
+ $this->config->setDefault("imageDir", "media/images/");
$this->config->setDefault("contentDir", "content/");
$this->config->setDefault("contentHomeDir", "1-home/");
$this->config->setDefault("contentDefaultFile", "page.txt");
$this->config->setDefault("contentExtension", ".txt");
$this->config->setDefault("configExtension", ".ini");
- $this->config->setDefault("systemExtension", ".php");
$this->config->setDefault("configFile", "config.ini");
$this->config->setDefault("errorPageFile", "error(.*).txt");
$this->config->setDefault("textStringFile", "text_(.*).ini");
@@ -151,7 +153,9 @@ class Yellow
$this->page = new Yellow_Page($baseLocation, $location, $fileName, $fileData, $this->pages, true);
$this->text->setLanguage($this->page->get("language"));
- $fileName = $this->config->get("templateDir").$this->page->get("template").$this->config->get("systemExtension");
+ $fileName = $this->config->get("styleDir").$this->page->get("style").".css";
+ if(!is_file($fileName)) die("Style '".$this->page->get("style")."' does not exist!");
+ $fileName = $this->config->get("templateDir").$this->page->get("template").".php";
if(!is_file($fileName)) die("Template '".$this->page->get("template")."' does not exist!");
global $yellow;
require($fileName);
@@ -161,7 +165,7 @@ class Yellow
function snippet($name, $args = NULL)
{
$this->page->args = func_get_args();
- $fileName = $this->config->get("snippetDir").$name.$this->config->get("systemExtension");
+ $fileName = $this->config->get("snippetDir")."$name.php";
if(!is_file($fileName)) die("Snippet '$name' does not exist!");
global $yellow;
require($fileName);
@@ -252,6 +256,7 @@ class Yellow_Page
$this->set("language", $config->get("language"));
$this->set("parser", $config->get("parser"));
$this->set("template", $config->get("template"));
+ $this->set("style", $config->get("style"));
if(preg_match("/^(\-\-\-[\r\n]+)(.+?)([\r\n]+\-\-\-[\r\n]+)/s", $rawData, $parsed))
{
diff --git a/system/core/core_markdown.php b/system/core/core_markdown.php
@@ -5,7 +5,7 @@
// Markdown parser core plugin
class Yellow_Markdown
{
- const Version = "0.1.1";
+ const Version = "0.1.2";
var $markdown; //markdown parser
var $html; //generated HTML
@@ -45,8 +45,8 @@ class Yellow_MarkdownExtraParser extends MarkdownExtra_Parser
function _doImages_inline_callback($matches)
{
$path = $matches[3]=="" ? $matches[4] : $matches[3];
- $src = $this->yellow->config->get("baseLocation").$this->yellow->config->get("imagesLocation").$path;
- list($width, $height) = $this->yellow->toolbox->detectImageDimensions(".".$this->yellow->config->get("imagesLocation").$path);
+ $src = $this->yellow->config->get("baseLocation").$this->yellow->config->get("imageLocation").$path;
+ list($width, $height) = $this->yellow->toolbox->detectImageDimensions($this->yellow->config->get("imageDir").$path);
$alt = $matches[2];
$title = $matches[7];
diff --git a/system/core/core_webinterface.css b/system/core/core_webinterface.css
@@ -1,50 +1,51 @@
-.yellow-login {
- width:600px; position:absolute; top:5px; padding:30px;
- border:1px solid #ccc; border-radius:4px;
- background-color:#fff; color:#000; }
-.yellow-login h1 { margin:0px; padding:0px; }
-.yellow-login p { margin:0.5em; text-align:right; }
+/* Yellow web interface 0.1.1 */
-.yellow-bar { width:600px; position:absolute; top:1px; background-color:#fff; color:#000; }
-.yellow-bar img { vertical-align:top; }
-.yellow-bar button { color:#05d; padding-left:0.5em; padding-right:0.5em; }
-.yellow-bar button:hover { color:#f00; }
-.yellow-barleft { margin-left:0px; display:block; float:left; height:100%; }
-.yellow-barright { margin-right:0px; display:block; float:right; height:100%; }
-.yellow-barlink { cursor:pointer; font:inherit; background:none; border:none; margin:0px padding:0px; }
+.yellow-bar { position:relative; overflow:hidden; line-height:2.0em; }
+.yellow-barleft { display:block; float:left; }
+.yellow-barleft a { margin-right:1em; }
+.yellow-barright { display:block; float:right; }
.yellow-pane {
- position:absolute; display:none; margin:0px; padding:5px; z-index:10;
- border:1px solid #ccc; border-radius:4px;
- background-color:#fff; color:#000; }
-.yellow-panebubble { }
-.yellow-pane a { text-decoration:none; color:#000; }
-.yellow-pane a:hover { text-decoration:none; color:#f00; }
+ position:absolute; display:none; z-index:10;
+ margin:0; padding:5px;
+ background-color:#fff; color:#000;
+ border:1px solid #bbb;
+ border-radius:4px;
+}
+.yellow-pane a { color:#000; text-decoration:none; }
+.yellow-pane a:hover { color:#f00; text-decoration:none; }
.yellow-pane p { margin:0.5em; }
-.yellow-pane ul { list-style:none; margin:0em 0.5em; padding:0px; }
+.yellow-pane ul { list-style:none; margin:0 0.5em; padding:0; }
+.yellow-pane div { overflow:hidden; }
+.yellow-panebubble { }
.yellow-btn {
- margin:0px;
- padding:4px 22px;
- font-size:0.9em;
- background-color:#eaeaea; color:#333333;
- background-image:linear-gradient(to bottom, #ffffff, #e1e1e1);
- background-repeat:repeat-x;
- border:1px solid #ccc;
- border-color:#d1d1d1 #d1d1d1 #aaaaaa;
- border-radius:4px;
- outline-offset:-2px; }
+ margin:0; padding:4px 22px;
+ background-color:#eaeaea; color:#333333;
+ background-image:linear-gradient(to bottom, #ffffff, #e1e1e1);
+ background-repeat:repeat-x;
+ border:1px solid #bbb;
+ border-color:#d1d1d1 #d1d1d1 #aaaaaa;
+ border-radius:4px;
+ outline-offset:-2px;
+ font-size:0.9em;
+}
.yellow-btn:hover, .yellow-btn:focus, .yellow-btn:active { background-image:none; }
.yellow-btn:active { box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.1); }
.yellow-btn-warn {
- text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);
background-color:#c33c35; color:#ffffff;
background-image:linear-gradient(to bottom, #ee5f5b, #bd362f);
- border-color:#b13121 #b13121 #802020; }
+ border-color:#b13121 #b13121 #802020;
+ text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);
+}
.yellow-btn-warn:active { box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.3); }
+#yellow-panelogin { }
+#yellow-panelogin h1 { margin:0.5em 0.5em; }
+#yellow-panelogin p { margin:0.5em; text-align:right; }
#yellow-paneedit { }
-#yellow-paneshow { min-width:250px; overflow:auto; }
-#yellow-paneuser { }
-#yellow-edittext { margin:0px; margin-bottom:5px; padding:5px; border:1px solid #ccc; resize:none; font-size:0.9em }
-#yellow-editbuttons { margin-bottom:5px; width:100%; }
-\ No newline at end of file
+#yellow-paneedit #yellow-edittext { margin:0; padding:5px; border:1px solid #bbb; resize:none; font-size:0.9em }
+#yellow-paneedit #yellow-editinfo { margin:0; padding:5px; border:1px solid #bbb; display:none; }
+#yellow-paneedit #yellow-editbuttons { margin:5px 0; }
+#yellow-paneshow { min-width:20em; overflow:auto; }
+#yellow-paneuser { }
+\ No newline at end of file
diff --git a/system/core/core_webinterface.js b/system/core/core_webinterface.js
@@ -4,7 +4,7 @@
// Yellow main API
var yellow =
{
- version: "0.1.0",
+ version: "0.1.1",
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(); },
@@ -16,8 +16,7 @@ var yellow =
yellow.webinterface =
{
created: false, //interface created? (boolean)
- timerId: 0, //interface timer ID
- heightOld: 0, //height of big panes
+ intervalId: 0, //interface timer interval ID
// Initialise web interface
init: function()
@@ -28,106 +27,120 @@ yellow.webinterface =
yellow.toolbox.addEvent(document, "keydown", yellow.onKeydown);
},
- // Create action bar and panes
+ // Create web interface
create: function()
{
var body = document.getElementsByTagName("body")[0];
- if(!body || !body.firstChild || this.created) return;
- if(yellow.debug) console.log("yellow.webinterface.create email:"+yellow.config.userEmail+" "+yellow.config.userName);
- if(yellow.config.userEmail)
+ if(body && body.firstChild && !this.created)
{
- var location = yellow.config.baseLocation+yellow.config.pluginsLocation;
- var element = document.createElement("div");
- element.className = "yellow-bar";
- element.setAttribute("id", "yellow-bar");
- element.innerHTML =
+ this.created = true;
+ if(yellow.debug) console.log("yellow.webinterface.create email:"+yellow.config.userEmail+" "+yellow.config.userName);
+ if(yellow.config.userEmail)
+ {
+ yellow.toolbox.insertBefore(this.createBar("yellow-bar"), body.firstChild);
+ yellow.toolbox.insertAfter(this.createPane("yellow-paneedit"), body.firstChild);
+ yellow.toolbox.insertAfter(this.createPane("yellow-paneshow"), body.firstChild);
+ yellow.toolbox.insertAfter(this.createPane("yellow-paneuser"), body.firstChild);
+ yellow.toolbox.setText(document.getElementById("yellow-username"), yellow.config.userName);
+ yellow.toolbox.setText(document.getElementById("yellow-edittext"), yellow.page.rawData);
+ } else {
+ yellow.toolbox.insertBefore(this.createBar("yellow-bar", true), body.firstChild);
+ yellow.toolbox.insertAfter(this.createPane("yellow-panelogin", true), body.firstChild);
+ this.showPane("yellow-panelogin");
+ }
+ clearInterval(this.intervalId);
+ }
+ },
+
+ // Create bar
+ createBar: function(id, simple)
+ {
+ if(yellow.debug) console.log("yellow.webinterface.createBar id:"+id);
+ var elementBar = document.createElement("div");
+ elementBar.className = "yellow-bar yellow";
+ elementBar.setAttribute("id", id);
+ if(!simple)
+ {
+ var location = yellow.config.baseLocation+yellow.config.pluginLocation;
+ elementBar.innerHTML =
"<div class=\"yellow-barleft\">"+
- "<img src=\""+location+"core_webinterface.png\" width=\"16\" height=\"16\"> Yellow"+
- "<button class=\"yellow-barlink\" onclick=\"yellow.onShow('yellow-paneedit');\">"+this.getText("Edit")+"</button>"+
- "<button class=\"yellow-barlink\" onclick=\"yellow.onShow('yellow-paneshow');\">"+this.getText("Show")+"</button>"+
+ "<a href=\"http://datenstrom.se/yellow/\" target=\"_blank\"><img src=\""+location+"core_webinterface.png\" width=\"16\" height=\"16\"> Yellow</a>"+
+ "<a href=\"#\" onclick=\"yellow.onShow('yellow-paneedit'); return false;\">"+this.getText("Edit")+"</a>"+
+ "<a href=\"#\" onclick=\"yellow.onShow('yellow-paneshow'); return false;\">"+this.getText("Show")+"</a>"+
"</div>"+
"<div class=\"yellow-barright\">"+
- "<button class=\"yellow-barlink\" onclick=\"yellow.onShow('yellow-paneuser');\" id=\"yellow-username\">"+this.getText("User")+"</button>"+
+ "<a href=\"#\" onclick=\"yellow.onShow('yellow-paneuser'); return false;\" id=\"yellow-username\">"+this.getText("User")+"</a>"+
"</div>";
- body.insertBefore(element, body.firstChild);
- yellow.toolbox.insertAfter(this.createPane("yellow-paneedit"), body.firstChild);
- yellow.toolbox.insertAfter(this.createPane("yellow-paneshow", yellow.pages), body.firstChild);
- yellow.toolbox.insertAfter(this.createPane("yellow-paneuser"), body.firstChild);
- yellow.toolbox.setText(document.getElementById("yellow-username"), yellow.config.userName+" ↓");
- yellow.toolbox.setText(document.getElementById("yellow-edittext"), yellow.page.rawData);
- } else {
- var element = document.createElement("div");
- element.className = "yellow-login";
- element.setAttribute("id", "yellow-login");
- element.innerHTML =
- "<form method=\"post\" name=\"formlogin\">"+
- "<input type=\"hidden\" name=\"action\" value=\"login\"/>"+
- "<h1>"+this.getText("LoginText")+"</h1>"+
- "<p>"+this.getText("LoginEmail")+" <input name=\"email\" maxlength=\"64\" /></p>"+
- "<p>"+this.getText("LoginPassword")+" <input type=\"password\" name=\"password\" maxlength=\"64\" /></p>"+
- "<p><input class=\"yellow-btn\" type=\"submit\" value=\""+this.getText("LoginButton")+"\"/></p>"+
- "</form>";
- body.insertBefore(element, body.firstChild);
}
- clearInterval(this.intervalId);
- this.created = true;
- this.resizePanes(true);
+ return elementBar;
},
// Create pane
- createPane: function(id, data)
+ createPane: function(id, simple)
{
if(yellow.debug) console.log("yellow.webinterface.createPane id:"+id);
- var outDiv = document.createElement("div");
- if(id == "yellow-paneedit")
+ var elementPane = document.createElement("div");
+ elementPane.className = simple ? "yellow-pane" : "yellow-pane yellow-panebubble";
+ elementPane.setAttribute("id", id);
+ elementPane.style.display = "none";
+ var elementDiv = document.createElement("div");
+ elementDiv.setAttribute("id", id+"content");
+ if(id == "yellow-panelogin")
{
- outDiv.innerHTML =
+ elementDiv.innerHTML =
+ "<h1>"+this.getText("LoginText")+"</h1>"+
+ "<form method=\"post\" name=\"formlogin\">"+
+ "<input type=\"hidden\" name=\"action\" value=\"login\"/>"+
+ "<p>"+this.getText("LoginEmail")+" <input name=\"email\" maxlength=\"64\" /></p>"+
+ "<p>"+this.getText("LoginPassword")+" <input type=\"password\" name=\"password\" maxlength=\"64\" /></p>"+
+ "<p><input class=\"yellow-btn\" type=\"submit\" value=\""+this.getText("LoginButton")+"\"/></p>"+
+ "</form>";
+ } else if(id == "yellow-paneedit") {
+ elementDiv.innerHTML =
"<p>Editing page...</p>"+
"<form method=\"post\" name=\"formeditor\">"+
"<input type=\"hidden\" name=\"action\" value=\"edit\"/>"+
"<textarea id=\"yellow-edittext\" name=\"rawdata\"></textarea>"+
+ "<div id=\"yellow-editinfo\"/></div>"+
"<div id=\"yellow-editbuttons\">"+
"<input class=\"yellow-btn\" type=\"submit\" value=\""+this.getText("SaveButton")+"\"/>"+
"</div>"+
"</form>";
} else if(id == "yellow-paneshow") {
- outDiv.innerHTML = "<p>Showing files...</p>";
- for(var n in data)
+ elementDiv.innerHTML = "<p>Showing files...</p>";
+ var elementUl = document.createElement("ul");
+ for(var n in yellow.pages)
{
- var outUl = document.createElement("ul");
- var outLi = document.createElement("li");
- var outA = document.createElement("a");
- outA.setAttribute("href", data[n]["location"]);
- yellow.toolbox.setText(outA, data[n]["title"]);
- outLi.appendChild(outA);
- outUl.appendChild(outLi);
- outDiv.appendChild(outUl);
+ var elementLi = document.createElement("li");
+ var elementA = document.createElement("a");
+ elementA.setAttribute("href", yellow.pages[n]["location"]);
+ yellow.toolbox.setText(elementA, yellow.pages[n]["title"]);
+ elementLi.appendChild(elementA);
+ elementUl.appendChild(elementLi);
}
+ elementDiv.appendChild(elementUl);
} else if(id == "yellow-paneuser") {
- outDiv.innerHTML =
+ elementDiv.innerHTML =
"<p>"+yellow.config.userEmail+"</p>"+
"<form method=\"post\" name=\"formlogout\">"+
"<input type=\"hidden\" name=\"action\" value=\"logout\"/>"+
"<p><a href=\"javascript:document.formlogout.submit();\">"+this.getText("UserLogout")+"</a></p> "+
"</form>";
}
- var element = document.createElement("div");
- element.className = "yellow-pane yellow-panebubble";
- element.setAttribute("id", id);
- element.style.display = "none";
- element.appendChild(outDiv);
- return element;
+
+ elementPane.appendChild(elementDiv);
+ return elementPane;
},
- // Show pane
+ // Show or hide pane
showPane: function(id)
{
- if(document.getElementById(id).style.display != "block")
+ if(!yellow.toolbox.isVisible(document.getElementById(id)))
{
this.hidePanes();
if(yellow.debug) console.log("yellow.webinterface.showPane id:"+id);
document.getElementById(id).style.display = "block";
- this.resizePanes(true);
+ this.resizePanes();
} else {
this.hidePane(id);
}
@@ -136,7 +149,7 @@ yellow.webinterface =
// Hide pane
hidePane: function(id)
{
- if(document.getElementById(id).style.display != "none")
+ if(yellow.toolbox.isVisible(document.getElementById(id)))
{
if(yellow.debug) console.log("yellow.webinterface.hidePane id:"+id);
document.getElementById(id).style.display = "none";
@@ -174,56 +187,43 @@ yellow.webinterface =
if(keycode == 27) this.hidePanes();
},
- // Resize panes, recalculate height and width where needed
- resizePanes: function(force)
+ // Resize panes, recalculate width and height where needed
+ resizePanes: function()
{
- var interfaceHeight;
- if(window.innerHeight)
- {
- interfaceHeight = window.innerHeight;
- } else {
- if(window.document.documentElement && window.document.documentElement.clientHeight)
- {
- interfaceHeight = window.document.documentElement.clientHeight;
- } else {
- interfaceHeight = window.document.body.clientHeight;
- }
- }
- if((interfaceHeight!=this.heightOld || force) && document.getElementById("yellow-bar"))
+ if(document.getElementById("yellow-bar"))
{
- this.heightOld = interfaceHeight;
var elementBar = document.getElementById("yellow-bar");
- var borderRadius = 6;
- var panePadding = 5;
- var editPadding = 5;
- var interfaceTop = elementBar.offsetHeight + 1;
- interfaceHeight -= interfaceTop + borderRadius*2;
- if(yellow.debug) console.log("yellow.webinterface.resizePanes windowY:"+interfaceHeight+" actionbarY:"+document.getElementById("yellow-bar").offsetHeight+" buttonsY:"+document.getElementById("yellow-editbuttons").offsetHeight+" editorX:"+document.getElementById("yellow-paneedit").offsetWidth);
-
- this.setPaneHeight(document.getElementById("yellow-paneedit"), interfaceHeight, null, interfaceTop);
- this.setPaneHeight(document.getElementById("yellow-paneshow"), null, interfaceHeight, interfaceTop);
- this.setPaneHeight(document.getElementById("yellow-paneuser"), null, null, interfaceTop);
-
- var editTextHeight = interfaceHeight - panePadding*2 - editPadding*2 - 10
- - (document.getElementById("yellow-edittext").offsetTop-document.getElementById("yellow-paneedit").getElementsByTagName("p")[0].offsetTop)
- - document.getElementById("yellow-editbuttons").offsetHeight;
- document.getElementById("yellow-paneedit").style.width = Math.max(0, elementBar.offsetWidth - panePadding*2) + "px";
- document.getElementById("yellow-edittext").style.height = Math.max(0, editTextHeight) + "px";
- document.getElementById("yellow-edittext").style.width = Math.max(0, document.getElementById("yellow-paneedit").offsetWidth - 2 - panePadding*2 - editPadding*2) + "px";
- document.getElementById("yellow-paneuser").style.marginLeft = Math.max(0, elementBar.offsetWidth - document.getElementById("yellow-paneuser").offsetWidth) + "px";
- }
- },
-
- // Set pane height
- setPaneHeight: function(element, height, maxHeight, top)
- {
- if(maxHeight)
- {
- element.style.maxHeight = Math.max(0, maxHeight) + "px";
- } else if(height) {
- element.style.height = Math.max(0, height) + "px";
+ var paneTop = yellow.toolbox.getOuterTop(elementBar) + yellow.toolbox.getOuterHeight(elementBar);
+ var paneWidth = yellow.toolbox.getOuterWidth(elementBar, true);
+ var paneHeight = yellow.toolbox.getWindowHeight() - paneTop - yellow.toolbox.getOuterHeight(elementBar);
+ if(yellow.toolbox.isVisible(document.getElementById("yellow-panelogin")))
+ {
+ yellow.toolbox.setOuterWidth(document.getElementById("yellow-panelogin"), paneWidth);
+ }
+ if(yellow.toolbox.isVisible(document.getElementById("yellow-paneedit")))
+ {
+ yellow.toolbox.setOuterTop(document.getElementById("yellow-paneedit"), paneTop);
+ yellow.toolbox.setOuterHeight(document.getElementById("yellow-paneedit"), paneHeight);
+ yellow.toolbox.setOuterWidth(document.getElementById("yellow-paneedit"), paneWidth);
+ yellow.toolbox.setOuterWidth(document.getElementById("yellow-edittext"), yellow.toolbox.getWidth(document.getElementById("yellow-paneedit")));
+ var height1 = yellow.toolbox.getHeight(document.getElementById("yellow-paneedit"));
+ var height2 = yellow.toolbox.getOuterHeight(document.getElementById("yellow-paneeditcontent"));
+ var height3 = yellow.toolbox.getOuterHeight(document.getElementById("yellow-edittext"));
+ yellow.toolbox.setOuterHeight(document.getElementById("yellow-edittext"), height1 - height2 + height3);
+ }
+ if(yellow.toolbox.isVisible(document.getElementById("yellow-paneshow")))
+ {
+ yellow.toolbox.setOuterTop(document.getElementById("yellow-paneshow"), paneTop);
+ yellow.toolbox.setOuterHeight(document.getElementById("yellow-paneshow"), paneHeight, true);
+ }
+ if(yellow.toolbox.isVisible(document.getElementById("yellow-paneuser")))
+ {
+ yellow.toolbox.setOuterTop(document.getElementById("yellow-paneuser"), paneTop);
+ yellow.toolbox.setOuterHeight(document.getElementById("yellow-paneuser"), paneHeight, true);
+ yellow.toolbox.setOuterLeft(document.getElementById("yellow-paneuser"), paneWidth - yellow.toolbox.getOuterWidth(document.getElementById("yellow-paneuser")), true);
+ }
+ if(yellow.debug) console.log("yellow.webinterface.resizePanes bar:"+elementBar.offsetWidth+"/"+elementBar.offsetHeight);
}
- element.style.top = top + "px";
},
// Return text string
@@ -239,9 +239,15 @@ yellow.toolbox =
// Set element text
setText: function(element, text)
{
- while(element.firstChild!==null) element.removeChild(element.firstChild);
+ while(element.firstChild !== null) element.removeChild(element.firstChild);
element.appendChild(document.createTextNode(text));
},
+
+ // Insert element before element
+ insertBefore: function(newElement, referenceElement)
+ {
+ referenceElement.parentNode.insertBefore(newElement, referenceElement);
+ },
// Insert element after element
insertAfter: function(newElement, referenceElement)
@@ -268,6 +274,148 @@ yellow.toolbox =
{
e = e ? e : window.event;
return e.keyCode
+ },
+
+ // Set element width/height in pixel, including padding and border
+ setOuterWidth: function(element, width, maxWidth)
+ {
+ width -= this.getBoxSize(element).width;
+ if(maxWidth)
+ {
+ element.style.maxWidth = Math.max(0, width) + "px";
+ } else {
+ element.style.width = Math.max(0, width) + "px";
+ }
+ },
+
+ setOuterHeight: function(element, height, maxHeight)
+ {
+ height -=this.getBoxSize(element).height;
+ if(maxHeight)
+ {
+ element.style.maxHeight = Math.max(0, height) + "px";
+ } else {
+ element.style.height = Math.max(0, height) + "px";
+ }
+ },
+
+ // Return element width/height in pixel, including padding and border
+ getOuterWidth: function(element, includeMargin)
+ {
+ width = element.offsetWidth;
+ if(includeMargin) width += this.getMarginSize(element).width;
+ return width;
+ },
+
+ getOuterHeight: function(element, includeMargin)
+ {
+ height = element.offsetHeight;
+ if(includeMargin) height += this.getMarginSize(element).height;
+ return height;
+ },
+
+ // Return element width/height in pixel
+ getWidth: function(element)
+ {
+ return element.offsetWidth - this.getBoxSize(element).width;
+ },
+
+ getHeight: function(element)
+ {
+ return element.offsetHeight - this.getBoxSize(element).height;
+ },
+
+ // Set element top/left position in pixel
+ setOuterTop: function(element, top, marginTop)
+ {
+ if(marginTop)
+ {
+ element.style.marginTop = Math.max(0, top) + "px";
+ } else {
+ element.style.top = Math.max(0, top) + "px";
+ }
+ },
+
+ setOuterLeft: function(element, left, marginLeft)
+ {
+ if(marginLeft)
+ {
+ element.style.marginLeft = Math.max(0, left) + "px";
+ } else {
+ element.style.left = Math.max(0, left) + "px";
+ }
+ },
+
+ // Return element top/left position in pixel
+ getOuterTop: function(element)
+ {
+ var top = element.getBoundingClientRect().top;
+ return top + (window.pageYOffset || document.documentElement.scrollTop);
+ },
+
+ getOuterLeft: function(element)
+ {
+ var left = element.getBoundingClientRect().left;
+ return left + (window.pageXOffset || document.documentElement.scrollLeft);
+ },
+
+ // Return window width/height in pixel
+ getWindowWidth: function()
+ {
+ return window.innerWidth || document.documentElement.clientWidth;
+ },
+
+ getWindowHeight: function()
+ {
+ return window.innerHeight || document.documentElement.clientHeight;
+ },
+
+ // Return element CSS property
+ getStyle: function(element, property)
+ {
+ var string = "";
+ if(window.getComputedStyle)
+ {
+ string = window.getComputedStyle(element, null).getPropertyValue(property);
+ } else {
+ property = property.replace(/\-(\w)/g, function(match, m) { return m.toUpperCase(); });
+ string = element.currentStyle[property];
+ }
+ return string;
+ },
+
+ // Return element CSS padding and border
+ getBoxSize: function(element)
+ {
+ var paddingLeft = parseFloat(this.getStyle(element, "padding-left")) || 0;
+ var paddingRight = parseFloat(this.getStyle(element, "padding-right")) || 0;
+ var borderLeft = parseFloat(this.getStyle(element, "border-left-width")) || 0;
+ var borderRight = parseFloat(this.getStyle(element, "border-right-width")) || 0;
+ var width = paddingLeft + paddingRight + borderLeft + borderRight;
+ var paddingTop = parseFloat(this.getStyle(element, "padding-top")) || 0;
+ var paddingBottom = parseFloat(this.getStyle(element, "padding-bottom")) || 0;
+ var borderTop = parseFloat(this.getStyle(element, "border-top-width")) || 0;
+ var borderBottom = parseFloat(this.getStyle(element, "border-bottom-width")) || 0;
+ var height = paddingTop + paddingBottom + borderTop + borderBottom;
+ return { "width":width, "height":height };
+ },
+
+ // Return element CSS margin
+ getMarginSize: function(element)
+ {
+ var marginLeft = parseFloat(this.getStyle(element, "margin-left")) || 0;
+ var marginRight = parseFloat(this.getStyle(element, "margin-right")) || 0;
+ var width = marginLeft + marginRight;
+ var marginTop = parseFloat(this.getStyle(element, "margin-top")) || 0;
+ var marginBottom = parseFloat(this.getStyle(element, "margin-bottom")) || 0;
+ var height = marginTop + marginBottom;
+ return { "width":width, "height":height };
+ },
+
+ // Check if element exists and is visible
+ isVisible: function(element)
+ {
+ return element && element.style.display != "none";
}
}
diff --git a/system/core/core_webinterface.php b/system/core/core_webinterface.php
@@ -5,7 +5,7 @@
// Web interface core plugin
class Yellow_Webinterface
{
- const Version = "0.1.0";
+ const Version = "0.1.1";
var $yellow; //access to API
var $users; //web interface users
var $activeLocation; //web interface location? (boolean)
@@ -50,9 +50,9 @@ class Yellow_Webinterface
$header = "";
if($this->isWebinterfaceLocation())
{
- $location = $this->yellow->config->getHtml("baseLocation").$this->yellow->config->getHtml("pluginsLocation");
+ $location = $this->yellow->config->getHtml("baseLocation").$this->yellow->config->getHtml("pluginLocation");
$language = $this->isUser() ? $this->users->getLanguage($this->activeUserEmail) : $this->yellow->page->get("language");
- $header .= "<link href=\"{$location}core_webinterface.css\" rel=\"styleSheet\" media=\"all\" type=\"text/css\" />\n";
+ $header .= "<link rel=\"styleSheet\" type=\"text/css\" media=\"all\" href=\"{$location}core_webinterface.css\" />\n";
$header .= "<script type=\"text/javascript\" src=\"{$location}core_webinterface.js\"></script>\n";
$header .= "<script type=\"text/javascript\">\n";
$header .= "// <