adding preview feature, resolves #4

css/bootstrap/zerobin.css

@@ -62,6 +62,10 @@ body.navbar-spacing {
 	word-wrap: break-word;
 }
 
+#preview {
+	margin-bottom: 10px;
+}
+
 #message {
 	font-family: monospace;
 }

i18n/de.json

@@ -136,5 +136,7 @@
         "Dein Browser unterstützt das hochladen von verschlüsselten Dateien nicht. Bitte verwende einen neueren Browser.",
     "Invalid attachment.": "Ungültiger Datei-Anhang.",
     "Options": "Optionen",
-    "Shorten URL": "URL verkürzen"
+    "Shorten URL": "URL verkürzen",
+    "Editor": "Bearbeiten",
+    "Preview": "Vorschau"
 }

i18n/fr.json

@@ -145,5 +145,7 @@
         "Votre navigateur ne supporte pas l'envoi de fichiers chiffrés. Merci d'utiliser un navigateur plus récent.",
     "Invalid attachment.": "Attachement invalide.",
     "Options": "Options",
-    "Shorten URL": "Raccourcir URL"
+    "Shorten URL": "Raccourcir URL",
+    "Editor": "éditer",
+    "Preview": "avant-première"
 }

i18n/pl.json

@@ -136,5 +136,7 @@
         "Twoja przeglądarka nie wspiera wysyłania zaszyfrowanych plików. Użyj nowszej przeglądarki.",
     "Invalid attachment.": "Nieprawidłowy załącznik.",
     "Options": "Opcje",
-    "Shorten URL": "Skróć adres URL"
+    "Shorten URL": "Skróć adres URL",
+    "Editor": "Edytować",
+    "Preview": "Zapowiedź"
 }

i18n/sl.json

@@ -145,5 +145,7 @@
         "Tvoj brskalnik ne omogoča nalaganje zakodiranih datotek. Prosim uporabi novejši brskalnik.",
     "Invalid attachment.": "Neveljavna priponka.",
     "Options": "Možnosti",
-    "Shorten URL": "Skrajšajte URL"
+    "Shorten URL": "Skrajšajte URL",
+    "Editor": "Uredi",
+    "Preview": "Predogled"
 }

i18n/zh.json

@@ -136,5 +136,7 @@
         "您的浏览器不支持上传加密的文件，请使用更新的浏览器。",
     "Invalid attachment.": "无效的附件",
     "Options": "选项",
-    "Shorten URL": "缩短链接"
+    "Shorten URL": "缩短链接",
+    "Editor": "編輯",
+    "Preview": "預習"
 }

js/zerobin.js

