Skip to content

Loading…

Textarea auto resize improvements #396

Merged
merged 3 commits into from

3 participants

@garrettrayj

Editor textareas will shrink when lines are removed and respond to cut and paste events. Also, the resize script is included on page add and edit views.

@rwarasaurus rwarasaurus merged commit 145440f into anchorcms:master
@daviddarnes
Anchor CMS member

Was hoping someone would add this, nice work!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
Showing with 24 additions and 7 deletions.
  1. +22 −7 anchor/views/assets/js/text-resize.js
  2. +1 −0 anchor/views/pages/add.php
  3. +1 −0 anchor/views/pages/edit.php
View
29 anchor/views/assets/js/text-resize.js
@@ -2,11 +2,26 @@
* Textarea auto resize
*/
$(function() {
- var textarea = $('textarea').first(), limit = 1080;
-
- var resize = function() {
- textarea.height(textarea[0].scrollHeight);
- };
-
- textarea.bind('keydown', resize).trigger('keydown');
+ var $text = $('textarea').first();
+
+ function resize(e) {
+ var bodyScrollPos = $('body').prop('scrollTop');
+ $text.height('auto');
+ $text.height($text.prop('scrollHeight') + 'px');
+ $('body').prop('scrollTop', bodyScrollPos);
+ }
+
+ /* 0-timeout to get the already changed text */
+ function delayedResize (e) {
+ window.setTimeout(function(){
+ resize(e);
+ }, 0);
+ }
+
+ $text.on('change', resize);
+ $text.on('cut paste drop keydown', delayedResize);
+
+ $text.focus();
+ $text.select();
+ resize();
});
View
1 anchor/views/pages/add.php
@@ -87,6 +87,7 @@
<script src="<?php echo asset('anchor/views/assets/js/redirect.js'); ?>"></script>
<!--<script src="<?php echo asset('anchor/views/assets/js/focus-mode.js'); ?>"></script>-->
<script src="<?php echo asset('anchor/views/assets/js/upload-fields.js'); ?>"></script>
+<script src="<?php echo asset('anchor/views/assets/js/text-resize.js'); ?>"></script>
<script src="<?php echo asset('anchor/views/assets/js/editor.js'); ?>"></script>
<script>
$('textarea[name=content]').editor();
View
1 anchor/views/pages/edit.php
@@ -90,6 +90,7 @@
<script src="<?php echo asset('anchor/views/assets/js/redirect.js'); ?>"></script>
<!--<script src="<?php echo asset('anchor/views/assets/js/focus-mode.js'); ?>"></script>-->
<script src="<?php echo asset('anchor/views/assets/js/upload-fields.js'); ?>"></script>
+<script src="<?php echo asset('anchor/views/assets/js/text-resize.js'); ?>"></script>
<script src="<?php echo asset('anchor/views/assets/js/editor.js'); ?>"></script>
<script>
$('textarea[name=content]').editor();
Something went wrong with that request. Please try again.