Mercurial > zeropaste

changeset 214:22c4b5f90e24

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Massive javascript and html refactor. Also, ie9
author Edho Arief <edho@myconan.net>
date Sun, 12 May 2013 02:43:38 +0900
parents 0993715b455d
children 0e52170b7b6a
files app/assets/javascripts/application.js app/assets/javascripts/boot.js app/assets/javascripts/config/marked.js app/assets/javascripts/config/prettify.js app/assets/javascripts/init.marked.js app/assets/javascripts/init.tabs.js app/assets/javascripts/pastes.js app/assets/javascripts/zp.formatter.js app/assets/javascripts/zp.hash_magic.js app/assets/javascripts/zp.init.js app/assets/javascripts/zp.new.js app/assets/javascripts/zp.viewer_width.js app/assets/stylesheets/tabs.scss app/views/pastes/show.html.erb
diffstat 14 files changed, 134 insertions(+), 116 deletions(-) [+]
line wrap: on
line diff
--- a/app/assets/javascripts/application.js	Sun May 12 02:42:43 2013 +0900
+++ b/app/assets/javascripts/application.js	Sun May 12 02:43:38 2013 +0900
@@ -15,8 +15,4 @@
 //= require twitter/bootstrap/tab
 //= require twitter/bootstrap/button
 //= require twitter/bootstrap/dropdown
