Generic message system

settings.py

@@ -29,4 +29,4 @@ GROUP = None
 
 # limit size of pasted text in bytes. Be carefull allowing too much size can slow down user's
 # browser
-MAX_SIZE = 500 * 1
+MAX_SIZE = 500 * 1000

static/css/style.css

@@ -109,6 +109,10 @@ h4#pixels-total {
 	margin-top: 40px;
 }
 
+.alert .title {
+	display:block;
+}
+
 /* Home */
 
 .btn-group {
@@ -126,7 +130,7 @@ input.btn-upload {
 	left: -6px;
 	width: 100px;
 	z-index: 1;
-	margin-top: -13px; 
+	margin-top: -13px;
 }
 
 input.hide-upload {
@@ -143,10 +147,6 @@ input.hide-upload {
 	height: 49px;
 }
 
-.max-size-reached {
-	display: none;
-}
-
 /* Paste Page */
 
 .items {
@@ -157,15 +157,13 @@ input.hide-upload {
 	background-color: white;
 }
 
-#copy-success, 
-#short-url-success, 
 .submit-form {
 	display:none;
-} 
+}
 
 .paste-option {
     float:right;
-} 
+}
 
 a#clip-button.hover{
 	cursor:pointer;
@@ -189,7 +187,7 @@ li.L5, li.L6, li.L7, li.L8, li.L9
 ol.linenums {
   margin: 0 0 0 55px; /* IE indents via margin-left */
 }
-ol.linenums li { 
+ol.linenums li {
   color: #bebec5;
   line-height: 18px;
   text-shadow: 0 1px 0 #fff;

static/js/behavior.js

@@ -1,11 +1,11 @@
 ;
 
-/* Start random number generator seeding ASAP *%
+/* Start random number generator seeding ASAP */
 sjcl.random.startCollectors();
 /* Ensure jquery use cache for ajax requests */
 $.ajaxSetup({ cache: true });
 
-
+zerobin = {
     /** Base64 + compress + encrypt, with callbacks before each operation,
         and all of them are executed in a timed continuation to give
         a change to the UI to respond.
@@ -211,18 +211,31 @@ $.ajaxSetup({ cache: true });
     });
     return content_clone;
   },
-    count: function(text, options) {
+  count: function(text, options) {
     // Set option defaults
     var crlf = /(\r?\n|\r)/g;
     var whitespace = /(\r?\n|\r|\s+)/g;
     options = options || {};
-    options.lineBreaks = options.lineBreaks || 1; 
+    options.lineBreaks = options.lineBreaks || 1;
-    
+
     var length = text.length,
       nonAscii = length - text.replace(/[\u0100-\uFFFF]/g, '').length,
-        lineBreaks = length - text.replace(crlf, '').length; 
+        lineBreaks = length - text.replace(crlf, '').length;
-    
+
-      return length + nonAscii + Math.max(0, options.lineBreaks * (lineBreaks - 1)); 
+      return length + nonAscii + Math.max(0, options.lineBreaks * (lineBreaks - 1));
+  },
+  message: function(type, message, title, flush, callback) {
+
+    if (flush) {$('.alert-'+type).remove()}
+
+    $message = $('#alert-template').clone().attr('id', null)
+                                   .addClass('alert alert-' + type);
+    $('.message', $message).html(message);
+
+    if (title) {$('.title', $message).html(title)}
+    else {$('.title', $message).remove()}
+
+    $message.prependTo($('#main')).show('fadeUp', callback);
   }
 };
 
@@ -242,14 +255,20 @@ $('button[type=submit]').live("click", function(e){
 
   var sizebytes = zerobin.count($('#content').val(), { });
   var oversized = sizebytes > zerobin.max_size;
+  var readable_fsize = Math.round(sizebytes/1024);
+  var readable_maxsize = Math.round(zerobin.max_size/1024)
   if (oversized){
-    $('.max-size-reached').show();
+    zerobin.message('error',
-    $('.file-size').text(Math.round(sizebytes/1024));
+                    ('Your file is <strong class="file-size">' + readable_fsize +
+                    '</strong>KB. You have reached the maximum size limit of ' +
+                    readable_maxsize + 'KB.'),
+                    'Warning!', true)
   }
 
   if (!oversized && paste.trim()) {
 
-    $('form.well p').hide();
+    $form = $('input, textarea, select, button').prop('disabled', true);
+    $form.prop('disabled', true);
     $loading = $('form.well .progress').show();
     var $loading = $('form.well .progress .bar')
                     .css('width', '25%')
@@ -278,9 +297,14 @@ $('button[type=submit]').live("click", function(e){
 
           $.post('/paste/create', data)
            .error(function(error) {
-              $('form.well p').show();
+              $form.prop('disabled', false);
               $loading.hide();
-              alert('Error: paste could not be saved. Please try again later.');
+              zerobin.message(
+                'error',
+                'Paste could not be saved. Please try again later.',
+                'Error'
+              );
+
            })
            .success(function(data) {
               $loading.text('Redirecting to new paste...').css('width', '100%');
@@ -291,15 +315,16 @@ $('button[type=submit]').live("click", function(e){
         }
       );
     } catch (err) {
-      $('form.well p').show();
+      $form.prop('disabled', false);
       $loading.hide();
-      alert('Error: paste could not be encrypted. Aborting.');
+      zerobin.message('error', 'Paste could not be encrypted. Aborting.',
+                      'Error');
     }
   }
 
 });
 
-**
+/**
     DECRYPTION:
     On the display paste page, decrypt and decompress the paste content,
     add syntax coloration then setup the copy to clipboard button.
@@ -318,7 +343,8 @@ if (content && key) {
     /* On error*/
     function(){
       $bar.hide();
-      alert('Could not decrypt data (Wrong key ?)');
+      zerobin.message('error', 'Could not decrypt data (Wrong key ?)',
+                      'Error');
     },
 
     /* Update progress bar */
@@ -345,9 +371,10 @@ if (content && key) {
           zerobin.getTinyURL(window.location.toString(), function(tinyurl){
             clip.setText(tinyurl);
             $('#copy-success').hide();
-            $('#short-url-success')
+            zerobin.message('success',
-             .html('Short url: <a href="' + tinyurk + '">' + tinyurk + '</a>')
+                            '<a href="' + tinyurk + '">' + tinyurk + '</a>',
-             .show('fadeUp');
+                            'Short url'
+            )
             $('#short-url').text('Get short url');
           });
         });
@@ -360,7 +387,8 @@ if (content && key) {
           clip.setText(zerobin.getPasteContent());
         });
         clip.addEventListener('complete', function(){
-          $('#copy-success').show('fadeUp', function(){clip.reposition()});
+          zerobin.message('info', 'The paste is now in your clipboard',
+                          '', false, function(){clip.reposition()});
         });
         clip.glue('clip-button');
 
@@ -400,7 +428,7 @@ $('#content').live('keyup change', function(){
       $('.paste-option').clone().addClass('down').appendTo('form.well');
     }
    }
-    
+
 });
 
 /* Display previous pastes */
