changeset 108:a949b71c9afb

Allows paste content width resize.
author Edho Arief <edho@myconan.net>
date Mon, 12 Nov 2012 12:27:39 +0700
parents c6af63fc16ab
children 90eee69e4ee9
files app/assets/javascripts/application.js app/assets/javascripts/init.tabs.js app/views/pastes/show.html.erb
diffstat 3 files changed, 28 insertions(+), 1 deletions(-) [+]
line wrap: on
line diff
--- a/app/assets/javascripts/application.js	Mon Nov 12 11:42:26 2012 +0700
+++ b/app/assets/javascripts/application.js	Mon Nov 12 12:27:39 2012 +0700
@@ -13,6 +13,7 @@
 //= require jquery
 //= require jquery_ujs
 //= require twitter/bootstrap/tab
+//= require twitter/bootstrap/dropdown
 //= require prettify
 //= require marked
 //= require jquery.autosize
--- a/app/assets/javascripts/init.tabs.js	Mon Nov 12 11:42:26 2012 +0700
+++ b/app/assets/javascripts/init.tabs.js	Mon Nov 12 12:27:39 2012 +0700
@@ -9,4 +9,16 @@
   mode = window.location.hash.substr(1);
   if (mode == 'highlight') { $('#paste-tabs li:eq(1) a').click(); }
   else if (mode == 'markdown') { $('#paste-tabs li:eq(2) a').click(); }
+
+  $('#tab-resize ul a').click(function() {
+    var size = $(this).data('size'),
+      paste = $('#paste'),
+      title = $('#tab-resize a.btn');
+    title.html(title.html().replace(/(Width: ).*\n/, '$1' + size + '\n'));
+    if (size == 'full') {
+      paste.css('width', '');
+    } else {
+      paste.css('width', size);
+    }
+  });
 });
--- a/app/views/pastes/show.html.erb	Mon Nov 12 11:42:26 2012 +0700
+++ b/app/views/pastes/show.html.erb	Mon Nov 12 12:27:39 2012 +0700
@@ -9,8 +9,22 @@
     <li class="active"><%= link_to 'Plain', '#plain', :data => { :toggle => 'tab' } %></li>
     <li><%= link_to 'Highlight', '#highlight', :data => { :toggle => 'tab' } %></li>
     <li><%= link_to 'Markdown', '#markdown', :data => { :toggle => 'tab' } %></li>
+    <li class="pull-right">
+      <div class="btn-group" id="tab-resize">
+        <a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="#">
+          Width: full
+          <span class="caret"></span>
+        </a>
+        <ul class="dropdown-menu">
+          <li><a href="#" data-size="full">full</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>
+        </ul>
+      </div>
+    </li>
   </ul>
-  <div class="tab-content">
+  <div id="paste" class="tab-content">
     <div class="tab-pane active" id="plain">
       <pre><%= @paste.paste %></pre>
     </div>