-//= require prettify
-//= require marked
-//= require init.marked
-//= require jquery.autosize
-//= require_tree .
+//= require boot
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/app/assets/javascripts/boot.js	Sun May 12 02:43:38 2013 +0900
@@ -0,0 +1,10 @@
+//= require zp.init
+//= require zp.formatter
+//= require zp.viewer_width
+//= require zp.hash_magic
+//= require zp.new
+$(document).ready(function() {
+  zp.formatter.init()
+  zp.viewer_width.init()
+  zp.new.init()
+})
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/app/assets/javascripts/config/marked.js	Sun May 12 02:43:38 2013 +0900
@@ -0,0 +1,6 @@
+//= require marked
+marked.setOptions({
+  gfm: true,
+  pedantic: true,
+  sanitize: true
+})
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/app/assets/javascripts/config/prettify.js	Sun May 12 02:43:38 2013 +0900
@@ -0,0 +1,1 @@
+//= require prettify
--- a/app/assets/javascripts/init.marked.js	Sun May 12 02:42:43 2013 +0900
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,5 +0,0 @@
-marked.setOptions({
-  gfm: true,
-  pedantic: true,
-  sanitize: true
-});
--- a/app/assets/javascripts/init.tabs.js	Sun May 12 02:42:43 2013 +0900
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,80 +0,0 @@
-$(document).ready(function() {
-  if ($('#paste-show').length !== 1) {
-    return;
-  }
-  var update_state = function() {
-    var paste = $('#paste'),
-      mode = paste.data('mode'),
-      width = paste.data('width'),
-      short_mode = function(mode) {
-        if (mode == 'highlight') {
-          return 'hl'
-        } else if (mode =='markdown') {
-          return 'md'
-        } else {
-          return 'plain'
-        }
-      },
-      qstring = '#!' + short_mode(mode) + '.' + width;
-    if (width == 'auto') {
-      if (mode == 'plain') {
-        qstring = ' ';
-      } else {
-        qstring = '#!' + short_mode(mode);
-      }
-    }
-    if (history.replaceState) {
-      history.replaceState(null, '', qstring);
-    } else {
-      window.location = qstring;
-    }
-    return false;
-  },
-  paste_resize = function(size) {
-    var paste = $('#paste'),
-      title = $('#paste-resize a.btn');
-    title.html(title.html().replace(/(auto|\d+px)/, size));
-    if (size == 'auto') {
-      paste.css('width', '');
-      paste.data('width', size);
-    } else {
-      paste.css('width', size);
-      paste.data('width', size);
-    }
-    update_state();
-  },
-  paste_resize_menu_handler = function() {
-    paste_resize($(this).data('size'));
-    $('.open').removeClass('open');
-    return false;
-  },
-  paste_mode_state_handler = function() {
-    $('#paste').data('mode', $(this).prop('href').split('#')[1]);
-    update_state();
-  },
-  init_state = function() {
-    mode = window.location.hash.substr(2).split('.');
-    if (mode[0] == 'hl' || mode[0] == 'highlight') { $('#paste-mode a:eq(1)').click(); }
-    else if (mode[0] == 'md' || mode[0] == 'markdown') { $('#paste-mode a:eq(2)').click(); };
-    if (mode[1] && mode[1].match(/^\d+px$/)) { paste_resize(mode[1]); }
-  },
-  init_tabs_base = function() {
-    var raw = $('#plain pre').text(),
-      markdown = $('#markdown div');
-    markdown.html(marked(raw));
-    $('#highlight pre').text(raw);
-
-    markdown.find('pre').addClass('prettyprint');
-    markdown.find('a').prop('rel', 'nofollow');
-    prettyPrint();
-  },
-  init_tabs_menu = function() {
-    $('#paste-mode a').click(paste_mode_state_handler);
-    $('#paste-resize ul a').click(paste_resize_menu_handler);
-  };
-
-  init_tabs_base();
-  init_tabs_menu();
-  init_state();
-  update_state();
-});
--- a/app/assets/javascripts/pastes.js	Sun May 12 02:42:43 2013 +0900
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,13 +0,0 @@
-// Place all the behaviors and hooks related to the matching controller here.
-// All this logic will automatically be available in application.js.
-
-$(document).on('click', '#reset_paste', function() {
-  $('#paste_paste').val('');
-  $('#paste_paste').focus();
-  return false;
-});
-$(document).ready(function() {
-  $('#paste_paste').autosize({ className: 'mirrored_text row-fluid', append: "\n"});
-  $.autosize_box_fix($('.mirrored_text'));
-  $('#paste_paste').focus();
-})
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/app/assets/javascripts/zp.formatter.js	Sun May 12 02:43:38 2013 +0900
@@ -0,0 +1,23 @@
+//= require config/marked
+//= require config/prettify
+(function($) {
+  window.zp.formatter = {
+    raw: function() { return $("#pl pre").text() },
+    links: function() { return $("#paste-mode a") },
+    current: function() { return this.links().filter(".active").attr("href").slice(1) },
+    markdown: function() {
+      var area = $("#md div")
+      area.html(marked(this.raw()))
+      area.find("pre").addClass("prettyprint")
+      area.find("a").prop("rel", "nofollow")
+    },
+    highlight: function() {
+      $("#hl pre").text(this.raw())
+      prettyPrint()
+    },
+    init: function() {
+      this.markdown()
+      this.highlight()
+    }
+  }
+})(jQuery)
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/app/assets/javascripts/zp.hash_magic.js	Sun May 12 02:43:38 2013 +0900
@@ -0,0 +1,35 @@
+//= require zp.formatter
+//= require zp.viewer_width
+(function($) {
+  window.zp.hash_magic = {
+    load_hash: function() {
+      var hash_array = window.location.hash.slice(2).split(".")
+      format = hash_array[0]
+      width = hash_array[1]
+      if (format !== undefined) {
+        zp.formatter.links().filter("[href=#" + format + "]").click()
+      }
+      if (width !== undefined) {
+        zp.viewer_width.resize(width)
+      }
+    },
+    set_hash: function(e) {
+      var
+        format = zp.formatter.current(),
+        width = zp.viewer_width.current,
+        hash = "#!"
+      hash += format
+      if (width !== "auto") { hash += "." + width }
+      if (hash === "#!pl") { hash = " " }
+      history.replaceState(null, "", hash)
+      if (e !== undefined) { e.preventDefault() }
+    },
+    init: function() {
+      this.load_hash()
+      if (history.replaceState) {
+        this.set_hash()
+        $(document).on('click', $.proxy(this.set_hash, this))
+      }
+    }
+  }
+})(jQuery)
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/app/assets/javascripts/zp.init.js	Sun May 12 02:43:38 2013 +0900
@@ -0,0 +1,1 @@
+window.zp = {}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/app/assets/javascripts/zp.new.js	Sun May 12 02:43:38 2013 +0900
@@ -0,0 +1,19 @@
+//= jquery.autosize
+//= require autosize-box-fix
+(function($) {
+  window.zp.new = {
+    input: function() { return $("#paste_paste") },
+    clear: function(e) {
+      this.input().val("").focus()
+      e.preventDefault()
+    },
+    init: function() {
+      if (this.input() == "undefined") { return }
+      console.log("wheee~")
+      $(document).on('click', "#reset_paste", $.proxy(this.clear, this))
+      this.input().autosize({ className: 'mirrored_text row-fluid', append: "\n"});
+      $.autosize_box_fix($(".mirrored_text"))
+      this.input().focus()
+    }
+  }
+})(jQuery)
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/app/assets/javascripts/zp.viewer_width.js	Sun May 12 02:43:38 2013 +0900
@@ -0,0 +1,25 @@
+(function($) {
+  window.zp.viewer_width = {
+    links: function() { return $("#paste-resize ul li a") },
+    current: "auto",
+    resize: function(width) {
+      var
+        paste = $("#paste"),
+        title = $("#paste-resize .btn")
+      title.text(title.data("base").replace(":size:", width))
+      this.current = width
+      if (width == "auto") {
+        paste.css("width", "")
+      } else {
+        paste.css("width", width)
+      }
+      zp.hash_magic.set_hash()
+    },
+    do_switch: function(e) {
+      this.resize($(e.target).text())
+    },
+    init: function() {
+      this.links().click($.proxy(this.do_switch, this))
+    }
+  }
+})(jQuery)
--- a/app/assets/stylesheets/tabs.scss	Sun May 12 02:42:43 2013 +0900
+++ b/app/assets/stylesheets/tabs.scss	Sun May 12 02:43:38 2013 +0900
@@ -1,4 +1,4 @@
-#markdown {
+#md {
   // copypasta from bootstrap's variables.scss
   $baseFontSize_orig: 14px;
   $baseLineHeight_orig: 20px;