@@ -419,10 +447,10 @@ $('.btn-clone').click(function(e){
 
 
 /* Upload file using HTML5 File API */
- 
+
-if (window.File && window.FileReader && window.FileList && window.Blob) { 
+if (window.File && window.FileReader && window.FileList && window.Blob) {
-  $('.file-upload').show(); 
+  $('.file-upload').show();
-} 
+}
 
 var file_upload = function(file) {
   var reader = new FileReader();
@@ -441,7 +469,7 @@ try {
   });
 }
 catch (e) {
-  alert(e);
+  zerobin.message('error', 'Could no upload the file', 'Error');
 }
 
 $('#file-upload').mouseover(function(){
@@ -451,7 +479,7 @@ $('#file-upload').mouseover(function(){
 
 /* Alerts */
 
-$(".close").click(function(){
+$(".close").live('click', function(){
   $(this).parent().fadeOut();
 });
 

views/base.tpl

@@ -23,7 +23,7 @@
     <script src="/static/js/jquery-1.7.2.min.js"></script>
     <script src="/static/js/behavior.js"></script>
     <script type="text/javascript">
-      zerobin.max_size = {{ max_size }};
+      zerobin.max_size = {{ get('max_size', -1)}};
     </script>
 
   </head>
@@ -63,7 +63,7 @@
           </div><!--/.well -->
         </div><!--/span-->
 
-        <div class="span10">
+        <div id='main' class="span10">
 
            %include
 
@@ -84,7 +84,7 @@
         <strong>41,017,923,819</strong> pastes øbinned
       </h4>
 
-      </br> 
+      </br>
         <p class="greetings span12">
             Based on an original idea from
            <a href="http://sebsauvage.net/paste/">sebsauvage.net</a><br>
@@ -114,5 +114,12 @@
 
     -->
 
+    <p id="alert-template">
+      <a class="close" data-dismiss="alert" href="#">×</a>
+      <strong class="title"></strong>
+      <span class="message"></span>
+    </p>
+
   </body>
+
 </html>

views/home.tpl

@@ -1,13 +1,7 @@
-<div class="alert alert-error max-size-reached">
-  <a class="close" data-dismiss="alert" href="#">×</a>
-  <strong>Warning!</strong><br>
-  Your file is <strong class="file-size"></strong>KB You have reached the maximum size limit of {{ max_size_kb }}KB.
-</div>
-
 <p class="file-upload">
-	<input type="button" class="btn btn-upload"  value="Upload File"> 
+	<input type="button" class="btn btn-upload"  value="Upload File">
 	<input type="file" class="hide-upload" id="file-upload" >
-</p> 
+</p>
 
 <form class="well" method="post" action="/paste/create">
 <p class="paste-option">
@@ -19,15 +13,15 @@
     <option value="never">Never</option>
   </select>
 <button type="submit" class="btn btn-primary">Submit</button>
+</p>
 <p>
-<p>
+    <div class="progress progress-striped active">
+      <div class="bar"></div>
+    </div>
     <textarea rows="10"  style="width:100%;"
               class="input-xlarge"
               id="content" name="content"></textarea>
 </p>
-<div class="progress progress-striped active">
-  <div class="bar"></div>
-</div>
 </form>
 
 

views/paste.tpl

@@ -1,31 +1,31 @@
 %if "burn_after_reading" in str(paste.expiration):
   %if keep_alive:
-   <div class="alert alert-info">
+    <p class="alert alert-info">
-      <strong>Ok!</strong>
+      <a class="close" data-dismiss="alert" href="#">×</a>
-      This paste will be deleted the next time it is read.
+      <strong class="title">Ok!</strong>
-    </div>
+      <span class="message">
+        This paste will be deleted the next time it is read.
+      </span>
+    </p>
   %else:
-   <div class="alert">
+    <p class="alert">
-   <strong>Warning!</strong>
+      <a class="close" data-dismiss="alert" href="#">×</a>
-      This paste has self-destructed. If you close this windows, there is not way
+      <strong class="title">Warning!</strong>
-      to recover it.
+      <span class="message">
-   </div>
+        This paste has self-destructed. If you close this windows,
+        there is not way to recover it.
+      </span>
+    </p>
   %end
 %end
 
-<div id="copy-success" class="alert alert-success">
-  The paste is now in your clipboad
-</div>
-
-<div id="short-url-success" class="alert alert-success"></div>
-
 <div class="well paste-form">
 <form action="/" method="get" accept-charset="utf-8">
-<p class="lnk-option"> 
+<p class="lnk-option">
 	  <a id="clip-button">Copy To Clipboard</a>
 	  |
 	  <a id="short-url" href=""
-	     target="_blank">Get short url</a> 
+	     target="_blank">Get short url</a>
   <span class="paste-option btn-group top">
       <button class="btn btn-clone"><i class="icon-camera"></i>&nbsp;Clone</button>
       <button class="btn">New Paste</button>