Clean up tips, adding info, error and notification types.

public/css/style.css

@@ -97,7 +97,7 @@ textarea:focus {
 }
 
 #control {
-  z-index: 199999;
+  z-index: 10000;
   min-width: 760px;
   height: 35px;
   position: absolute;
@@ -1006,17 +1006,63 @@ ie6, li {
 }
 
 #tip {
-  z-index: 10;
+  z-index: 10000;
   display: none;
   border-top: 1px solid #ccc;
   position: absolute;
   bottom: 0;
-  font-size: 12px;
-  line-height: 20px;
+  font-size: 14px;
+  line-height: 22px;
   background: #fdfece;
   left: 0;
   right: 0;
-  padding: 2px 10px 2px 20px;
+  padding: 2px 10px 2px 10px;
+  -webkit-animation: tip-flash 100ms linear 4 alternate;
+  -moz-animation: tip-flash 100ms linear 4 alternate;
+  -ms-animation: tip-flash 100ms linear 4 alternate;
+  -o-animation: tip-flash 100ms linear 4 alternate;
+  animation: tip-flash 100ms linear 4 alternate;
+
+  -webkit-transition: bottom 100ms linear;
+  transition: bottom 100ms linear;
+}
+
+@-webkit-keyframes tip-flash {
+  to {
+    background: white;
+  }
+}
+@-moz-keyframes tip-flash {
+  to {
+    background: white;
+  }
+}
+@-ms-keyframes tip-flash {
+  to {
+    background: white;
+  }
+}
+@-o-keyframes tip-flash {
+  to {
+    background: white;
+  }
+}
+@keyframes tip-flash {
+  to {
+    background: white;
+  }
+}
+
+#tip.error {
+  background: #ff5555;
+}
+
+#tip.notification,
+#tip.error {
+  bottom: auto;
+  top: 34px;
+  line-height: 28px;
+  box-shadow: 0 2px 4px rgba(0,0,0,.2);
 }
 
 #tip p {
@@ -1029,6 +1075,7 @@ ie6, li {
   right: 20px;
   top: 2px;
   text-decoration: none;
+  text-shadow: none;
 }
 
 .showtip #tip {
@@ -1091,7 +1138,7 @@ details li, .details li {
   bottom: 0;
   height: 100%;
   width: 100%;
-  z-index: 199999; /* gosh that's a stupid number */
+  z-index: 1000; /* gosh that's a stupid number */
 
   /*background: #000;*/
   /*background: rgba(0,0,0,0.85);*/

public/js/chrome/gist.js

@@ -1,5 +1,12 @@
 var Gist = (function () {
 
+  // Only allow gist import/export if CORS is supported
+  var CORS = !!('withCredentials' in new XMLHttpRequest() ||
+                typeof XDomainRequest !== "undefined");
+  if (!CORS) return $(function () {
+    $('#export-as-gist').remove();
+  });
+
   var Gist = function (id) {
     var gist = this,
         token = '';
@@ -79,7 +86,16 @@ var Gist = (function () {
       dataType: 'json',
       crossDomain: true,
       success: function (data) {
-        $document.trigger('info', 'Gist created! <a href="'+data.html_url+'" target="_blank">Open in new tab.</a>');
+        $document.trigger('tip', {
+          type: 'info',
+          content: 'Gist created! <a href="'+data.html_url+'" target="_blank">Open in new tab.</a>'
+        });
+      },
+      error: function (xhr, status) {
+        $document.trigger('tip', {
+          type: 'error',
+          content: 'Error: ' + status
+        });
       }
     });
     // return false becuase there's weird even stuff going on. ask @rem.

public/js/chrome/tips.js

@@ -1,23 +1,52 @@
-var $html = $(document.documentElement);
+(function () {
 
-$('#tip').on('click', 'a.dismiss', function () {
-  $html.removeClass('showtip');
-  $(window).resize();
-  return false;
-});
+  var $html = $(document.documentElement),
+      $tip = $('#tip'),
+      $tipContent = $('p', $tip);
 
-window.showTip = function () {
-  if (jsbin.settings.lastTip === undefined) jsbin.settings.lastTip = -1;
-  if (tips) {
-    for (var id = 0; id < tips.length; id++) {
-      if (id > jsbin.settings.lastTip) {
-        $('#tip p').html(tips[id]);
-        jsbin.settings.lastTip = id;
-        $html.addClass('showtip');
-        break;
-      }
+  var removeTip = function (cb) {
+    $html.removeClass('showtip');
+    $tip.removeClass();
+    $tipContent.html('');
+    $(window).resize();
+    cb && setTimeout(cb, 0);
+  };
+
+  var setTip = function (data) {
+    $tipContent.html(data.content);
+    $tip.removeClass().addClass(data.type || 'info');
+    $html.addClass('showtip');
+    alert(data.content);
+  };
+
+  /**
+   * Trigger a tip to be shown.
+   *
+   *   $document.trigger('tip', 'You have an infinite loop in your HTML.');
+   *
+   *    $document.trigger('tip', {
+   *      type: 'error',
+   *      content: 'Do you even Javascript?'
+   *    });
+   */
+  $document.on('tip', function (event, data) {
+    var tipData = data;
+    if (typeof data === 'string') {
+      tipData = {};
+      tipData.content = data;
+      tipData.type = 'info';
     }
-  }
-};
+    // If the content and the type haven't changed, just set it again.
+    if ($tipContent.html() === tipData.content &&
+        $tip.hasClass(tipData.type)) return setTip(data);
+    removeTip(function () {
+      setTip(tipData);
+    });
+  });
 
-// showTip();
+  $('#tip').on('click', 'a.dismiss', function () {
+    removeTip();
+    return false;
+  });
+
+}());

public/js/jsbin.js

@@ -252,10 +252,4 @@ if (jsbin.embed) {
   $(window).on('focus', function () {
     return false;
   });
-}
-
-$document.on('info', function (event, data) {
-  console.log.apply(console, [].slice.call(arguments));
-  $('#tip').html('<p>'+data+'</p><a class="dismiss" href="#">Dismiss x</a>');
-  $html.addClass('showtip');
-});
+}

views/index.html

@@ -290,12 +290,11 @@ Include alerts, prompts &amp; confirm boxes">Run with JS</button>
   </form>
 </div>
 <div id="tip">
-  {{#flash_info}}
-    <p>{{flash_info}}</p><a class="dismiss" href="#">Dismiss x</a>
-  {{/flash_info}}
-  {{^flash_info}}
-    <p>You can jump to the latest bin by adding <code>/latest</code> to your URL</p><a class="dismiss" href="#">Dismiss x</a>
-  {{/flash_info}}
+  <p>
+    {{#flash_info}}{{flash_info}}{{/flash_info}}
+    {{^flash_info}}You can jump to the latest bin by adding <code>/latest</code> to your URL{{/flash_info}}
+  </p>
+  <a class="dismiss" href="#">Dismiss x</a>
 </div>
 <div id="keyboardHelp" class="modal">
   <div>