added an almost usuable editor

app.js

@@ -60,8 +60,8 @@ App.configure(function(){
   App.use(passport.session());
   App.use(Express.bodyParser());
   App.use(Express.methodOverride());
-  App.use(App.router);
   App.use(Express.static(__dirname + '/public'));
+  App.use(App.router);
 });
 
 App.configure('development', function(){
@@ -79,7 +79,7 @@ App.post('/signin', Routes.signInPost);
 App.get('/signup', Routes.signUp);
 App.post('/signup', Routes.signUpPost);
 App.get('/signout', Routes.signout)
-App.get('/:name', Routes.view);
+//App.get('/:name', Routes.view);
 App.get('/:name/edit', Routes.edit);
 App.post('/:name', Routes.save);
 

db.js

@@ -54,10 +54,10 @@ function fullPath(files) {
 exports.loadPage = function (name, callback) {
   var path = pathFromNameMd(name);
   console.log("..."+name)
-  if (name != "home"){
-    return callback(null,{exists: false})
+//  if (name != "home"){
+//    return callback(null,{exists: false})
 
-  }
+//  }
   
 
   FS.readdir(pathFromDir(), function(err,files){
@@ -65,10 +65,10 @@ exports.loadPage = function (name, callback) {
       var fileObj = []
       async.map(pathfiles, FS.readFile, function(err, data){
           for( var  i = 0; i < files.length; i++){
-            console.log(files[i])
+            //console.log(files[i])
             try{
               var html = Markdown(data[i].toString())
-              console.log(html)
+              //console.log(html)
               fileObj.push({name : files[i], markdown:data[i], html:html} )
             }
             catch (err){ }
@@ -85,7 +85,7 @@ exports.loadPage = function (name, callback) {
 
 exports.editPage = function (name, callback) {
   var path = pathFromNameMd(name);
- 
+  console.log(path) 
 
   
   FS.readFile(path, 'utf8', function (err, markdown) {
@@ -131,6 +131,8 @@ exports.editPage = function (name, callback) {
 // Saving is simple.  Just put the markdown in the file
 exports.savePage = function (name, value, callback) {
   var path = pathFromNameMd(name);
+  console.log(path)
+  console.log(value)
   FS.writeFile(path, value, callback);
 };
 

pages/01_home.markdown

@@ -4,5 +4,23 @@ p(bla). this is a simple and stupid wiki :)
 
 p(test). it wil blaaa
 
-!http://stuffpoint.com/lol-cats/image/29077-lol-cats-magical-kitteh.png!
+Lorem ipsum dolor sit amet, mel brute integre ei. At cibo nullam omnesque eam. Mei ea melius fabellas. Legere salutandi ei cum, aperiam repudiare vulputate ea eam, ei has virtute fabellas instructior. Aeque voluptua convenire at pro. Sale ridens id est, at sit prompta docendi platonem, ex vis utinam dissentiet.
+
+Mea graece malorum lucilius at. Est quis placerat moderatius ne. Soleat ancillae an has. Sea no tale aeterno quaeque, ei est labores legimus conceptam. Pertinax deseruisse quaerendum sea et, vim option suavitate intellegat ex.
+
+Facete ancillae molestie ex sit, et possim nonumes aliquando ius, ne assum albucius incorrupte ius. Usu movet solet qualisque no, te sumo laoreet verterem vel, duo id falli splendide forensibus. Ei amet case est. Duo dissentias eloquentiam ut, nam ex eius nemore. Wisi prima rationibus et vim.
+
+Mollis aliquam disputando ut ius, simul nostrud eligendi quo cu. Mei no modus gubergren, te diceret saperet ius, vis no iudico accusamus. Eam ad case movet, qui sanctus accumsan ut. Ea ignota alienum delicata est. Cum justo appellantur ea, eum ex natum dicta dissentias.
+
+Et ius nonumy adipisci cotidieque, at has euismod oporteat, pro no praesent consetetur delicatissimi. Vix at odio minimum disputando, vel quas concludaturque eu, per mundi alienum id. Ex lorem vivendo fabellas duo, tamquam disputando eu per. Adolescens accommodare usu te. At magna libris oportere nam, ex usu atqui alienum percipitur. Nec no graeci eirmod concludaturque.
+
+Te minim adipisci indoctum nec. Detraxit legendos ne vim, cibo labore consetetur et eam, vidit discere vis ad. Usu eu falli latine oportere. Omnium cotidieque mei ne, dicat oportere mediocrem sed id.
+
+Et eum sonet ponderum adversarium. No discere nominavi menandri his, ut dolor possim nec, ne sed reque corpora assueverit. Eum ad graeco suavitate scriptorem. No pro percipit recusabo, est idque aeque elaboraret id. Ad facer postulant voluptaria vel. Te natum quaerendum mea.
+
+Discere pertinax temporibus an has, periculis persecuti his ex. Nam ei elit assentior, per augue moderatius consequuntur te. Nam ut aperiri facilis necessitatibus, erat detracto gubergren in vix. Mei ne congue aliquam, denique constituto sit ut.
+
+Ius in veri ocurreret assueverit, et cum soleat nemore splendide. In vel magna inermis qualisque. Nihil congue maiestatis his an, in adhuc platonem senserit vix, ex pri dico fierent. At vel esse velit, case fastidii ne vim. Eam dicta fabellas pertinacia an.
+
+Ius at eruditi percipit. Has ei elitr lobortis honestatis, eam solet veniam graecis an, tota suscipiantur id sea. At munere putant quo, mel cu ridens dictas debitis. Erroribus imperdiet in quo. Eam scripta integre facilisis ea, menandri evertitur neglegentur pro ex, per amet quaestio sententiae et.
 

pages/02_zoor.markdown

@@ -1,6 +1,6 @@
-h3. zoor
+h3. bla
+
+|_. head |_. table |_. row |
+| a | table | row 11 |
+| a | table | row 2 |
 
-|_. Tables        |_. Are           |_. Cool  |
-| col 3 is      | p(heay). right-aligned | $1600 |
-| col 2 is      | centered      |   $12 |
-| zebra stripes | are neat      |    $1 |

public/js/editor.js

@@ -0,0 +1,138 @@
+jQuery(function($){
+
+  var max_delay = 3000; // longest update pause (in ms)
+  var processing_time = 0;
+  var last = null;
+  var help_text = '';
+
+  var tx_input     = $('#tx_input');
+  var input        = tx_input[0];
+  input.value = input.innerHTML;
+  tx_input.val(input.value)
+  var text_preview = $('#text_preview')[0];
+  var html_output  = $('#html_output')[0];
+
+
+  function convert_text ( newval ) {
+
+    // make sure we're getting a string here because we want to 
+    // be able to pass this function to setTimeout (passes number)
+    if ( arguments.length === 1 && typeof newval === 'string' ) {
+      input.value = newval;
+    }
+
+    var text = tx_input.val();
+
+    if ( text && text == last ) { return; } // no action needed
+    last = text;
+
+    var startTime = new Date() * 1; 
+    var html = textile.convert( text );
+    var endTime = new Date() * 1;
+    processing_time = endTime - startTime;
+
+    text_preview.innerHTML = html;
+    //html_output.value = html;
+
+    // save last output text to storage if we have it
+    if ( supports_html5_storage() ) {
+      if ( !input.value || input.value == help_text ) {
+        localStorage.removeItem( "textile-dingus" );
+      }
+      else {
+        localStorage.setItem( "textile-dingus", input.value );
+      }
+    }
+
+  }
+
+
+  var supports_html5_storage = function () {
+    var r = false;
+    try { r = 'localStorage' in window && window['localStorage'] !== null; } catch (e) { r = false; }
+    supports_html5_storage = r ? function () { return true; } : function () { return false; };
+    return r;
+  };
+
+  function sync_panels () {
+    var col = $('#col_left');
+    var md  = $('#tx_input');
+    var tally = $('body > h1').outerHeight();
+    col.children().each(function(){ tally += $(this).outerHeight(); });
+    var space = col.height() - ( tally - md.outerHeight() );
+    $('#tx_input, #text_preview, #html_output, #syntax_guide').height( space - 4 );
+  }
+
+
+  var convertTextTimer;
+  function on_input ( e ) {
+    clearTimeout( convertTextTimer );
+    defer_time = Math.min( processing_time, max_delay );
+    convertTextTimer = setTimeout( convert_text, defer_time );
+  }
+
+
+  $( '.tab' ).minitabs();
+
+
+  // load syntax guide
+/*  $.get('syntax.txt', function ( txt ) {
+    $( '#syntax_guide' ).val( txt );
+  });
+*/
+
+  $( window ).bind( 'resize', sync_panels ).trigger( 'resize' );
+
+  $( '#tx_input' ).bind( 'keyup', on_input ).focus();
+
+
+  // app saves and loads from local storage
+  /*  if ( supports_html5_storage() ) {
+    var prev = localStorage.getItem( 'textile-dingus' ) || '';
+    // id form holds default text or is empty, load from localStorage
+    if ( prev && !input.value || input.value == input.defaultValue ) {
+      input.value = prev;
+    }
+  }
+  */
+console.log(input.value)
+console.log(input)
+  if ( !input.value ) {
+    $.get('help.txt', function ( txt ) {
+      convert_text( (help_text = txt) );
+    });
+  }
+  else {
+    convert_text();
+  }
+
+
+  // enable loading desktop files
+  
+  if ( typeof window.FileReader !== 'undefined' ) {
+    tx_input.bind('dragover', function (e) {
+      $( this ).addClass('drophover');
+      e.preventDefault();
+    });
+    tx_input.bind('dragleave dragend drop', function (e) { $( this ).removeClass('drophover'); });
+    tx_input.bind('drop', function (e) {
+      var file = e.originalEvent.dataTransfer.files[0];
+      var reader = new FileReader();
+      reader.onload = function ( event ) {
+        convert_text( event.target.result );
+      };
+      reader.readAsText( file );
+      e.preventDefault();
+    });
+  }
+
+
+  $( 'html' ).delegate( 'button.clear,a.clear', 'click', function (e) {
+    convert_text( '' );
+    e.preventDefault();
+  });
+
+
+
+});
+

public/js/jquery.minitabs.js

@@ -0,0 +1,69 @@
+/*
+ *  jQuery minitabs plugin
+ *  Version 1.0
+ *
+ *  Licenced under dual MIT/GPL license.
+ *    GPL: http://www.opensource.org/licenses/gpl-2.0.php
+ *    MIT: http://www.opensource.org/licenses/mit-license.php
+ *
+*/
+(function($){
+
+  var _defaultConfig = {
+      open: 'tab-open',
+      closed: 'tab-closed',
+      current: 'current',
+      active: 'tabs-active',
+      panel: 'tab-panel'
+    };
+
+  function getRef ( a ) {
+    return $.attr( a, 'href' ).replace( /^[^#]+/, '' );
+  }
+
+  function switchTabs ( link, c ) {
+    var nav = $( link ).closest( '.' + c.active ),
+        id  = getRef( link );
+    if ( id && id !== c.current_id ) {
+      nav.trigger( 'tabswitch', [ link, id ] );
+
+      // find currenly active and close it 
+      if ( c.current_id ) {
+        var cid = c.current_id;
+        $( cid ).trigger( 'tabclose' ).removeClass( c.open ).addClass( c.closed );
+        nav.find( 'li:has(a[href$=' + cid + '])' ).removeClass( c.current );
+      }
+
+      // find the desired panel and open it
+      $( id ).removeClass( c.closed ).addClass( c.open ).trigger( 'tabopen' );
+      $( link ).closest('li').addClass( c.current );
+
+      c.current_id = id;
+    }
+  }
+
+  $.fn.minitabs = function ( cfg ) {
+    var conf = $.extend( {}, _defaultConfig, cfg );
+    return this.each(function () {
+
+      var current = null;
+      var links = $( 'a', this ).each(function ( i ) {
+        $( getRef( this ) ).addClass( conf.panel + ' ' + conf.closed );
+        if ( $( this ).closest( 'li' ).is( '.' + conf.current ) ) { current = this; }
+      });
+
+      var tab = $( this )
+        .addClass( conf.active )
+        .data( 'tab.config', conf )
+        .undelegate( 'a', 'click.minitabs' )
+        .delegate( 'a', 'click.minitabs', function (e) {
+          switchTabs( this, $.data( e.delegateTarget, 'tab.config' ) );
+          e.preventDefault();
+        })
+        ;
+      switchTabs( current || links[0], conf );
+
+    });
+  };
+
+})(jQuery);

public/stylesheets/editor.css

@@ -0,0 +1,221 @@
+html {
+  overflow: hidden;
+  height: 100%;
+}
+body {
+  font-family: Helvetica, sans-serif;
+  font-size: 13px;
+  background: #ddd;
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+textarea {
+  font-family: "andale mono", "lucida console", monospace;
+  font-size: 12px;
+  display: block;
+  color:#000000;
+  resize: none;
+}
+label {
+  display: block;
+  padding: 4px 0;
+  font-weight: bold;
+  color: #777;
+}
+.col {
+  margin: 0;
+  padding: 1em 0;
+  position: relative;
+  width: 45%;
+  height: 100%;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+}
+body > h1 {
+  margin : 0;
+  padding : 10px 3% 0;
+  font-size : 20px;
+  color : #444;
+}
+#col_left {
+  float: left;
+  left: 3%;
+}
+#col_right {
+  float: right;
+  right: 4%;
+}
+.panel {
+  background: #fff;
+  border: 1px solid #aaaaaa;
+  outline: none;
+  display: block;
+  margin: 0;
+  padding: 4px;
+  width: 100%;
+  max-width: 100%;
+  min-width: 100%;
+  height: 400px;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+}
+#text_preview {
+  overflow: auto;
+}
+#md_input {
+  background: #f6f6f6;
+}
+#credit1 {
+  background : url(http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png) 0 0 no-repeat;
+  position: absolute;
+  top: -15px;
+  right: -15px;
+  text-indent: -999em;
+  display: block;
+  overflow: hidden;
+  height: 145px;
+  width: 149px;
+}
+#credit2 {
+  position : absolute;
+  bottom : 15px;
+  right : 4%;
+  color : #aaa;
+  font-size : 11px;
+}
+.drophover {
+  cursor: copy;
+  /* no-drop, not-allowed */
+  border: 1px solid black;
+  background-color: #ccf;
+}
+.tools {
+  position: absolute;
+  top: 1em;
+  right: 0;
+  padding: 0;
+}
+.tab-closed {
+  display: none;
+}
+.tabs-active {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+.tabs-active li {
+  display: inline-block;
+}
+.tabs-active li a {
+  display: block;
+  padding: 4px 10px;
+  text-decoration: none;
+  color: #999;
+  background: #eee;
+  margin: 0 1px;
+}
+.tabs-active .current a {
+  color: #555;
+  background: #fff;
+  padding-bottom: 5px;
+  margin: -1px 0;
+  border: 1px solid #aaaaaa;
+  border-bottom: 0;
+}
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  background: -webkit-gradient(linear, left top, right top, color-stop(0, #dddddd), color-stop(1, #ffffff));
+}
+::-webkit-scrollbar:horizontal {
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #dddddd), color-stop(1, #ffffff));
+}
+::-webkit-scrollbar-corner {
+  background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #dddddd), color-stop(0.6, #ffffff));
+}
+::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {
+  height: 0;
+  width: 0;
+  display: block;
+  background-color: transparent;
+}
+::-webkit-scrollbar-track-piece {
+  background-color: transparent;
+}
+::-webkit-scrollbar-thumb:horizontal, ::-webkit-scrollbar-thumb:vertical {
+  border: 1px solid #bbbbbb;
+  height: 50px;
+  width: 50px;
+  -webkit-border-radius: 6px;
+  background: -webkit-gradient(linear, left top, right top, color-stop(0, #dddddd), color-stop(1, #bbbbbb));
+}
+::-webkit-scrollbar-thumb:horizontal {
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #dddddd), color-stop(1, #bbbbbb));
+}
+
+#text_preview {
+  padding: 0 1em 4px 1em;
+  color: #444;
+  font-size: 13px;
+  line-height: 1.4;
+}
+#text_preview h1 {
+  line-height: 1.1;
+  font-size: 2em;
+}
+#text_preview h2 {
+  line-height: 1.1;
+  font-size: 1.6em;
+}
+#text_preview h3 {
+  line-height: 1.14;
+  font-size: 1.36em;
+}
+#text_preview h4 {
+  line-height: 1.2;
+  font-size: 1.14em;
+}
+#text_preview h5 {
+  line-height: 1.24;
+  font-size: 1em;
+}
+#text_preview h6 {
+  line-height: 1.24;
+  font-size: 1em;
+}
+#text_preview code {
+  background: #f4f4f4;
+}
+#text_preview table {
+  border-collapse : collapse;
+}
+#text_preview table th,
+#text_preview table td {
+  padding : 4px 8px;
+  border : 1px solid #aaa;
+}
+#text_preview ul {
+  margin-left: 0;
+  padding-left: 2em;
+}
+#text_preview acronym {
+  text-decoration : none;
+  border-bottom : 1px dotted #888;
+  cursor: help;
+}
+#text_preview blockquote {
+  margin-left: .6em;
+  padding-left: 1em;
+  border-left: .4em solid #ddd;
+}
+#text_preview pre > code {
+  display: block;
+}
+#text_preview .caps {
+  font-variant: small-caps;
+  text-transform: lowercase;
+  letter-spacing: .1em;
+}

