summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorJoakim Reinert <mail@jreinert.com>2015-04-18 18:58:11 +0200
committerFlorian Pritz <bluewind@xinu.at>2015-05-05 12:21:26 +0200
commit01581b3db2b617a5cf12ef7cf363b982dfc91d7b (patch)
treeb59b9e0ceeb38989dd41d2bfaee61669b38a832e
parent369cd25a3dca4b54a3a8a332a11a55f7034f12c6 (diff)
Add functionality for choosing tab width in frontend
-rw-r--r--application/views/file/html_paste_header.php8
-rw-r--r--data/css/style.css7
-rw-r--r--data/js/script.js36
3 files changed, 50 insertions, 1 deletions
diff --git a/application/views/file/html_paste_header.php b/application/views/file/html_paste_header.php
index f4d3021ec..474e06ccf 100644
--- a/application/views/file/html_paste_header.php
+++ b/application/views/file/html_paste_header.php
@@ -26,6 +26,14 @@
</ul>
<div class="btn-group navbar-right" style="margin: 8px;">
<a id="linewrap-<?=$id; ?>" class="btn btn-default" rel="tooltip" title="Toggle wrapping of long lines">Linewrap</a>
+ <div class="btn-group">
+ <a class="btn btn-default dropdown-toggle tabwidth-toggle" rel="tooltip" title="Set tab width in spaces" data-toggle="dropdown" href="#">Tab width: <span class="tabwidth-value"></span> <span class="caret"></span></a>
+ <div class="dropdown-menu tabwidth-dropdown">
+ <form class="tabwidth-form">
+ <input type="number" class="form-control" min="0">
+ </form>
+ </div>
+ </div>
<a href="<?php echo site_url($id."/plain") ?>" class="btn btn-default" rel="tooltip" title="View as plain text">Plain</a>
<a href="<?php echo site_url($id) ?>" class="btn btn-default" rel="tooltip" title="View as raw file (org. mime type)">Raw</a>
<?php if ($current_highlight === 'rmd') { ?>
diff --git a/data/css/style.css b/data/css/style.css
index 4af58e9c4..f59344f6f 100644
--- a/data/css/style.css
+++ b/data/css/style.css
@@ -322,6 +322,13 @@ body {
opacity: 0.4;
}
+.tabwidth-dropdown { padding: 15px; }
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+input[type="number"] { -moz-appearance: textfield; }
/* highlighting theme */
.hll { background-color: #ffffcc }
diff --git a/data/js/script.js b/data/js/script.js
index c96bdb5b7..9b8319b14 100644
--- a/data/js/script.js
+++ b/data/js/script.js
@@ -4,7 +4,6 @@ function fixedEncodeURIComponent (str) {
(function($) {
$(function() {
-
$(window).bind('hashchange', function(e) {
var hash = window.location.hash;
@@ -33,6 +32,41 @@ function fixedEncodeURIComponent (str) {
}
});
+ $('a.tabwidth-toggle').on('click', function (event) {
+ setTimeout(function () {
+ $(event.target).siblings('.dropdown-menu').find('input').trigger('focus');
+ }, 0);
+ });
+
+ var setTabwidth = function (value) {
+ value = value || 8;
+ $('span.tabwidth-value').html(value);
+ $('.tabwidth-form input').val(value);
+ $('.highlight pre').css('tab-size', value);
+ localStorage.setItem('tabwidth', value);
+ };
+
+ $(document).ready(function () {
+ setTabwidth(localStorage.getItem('tabwidth'));
+ });
+
+ $('form.tabwidth-form').on('submit', function (event) {
+ var value = $(event.target).find('input').val();
+ setTabwidth(value);
+ $(event.target).parents('.open').removeClass('open');
+ event.preventDefault();
+ });
+
+ $('form.tabwidth-form input').on('change', function (event) {
+ var value = $(event.target).val();
+ setTabwidth(value);
+ event.preventDefault();
+ });
+
+ $('form.tabwidth-form input').on('click', function (event) {
+ event.stopImmediatePropagation();
+ });
+
$(document).on("keyup", "[id^=language-]", function(event) {
if (event.keyCode == 13) {
event.preventDefault();