zen 0.1a

data/spec/javascript/css/style.css

@@ -0,0 +1,204 @@
+#container
+{
+  margin-top: 20px;
+}
+article
+{
+  margin-bottom: 20px;
+}
+ul, ol
+{
+  margin-left: 0px;
+}
+  ul li, ol li
+  {
+    margin-left: 15px;    
+  }
+
+/* Style our tabs */
+.tabs, .ajax_tabs
+{
+  background:      #ddd;
+  border:          1px solid #aaa;
+  list-style-type: none;
+  margin:          0px;
+  padding:         10px 5px;
+}
+  .tabs li, .ajax_tabs li
+  {
+    border:  1px solid #bbb;
+    float:   left;
+    margin:  0px 5px;
+    padding: 0px;
+  }
+    .tabs li a, .ajax_tabs li a
+    {
+      background:      #eee;
+      border:          1px solid #fff;
+      color:           #000;
+      display:         block;
+      padding:         5px 8px;
+      text-decoration: none;
+    }
+    .tabs li a:hover, .ajax_tabs li a:hover, .tabs li.active a, .ajax_tabs li.active a
+    {
+      background: #fff;
+    }
+.tab_content
+{
+  background: #f2f2f2;
+  border:     1px solid #aaa;
+  border-top: 1px solid #fff;
+  padding:    10px;
+}
+
+/* Notifications */
+#notification_container
+{
+  position: absolute;
+  right:    10px;
+  top:      10px;
+}
+.notification
+{
+  background:    #000;
+  border-radius: 10px;
+  cursor:        pointer;
+  color:         #fff;
+  margin-bottom: 10px;
+  opacity:       0.7;
+  padding:       10px;
+  width:         230px;
+  
+  -moz-border-radius:    10px;
+  -webkit-border-radius: 10px;
+  -o-border-radius:      10px;
+  -khtml-border-radius:  10px;
+}
+  .notification .close
+  {
+    background: url("../images/close.png") no-repeat center left;
+    display:    none;
+    height:     30px;
+    left:       0px;
+    margin-top: -10px;
+    position:   absolute;
+    width:      30px;
+  }
+  .notification:hover .close
+  {
+    display: block;
+  }
+  .notification .image
+  {
+    float:        left;
+    margin-top:   5px;
+    margin-right: 10px;
+  }
+  .notification .title
+  {
+    font-size:     14px;
+    font-weight:   bold;
+    margin-bottom: 10px;
+  }
+  
+/* Styles for the visual editor */
+.editor_container
+{
+  background: #eee;
+  border:     1px solid #ccc;
+  padding:    5px;
+  width:      800px;
+}
+.editor_container .editor_toolbar
+{
+  height:    30px;
+}
+  .editor_container .editor_toolbar:after
+  {
+    clear:       both;
+    content:     ' ';
+    display:     block;
+    font-size:   0;
+    height:      0;
+    line-height: 0;
+    visibility:  hidden;
+    width:       0;
+  }
+    .editor_container .editor_toolbar ul
+    {
+      margin:  0px;
+      padding: 0px;
+    }
+      .editor_container .editor_toolbar ul li
+      {
+        border:          1px solid #ccc;
+        cursor:          pointer;
+        display:         block;
+        float:           left;
+        list-style-type: none;
+        height:          22px;
+        margin:          0px 5px 0px 0px;
+        padding:         3px 10px 0px 10px;
+      }
+      .editor_container .editor_toolbar ul li:hover
+      {
+        background: #ddd;
+      }
+.editor_container textarea
+{
+  border: 1px solid #ccc;
+  resize: both;
+  width:  793px;
+}
+
+/* Modal windows */
+#modal_background, #modal_container
+{
+  height:     100%;
+  left:       0px; 
+  position:   fixed;
+  top:        0px;
+  width:      100%;
+}
+#modal_container
+{
+  position:       absolute!important;
+}
+#modal_container:after
+{
+  clear:      both;
+  content:    '.';
+  display:    block;
+  height:     0;
+  visibility: hidden;
+}
+#modal_background
+{
+  background: #444;
+  opacity:    0.8;
+}
+  #modal_container #modal_window
+  {
+    background: #fff;
+    border:     1px solid #000;
+    margin:     5% auto 20px auto;
+    min-height: 50px;
+    padding:    20px 10px 10px 10px;
+    width:      50%;
+  }
+  #modal_container #modal_window.fullscreen
+  {
+    height:     90%;
+    margin-top: 2%;
+    width:      95%;
+  }
+    #modal_container #modal_window #modal_close
+    {
+      background: url("../images/close.png");
+      cursor:     pointer;
+      display:    block;
+      height:     30px;
+      margin:     -50px 0px 0px -20px;
+      width:      30px;
+    }