public/stylesheets/style.css

@@ -1,8 +1,25 @@
+
 body {
   padding: 50px;
+  background-image: url(../images/back1.png); 
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-color: #000000;
   font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+  color: #ffffff;
 }
 
 a {
   color: #00B7FF;
 }
+
+#home {
+  display:block;
+}
+
+#markdown-editor {
+  margin-top:50px;
+  min-width:500px;
+  min-height:300px;
+  color: #000000
+}

routes/index.js

@@ -4,12 +4,12 @@ var DB = require('../db');
 var Model = require('../model')
 var bcrypt = require('bcrypt-nodejs');
 // When the wiki is initially loaded, simply redirect to the `home` page.
-exports.index = function(req, res) {
-  res.redirect("/home");
-};
+//exports.index = function(req, res) {
+//  res.redirect("/home");
+//};
 
 // Load a page from the database and render as html
-exports.view = function (req, res, next) {
+exports.index = function (req, res, next) {
   DB.loadPage(req.params.name, function (err, page) {
     if (err) return next(err);
     if (page.exists==false && !req.isAuthenticated())
@@ -41,10 +41,11 @@ exports.save = function (req, res, next) {
       res.redirect('/signin');
   } 
   else {
+  console.log(req.body)
   DB.savePage(req.params.name, req.body.markdown, function (err) {
     if (err) return next(err)
     //res.redirect("/" + req.params.name);
-    res.redirect("/home");
+    res.redirect("/");
   });
   }
 }

views/edit.jade

@@ -1,5 +1,20 @@
 include ./layout.jade
-h1= title
-form(method="post", action="/" + name)
-  textarea(name="markdown")= markdown
-  input(type="submit")
+link(rel='stylesheet', href='/stylesheets/editor.css')
+script(src="/js/jquery.minitabs.js")
+script(src="/js/textile.min.js")
+script(src="/js/editor.js")
+h1 edit
+
+.container-fluid
+  p
+  p
+  p
+  p
+  #col_left.col
+    span(class="tools")
+    form(method="post", action="/" + name)
+      textarea( name='markdown',id="tx_input", class='panel', cols="80", rows='20' )= markdown
+      button(type="submit", class="btn btn-danger") update
+
+  #col_right.col
+    #text_preview.panel

views/layout.jade

@@ -2,13 +2,17 @@ doctype html
 html
   head
     title= title
-    link(rel='stylesheet', href='/stylesheets/style.css')
-    link(rel='stylesheet', href='http://lbesson.bitbucket.org/md/themes/cyborg.min.css')
+    link(rel='stylesheet', href='/stylesheets/bootstrap.min.css')
+    
+    //link(rel='stylesheet', href='http://lbesson.bitbucket.org/md/themes/cyborg.min.css')
     link(rel='stylesheet', href='http://lbesson.bitbucket.org/md/themes/bootstrap-responsive.min.css')
+    link(rel='stylesheet', href='/stylesheets/style.css')
+    script(src='/js/jquery.min.js')
+    script(src='/js/bootstrap.min.js')
   body
-    nav.navbar.navbar-default
       div.container-fluid
-          ul.nav.nav-pills
+        nav.navbar.navbar-default.navbar-fixed-top
+          ul.nav.navbar-nav
               li(role="presentation" )
                 a(href="#home") THSF
               li(role="presentation")