--- a/app/views/pastes/show.html.erb	Sun May 12 02:42:43 2013 +0900
+++ b/app/views/pastes/show.html.erb	Sun May 12 02:43:38 2013 +0900
@@ -13,31 +13,31 @@
 <div id="paste-show" class="tabbable" data-id="<%= @paste.id %>">
   <div class="btn-toolbar">
     <div id="paste-mode" class="btn-group" data-toggle="buttons-radio">
-      <%= link_to 'Plain', '#plain', :data => { :toggle => 'tab' }, :class => 'btn active' %>
-      <%= link_to 'Highlight', '#highlight', :data => { :toggle => 'tab' }, :class => 'btn' %>
-      <%= link_to 'Markdown', '#markdown', :data => { :toggle => 'tab' }, :class => 'btn' %>
+      <%= link_to 'Plain', '#pl', :data => { :toggle => 'tab' }, :class => 'btn active' %>
+      <%= link_to 'Highlight', '#hl', :data => { :toggle => 'tab' }, :class => 'btn' %>
+      <%= link_to 'Markdown', '#md', :data => { :toggle => 'tab' }, :class => 'btn' %>
     </div>
     <div class="btn-group" id="paste-resize">
-      <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
+      <a class="btn dropdown-toggle" data-toggle="dropdown" data-base="Width: :size:" href="#">
         Width: auto
         <span class="caret"></span>
       </a>
       <ul class="dropdown-menu">
-        <li><a href="#" data-size="auto">auto</a></li>
-        <li><a href="#" data-size="560px">560px</a></li>
-        <li><a href="#" data-size="760px">760px</a></li>
-        <li><a href="#" data-size="960px">960px</a></li>
+        <li><a href="#">auto</a></li>
+        <li><a href="#">560px</a></li>
+        <li><a href="#">760px</a></li>
+        <li><a href="#">960px</a></li>
       </ul>
     </div>
   </div>
-  <div id="paste" data-mode="plain" data-width="auto" class="tab-content">
-    <div class="tab-pane active" id="plain">
+  <div id="paste" class="tab-content">
+    <div class="tab-pane active" id="pl">
       <pre><%= @paste.paste %></pre>
     </div>
-    <div class="tab-pane" id="highlight">
+    <div class="tab-pane" id="hl">
       <pre class="prettyprint linenums"></pre>
     </div>
-    <div class="tab-pane" id="markdown">
+    <div class="tab-pane" id="md">
       <div class="well"></div>
     </div>
   </div>