Improve error message system and add errors to basic functions

pinry/static/css/messages.css

@@ -1,19 +1,19 @@
-.messages {
+#messages {
     list-style-type: none;
     position: absolute;
     right: 10px;
-    top: 50px;
+    top: 60px;
     z-index: 200;
 }
 
-.messages li {
+#messages li {
     border: 1px solid #ccc;
     font-size: 16px
-    margin: 10px 0;
+    margin: 5px 0;
     padding: 18px 28px;
 }
 
-.messages li:hover {
+#messages li:hover {
     cursor: pointer;
     -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);

pinry/static/js/lightbox.js

@@ -75,6 +75,9 @@ $(window).load(function() {
                 promise.success(function(pin) {
                     createBox(pin);
                 });
+                promise.error(function() {
+                    message('Problem problem fetching pin data.', 'alert alert-error');
+                });
             });
         });
     }

pinry/static/js/messages.js

@@ -1,12 +1,17 @@
 $(document).ready(function() {
-    var delayTime  = 3000,
-        alerts     = $('.alert');
-
-    delayTime = delayTime + (alerts.length * 250);
-
-    alerts.each(function() {
-        $(this).delay(delayTime).fadeOut('slow');
-        delayTime -= 250;
-        console.log(delayTime);
-    });
+    window.message = function(text, classes) {
+        classes = typeof classes !== 'undefined' ? classes : 'alert';
+        messageHtml = renderTemplate('#messages-template', {
+            text: text,
+            classes: classes
+        });
+        $('#messages').append(messageHtml);
+        $('#messages li').each(function() {
+            $(this).delay(3000).fadeOut(300);
+            var messageDelayed = $(this);
+            setTimeout(function() {
+                messageDelayed.remove();
+            }, 3300);
+        });
+    }
 });

pinry/static/js/pin-form.js

@@ -86,6 +86,9 @@ $(window).load(function() {
                 $('#pin-form-image-url').val(image.thumbnail.image);
                 createPinPreviewFromForm();
             });
+            promise.error(function() {
+                message('Problem uploading image.', 'alert alert-error');
+            });
         });
         // If bookmarklet submit
         if (pinFromUrl) {
@@ -118,6 +121,9 @@ $(window).load(function() {
                 dismissModal(modal);
                 uploadedImage = false;
             });
+            promise.error(function() {
+                message('Problem saving image.', 'alert alert-error');
+            });
         });
         $('#pin-form-close').click(function() {
             if (pinFromUrl) return window.close();

pinry/static/js/pinry.js

@@ -58,6 +58,9 @@ $(window).load(function() {
                     thisPin.closest('.pin').remove();
                     tileLayout();
                 });
+                promise.error(function() {
+                    message('Problem deleting image.', 'alert alert-error');
+                });
             });
         });
 

pinry/templates/base.html

@@ -28,7 +28,9 @@
         <link rel="stylesheet" href="{% static "css/lightbox.css" %}"/>
         <link rel="stylesheet" href="{% static "css/pinry.css" %}"/>
         {%  endcompress %}
+        {% compress css inline %}
         {% block extra_css %}{% endblock %}
+        {% endcompress %}
         <!-- End CSS -->
 
         <!-- Start JavaScript Variables -->
@@ -64,15 +66,16 @@
         </div>
         <!-- End Navigation -->
 
+        <!-- Messages -->
+        <ul id="messages"></ul>
+        <!-- End Messages -->
+
         <!-- Content -->
         {% block yield %}{% endblock %}
         <!-- End Content -->
 
-        <!-- Messages -->
-        {% include "includes/messages.html" %}
-        <!-- End Messages -->
-
         <!-- Templates -->
+        {% include "includes/messages.html" %}
         {% include "includes/lightbox.html" %}
         {% include "includes/pins.html" %}
         {% include "includes/pin_form.html" %}
@@ -91,7 +94,9 @@
         <script src="{% static "js/pinry.js" %}"></script>
         <script src="{% static "js/pin-form.js" %}"></script>
         {% endcompress %}
+        {% compress js inline %}
         {% block extra_js %}{% endblock %}
+        {% endcompress %}
         <!-- End JavaScript -->
     </body>
 </html>

pinry/templates/includes/messages.html

@@ -1,7 +1,5 @@
-{% if messages %}
-    <ul class="messages">
-    {% for message in messages %}
-        <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
-    {% endfor %}
-    </ul>
-{% endif %}
+{% verbatim %}
+    <script id="messages-template" type="text/x-handlebars-template">
+        <li class="{{ classes }}">{{ text }}</li>
+    </script>
+{% endverbatim %}