Add jquery resizing to all pages

This commit is contained in:
Eliot Whalan 2016-06-24 16:22:06 +10:00
parent 46d46f70cd
commit 565a11a2aa
3 changed files with 23 additions and 6 deletions

View File

@ -38,8 +38,7 @@
</div>
<div class="form-group is-empty" style="margin-top: 0px;">
<textarea class="form-control" rows="20" id="textArea">{{printf "%s" .Body}}</textarea>
<textarea class="form-control" rows="20" id="textArea" data-autoresize>{{printf "%s" .Body}}</textarea>
<span class="help-block">Paste your text here</span>
</div>
</div>
@ -479,6 +478,14 @@
<script src="https://cdn.jsdelivr.net/bootstrap.material-design/0.5.10/js/ripples.min.js" integrity="sha256-TY/EO/++Ug/P+fSBjaqlmtuphCBKwlP7TOnS+SGnN8g=" crossorigin="anonymous"></script>
<script>
$.material.init();
jQuery.each(jQuery('textarea[data-autoresize]'), function() {
var offset = this.offsetHeight - this.clientHeight;
var resizeTextarea = function(el) {
jQuery(el).css('height', 'auto').css('height', el.scrollHeight + offset);
};
jQuery(this).on('keyup input', function() { resizeTextarea(this); }).removeAttr('data-autoresize');
});
</script>
</body>

View File

@ -31,7 +31,7 @@
</div>
<div class="well" style="padding-top: 10px;">
<textarea class="form-control" rows="20" id="textArea">{{printf "%s" .Body}}</textarea>
<textarea class="form-control" rows="20" id="textArea" data-autoresize>{{printf "%s" .Body}}</textarea>
</div>
<div class="pull-right">
@ -41,7 +41,7 @@
<a href="{{.Raw}}" class="btn btn-raised btn-primary">Raw</a>
<a href="{{.Clone}}" class="btn btn-raised btn-primary">Clone</a>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
@ -52,6 +52,15 @@
<script src="https://cdn.jsdelivr.net/bootstrap.material-design/0.5.10/js/ripples.min.js" integrity="sha256-TY/EO/++Ug/P+fSBjaqlmtuphCBKwlP7TOnS+SGnN8g=" crossorigin="anonymous"></script>
<script>
$.material.init();
jQuery.each(jQuery('textarea[data-autoresize]'), function() {
var offset = this.offsetHeight - this.clientHeight;
var resizeTextarea = function(el) {
jQuery(el).css('height', 'auto').css('height', el.scrollHeight + offset);
};
jQuery(this).on('keyup input', function() { resizeTextarea(this); }).removeAttr('data-autoresize');
});
</script>
</body>

View File

@ -29,9 +29,10 @@
<div class="page-header">
<h1>%s</h1>
</div>
<div class="well" style="padding-top: 10px;">
%s
<div class="col-md-12">
%s
</div>
</div>
<div class="pull-right">