data/spec/javascript/css/typography.css

@@ -0,0 +1,70 @@
+/**
+ * Typography.css is a stylesheet used to style headings, paragraphs, etc.
+ * Note that this stylesheet should only be used to style global elements.
+ *
+ * @author  Yorick Peterse
+ * @since   0.1
+ * @license MIT License
+ * @link    http://zen-cms.com/
+ */
+
+/* Headings */
+h1 
+{
+  font-size:25px;
+}
+h2 
+{
+  font-size:23px;
+}
+h3 
+{
+  font-size:21px;
+}
+h4 
+{
+  font-size:19px;
+}
+h5 
+{
+  font-size:17px;
+}
+h6 
+{
+  font-size:15px;
+}
+
+/* List elements */
+ol 
+{
+  list-style:decimal;
+}
+ul 
+{
+  list-style:disc;
+}
+li 
+{
+  margin-left:30px;
+}
+
+/* General */
+p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset 
+{
+  margin-bottom: 20px;
+}
+h1,h2,h3,h4,h5,h6
+{
+  margin-bottom: 5px;
+}
+body
+{
+  font:13px/1.5 'Helvetica Neue', Helvetica,Arial,'Liberation Sans',FreeSans,sans-serif;
+}
+hr
+{
+  border:           0 #ccc solid;
+  border-top-width: 1px;
+  clear:            both;
+  height:           0;
+}

data/spec/javascript/editor/index.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    
+    <!-- Core Javascript files required by all classes -->
+    <script src="../../../lib/zen/public/admin/js/mootools/core.js"></script>
+    <script src="../../../lib/zen/public/admin/js/mootools/more.js"></script>
+    <script src="../js/namespace.js"></script>
+    
+    <!-- Widgets, etc -->
+    <script src="../../../lib/zen/public/admin/js/zen/editor/base.js"></script>
+    <script src="../../../lib/zen/public/admin/js/zen/editor/drivers/textile.js"></script>
+    <script src="../../../lib/zen/public/admin/js/zen/editor/drivers/markdown.js"></script>
+    <script src="../../../lib/zen/public/admin/js/zen/editor/drivers/html.js"></script>
+    <script src="../js/editor.js"></script>
+    
+    <!-- Stylesheets -->
+    <link rel="stylesheet" href="../css/base.css">
+    <link rel="stylesheet" href="../css/typography.css">
+    <link rel="stylesheet" href="../css/style.css">
+    
+    <title>Zen &bull; Editors</title>
+  </head>
+  <body>
+    
+    <div id="container" class="container_12 clearfix">
+      <section>
+        
+        <article class="grid_12">
+          <header>
+            <h1>HTML Editor</h1>
+          </header>
+          
+          <textarea cols="90" rows="15" class="editor"></textarea>
+        </article>
+        
+        <article class="grid_12">
+          <header>
+            <h1>Textile Editor</h1>
+          </header>
+          
+          <textarea cols="90" rows="15" class="textile"></textarea>
+        </article>
+        
+        <article class="grid_12">
+          <header>
+            <h1>Markdown Editor</h1>
+          </header>
+          
+          <textarea cols="90" rows="15" class="markdown"></textarea>
+        </article>
+        
+        <article class="grid_12">
+          <header>
+            <h1>Custom buttons</h1>
+          </header>
+          
+          <textarea cols="90" rows="15" class="custom"></textarea>
+        </article>
+        
+      </section>
+    </div>
+  </body>
+</html>

data/spec/javascript/js/editor.js