@@ -583,7 +583,13 @@ $(function() {
                     this.prettyMessage.addClass('hidden');
                     break;
                 case 'syntaxhighlighting':
-                    if (typeof prettyPrint == 'function') prettyPrint();
+                    if (typeof prettyPrintOne == 'function')
+                    {
+                        if (typeof prettyPrint == 'function') prettyPrint();
+                        this.prettyPrint.html(
+                            prettyPrintOne(text, null, true)
+                        );
+                    };
                 default:
                     // Convert URLs to clickable links.
                     helper.urls2links(this.clearText);
@@ -1055,33 +1061,42 @@ $(function() {
             this.password.removeClass('hidden');
             this.attach.removeClass('hidden');
             this.message.removeClass('hidden');
+            this.preview.removeClass('hidden');
             this.message.focus();
         },
 
         /**
          * Put the screen in "Existing paste" mode.
+         *
+         * @param boolean preview (optional) : tell if the preview tabs should be displayed, defaults to false.
          */
-        stateExistingPaste: function()
+        stateExistingPaste: function(preview)
         {
-            this.sendButton.addClass('hidden');
+            preview = preview || false;
 
-            // No "clone" for IE<10.
-            if ($('#oldienotice').is(":visible"))
+            if (!preview)
             {
-                this.cloneButton.addClass('hidden');
-            }
-            else
-            {
-                this.cloneButton.removeClass('hidden');
+                // No "clone" for IE<10.
+                if ($('#oldienotice').is(":visible"))
+                {
+                    this.cloneButton.addClass('hidden');
+                }
+                else
+                {
+                    this.cloneButton.removeClass('hidden');
+                }
+
+                this.rawTextButton.removeClass('hidden');
+                this.sendButton.addClass('hidden');
+                this.attach.addClass('hidden');
+                this.expiration.addClass('hidden');
+                this.formatter.addClass('hidden');
+                this.burnAfterReadingOption.addClass('hidden');
+                this.openDisc.addClass('hidden');
+                this.newButton.removeClass('hidden');
+                this.preview.addClass('hidden');
             }
-            this.rawTextButton.removeClass('hidden');
 
-            this.attach.addClass('hidden');
-            this.expiration.addClass('hidden');
-            this.formatter.addClass('hidden');
-            this.burnAfterReadingOption.addClass('hidden');
-            this.openDisc.addClass('hidden');
-            this.newButton.removeClass('hidden');
             this.pasteResult.addClass('hidden');
             this.message.addClass('hidden');
             this.clearText.addClass('hidden');
@@ -1177,6 +1192,35 @@ $(function() {
             }
         },
 
+        /**
+         * View the editor tab.
+         *
+         * @param Event event
+         */
+        viewEditor: function(event)
+        {
+            event.preventDefault();
+            this.messagePreview.parent().removeClass('active');
+            this.messageEdit.parent().addClass('active');
+            this.message.focus();
+            this.stateNewPaste();
+        },
+
+        /**
+         * View the preview tab.
+         *
+         * @param Event event
+         */
+        viewPreview: function(event)
+        {
+            event.preventDefault();
+            this.messageEdit.parent().removeClass('active');
+            this.messagePreview.parent().addClass('active');
+            this.message.focus();
+            this.stateExistingPaste(true);
+            this.formatPaste($('#pasteFormatter').val(), this.message.val());
+        },
+
         /**
          * Create a new paste.
          */
@@ -1261,6 +1305,8 @@ $(function() {
             this.fileRemoveButton.click($.proxy(this.removeAttachment, this));
             $('.reloadlink').click($.proxy(this.reloadPage, this));
             this.message.keydown(this.supportTabs);
+            this.messageEdit.click($.proxy(this.viewEditor, this));
+            this.messagePreview.click($.proxy(this.viewPreview, this));
         },
 
         /**
@@ -1290,6 +1336,8 @@ $(function() {
             this.formatter = $('#formatter');
             this.image = $('#image');
             this.message = $('#message');
+            this.messageEdit = $('#messageedit');
+            this.messagePreview = $('#messagepreview');
             this.newButton = $('#newbutton');
             this.openDisc = $('#opendisc');
             this.openDiscussion = $('#opendiscussion');
@@ -1298,6 +1346,7 @@ $(function() {
             this.pasteResult = $('#pasteresult');
             this.prettyMessage = $('#prettymessage');
             this.prettyPrint = $('#prettyprint');
+            this.preview = $('#preview');
             this.rawTextButton = $('#rawtextbutton');
             this.remainingTime = $('#remainingtime');
             this.replyStatus = $('#replystatus');

tpl/bootstrap-compact.html

@@ -175,6 +175,10 @@
 					</button>
 				{/if}</div>
 			</div>
+			<ul id="preview" class="nav nav-tabs hidden">
+				<li role="presentation" class="active"><a id="messageedit" href="#">{function="t('Editor')"}</a></li>
+				<li role="presentation"><a id="messagepreview" href="#">{function="t('Preview')"}</a></li>
+			</ul>
 		</header>
 		<section class="container">
 			<article class="row">

tpl/bootstrap-dark-page.html

@@ -171,6 +171,10 @@
 					</button>
 				{/if}</div>
 			</div>
+			<ul id="preview" class="nav nav-tabs hidden">
+				<li role="presentation" class="active"><a id="messageedit" href="#">{function="t('Editor')"}</a></li>
+				<li role="presentation"><a id="messagepreview" href="#">{function="t('Preview')"}</a></li>
+			</ul>
 		</header>
 		<section class="container">
 			<article class="row">

tpl/bootstrap-dark.html

@@ -171,6 +171,10 @@
 					</button>
 				{/if}</div>
 			</div>
+			<ul id="preview" class="nav nav-tabs hidden">
+				<li role="presentation" class="active"><a id="messageedit" href="#">{function="t('Editor')"}</a></li>
+				<li role="presentation"><a id="messagepreview" href="#">{function="t('Preview')"}</a></li>
+			</ul>
 		</header>
 		<section class="container">
 			<article class="row">

tpl/bootstrap-page.html

@@ -171,6 +171,10 @@
 					</button>
 				{/if}</div>
 			</div>
+			<ul id="preview" class="nav nav-tabs hidden">
+				<li role="presentation" class="active"><a id="messageedit" href="#">{function="t('Editor')"}</a></li>
+				<li role="presentation"><a id="messagepreview" href="#">{function="t('Preview')"}</a></li>
+			</ul>
 		</header>
 		<section class="container">
 			<article class="row">

tpl/bootstrap.html

@@ -171,6 +171,10 @@
 					</button>
 				{/if}</div>
 			</div>
+			<ul id="preview" class="nav nav-tabs hidden">
+				<li role="presentation" class="active"><a id="messageedit" href="#">{function="t('Editor')"}</a></li>
+				<li role="presentation"><a id="messagepreview" href="#">{function="t('Preview')"}</a></li>
+			</ul>
 		</header>
 		<section class="container">
 			<article class="row">

tpl/page.html

@@ -94,6 +94,10 @@
 					<span id="filewrap">{function="t('Attach a file')"}: <input type="file" id="file" name="file" /></span>
 					<button id="fileremovebutton">{function="t('Remove attachment')"}</button>
 				</div>{/if}
+				<div id="preview" class="hidden">
+					<button id="messageedit">{function="t('Editor')"}</button>
+					<button id="messagepreview">{function="t('Preview')"}</button>
+				</div>
 				<div id="image" class="hidden"></div>
 				<div id="prettymessage" class="hidden">
 					<pre id="prettyprint" class="prettyprint linenums:1"></pre>