@@ -0,0 +1,16 @@
+window.addEvent('domready', function()
+{
+  new Zen.Editor.Base('.editor').display();
+  new Zen.Editor.Base('.textile' , {format: 'textile'}).display();
+  new Zen.Editor.Base('.markdown', {format: 'markdown'}).display();
+  
+  // Custom editor buttons
+  custom = new Zen.Editor.Base('.custom', {format: 'html'})
+  custom.addButtons(
+  [
+    {name: 'alert' , html: 'Alert!', callback: function() {alert("Alert alert!");}},
+    {name: 'smiley', html: ':D'    , callback: function() {alert(":D");}}
+  ]);
+  
+  custom.display();
+});

data/spec/javascript/js/modal.js

@@ -0,0 +1,12 @@
+window.addEvent('domready', function()
+{
+  $('normal').addEvent('click', function(event)
+  {
+    event.preventDefault(); new Zen.Modal("Normal modal window");
+  });
+  
+  $('fullscreen').addEvent('click', function(event)
+  {
+    event.preventDefault(); new Zen.Modal("Fullscreen modal window", {fullscreen: true});
+  });
+});

data/spec/javascript/js/namespace.js

@@ -0,0 +1,2 @@
+Zen         = {};
+Zen.Objects = {};

data/spec/javascript/js/notification.js

@@ -0,0 +1,43 @@
+window.addEvent('domready', function()
+{
+  $('standard_notification').addEvent('click', function(event)
+  {
+    event.stop();
+    
+    // Trigger a new notification
+    new Zen.Notification(
+    {
+      title: 'Standard Notification',
+      content: 'This is an example of a standard notification',
+      image: '../images/info.png'
+    });
+  });
+  
+  $('sticky_notification').addEvent('click', function(event)
+  {
+    event.stop();
+    
+    // Trigger a new notification
+    new Zen.Notification(
+    {
+      title: 'Sticky Notification',
+      content: 'This is an example of a sticky notification. You\'ll have to click it in order to remove it.',
+      image: '../images/info.png',
+      sticky: true
+    });
+  });
+  
+  $('delay_notification').addEvent('click', function(event)
+  {
+    event.stop();
+    
+    // Trigger a new notification
+    new Zen.Notification(
+    {
+      title: 'Delayed Notification',
+      content: 'This notification will fade out after 5 seconds.',
+      image: '../images/info.png',
+      duration: 5000
+    });
+  });
+});

data/spec/javascript/js/tabs.js

@@ -0,0 +1,8 @@
+window.addEvent('domready', function()
+{
+  // Create a new instance of a regular set of tabs
+  Zen.Objects.Tabs = new Zen.Tabs('.tabs');
+  
+  // Create a new instance of a set of tabs powered by Ajax
+  Zen.Objects.AjaxTabs = new Zen.Tabs('.ajax_tabs', { ajax: true, default: 'li:last-child' });
+});

data/spec/javascript/modal/index.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    
+    <!-- Core Javascript files required by all classes -->
+    <script src="../../../lib/zen/public/admin/js/mootools/core.js"></script>
+    <script src="../../../lib/zen/public/admin/js/mootools/more.js"></script>
+    <script src="../js/namespace.js"></script>
+    
+    <!-- Widgets, etc -->
+    <script src="../../../lib/zen/public/admin/js/zen/modal.js"></script>
+    <script src="../js/modal.js"></script>
+    
+    <!-- Stylesheets -->
+    <link rel="stylesheet" href="../css/base.css">
+    <link rel="stylesheet" href="../css/typography.css">
+    <link rel="stylesheet" href="../css/style.css">
+    
+    <title>Zen &bull; Editors</title>
+  </head>
+  <body>
+    
+    <div id="container" class="container_12 clearfix">
+      <section>
+        
+        <article class="grid_12">
+          <header>
+            <h1>Modal Windows</h1>
+          </header>
+          
+          <ul>
+            <li>
+              <a href="#" id="normal">Normal</a>
+            </li>
+            <li>
+              <a href="#" id="fullscreen">Fullscreen</a>
+            </li>
+          </ul>
+        </article>
+        
+      </section>
+    </div>
+  </body>
+</html>