Merge pull request #4068 from mfilser/fix_long_textarea_editing

Fix long textarea editing

.meteor/packages

@@ -64,7 +64,7 @@ mquandalle:jquery-ui-drag-drop-sort
 mquandalle:mousetrap-bindglobal
 peerlibrary:blaze-components@=0.15.1
 templates:tabs
-verron:autosize
+meteor-autosize
 simple:json-routes
 rajit:bootstrap3-datepicker
 shell-server@0.5.0

.meteor/versions

@@ -219,7 +219,7 @@ url@1.3.2
 useraccounts:core@1.14.2
 useraccounts:flow-routing@1.14.2
 useraccounts:unstyled@1.14.2
-verron:autosize@3.0.8
+meteor-autosize@5.0.1
 webapp@1.10.1
 webapp-hashing@1.1.0
 wekan-accounts-cas@0.1.0

packages/meteor-autosize/LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 v3rron
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/meteor-autosize/README.md

@@ -0,0 +1,44 @@
+meteor-autosize
+======================
+
+Ever wondered how to make autoresizable Facebook-style textarea inputs? Autosize is a small, stand-alone script to automatically adjust (resize) textarea height to fit text.
+Repackaged for Meteor.
+
+<img src="./img/ScreenShot1.png" alt="screenshot1" width="360"/>
+<img src="./img/ScreenShot2.png" alt="screenshot2" width="360"/>
+
+## Installation
+
+`meteor add verron:autosize`
+
+## Example
+
+````javascript
+// from a NodeList
+autosize(document.querySelectorAll('textarea'));
+
+// from a single Node
+autosize(document.querySelector('textarea'));
+
+// from a jQuery collection
+autosize($('textarea'));
+````
+
+#### Browser compatibility
+
+Chrome | Firefox | IE | Safari | iOS Safari | Android | Opera Mini | Windows Phone IE
+------ | --------|----|--------|------------|---------|------------|------------------
+yes    | yes     | 9  | yes    | yes        | 4       | ?          | 8.1
+
+
+#### Documentation and Demo
+
+http://www.jacklmoore.com/autosize/
+
+#### Original package
+
+https://github.com/jackmoore/autosize/
+
+#### Author
+
+The Meteor repackage was created by Spendflow, updated by Kelly Copley (@copleykj) for the new 0.9.0 packaging system and updated to v3 (pure javascript version) by Ronen Verdi ([@v3rron](https://github.com/v3rron)).

packages/meteor-autosize/lib/autosize.js

@@ -0,0 +1,274 @@
+(function (global, factory) {
+	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+	typeof define === 'function' && define.amd ? define(factory) :
+	(global = global || self, global.autosize = factory());
+}(this, (function () {
+	var map = typeof Map === "function" ? new Map() : function () {
+	  var keys = [];
+	  var values = [];
+	  return {
+	    has: function has(key) {
+	      return keys.indexOf(key) > -1;
+	    },
+	    get: function get(key) {
+	      return values[keys.indexOf(key)];
+	    },
+	    set: function set(key, value) {
+	      if (keys.indexOf(key) === -1) {
+	        keys.push(key);
+	        values.push(value);
+	      }
+	    },
+	    "delete": function _delete(key) {
+	      var index = keys.indexOf(key);
+
+	      if (index > -1) {
+	        keys.splice(index, 1);
+	        values.splice(index, 1);
+	      }
+	    }
+	  };
+	}();
+
+	var createEvent = function createEvent(name) {
+	  return new Event(name, {
+	    bubbles: true
+	  });
+	};
+
+	try {
+	  new Event('test');
+	} catch (e) {
+	  // IE does not support `new Event()`
+	  createEvent = function createEvent(name) {
+	    var evt = document.createEvent('Event');
+	    evt.initEvent(name, true, false);
+	    return evt;
+	  };
+	}
+
+	function assign(ta) {
+	  if (!ta || !ta.nodeName || ta.nodeName !== 'TEXTAREA' || map.has(ta)) return;
+	  var heightOffset = null;
+	  var clientWidth = null;
+	  var cachedHeight = null;
+
+	  function init() {
+	    var style = window.getComputedStyle(ta, null);
+
+	    if (style.resize === 'vertical') {
+	      ta.style.resize = 'none';
+	    } else if (style.resize === 'both') {
+	      ta.style.resize = 'horizontal';
+	    }
+
+	    if (style.boxSizing === 'content-box') {
+	      heightOffset = -(parseFloat(style.paddingTop) + parseFloat(style.paddingBottom));
+	    } else {
+	      heightOffset = parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
+	    } // Fix when a textarea is not on document body and heightOffset is Not a Number
+
+
+	    if (isNaN(heightOffset)) {
+	      heightOffset = 0;
+	    }
+
+	    update();
+	  }
+
+	  function changeOverflow(value) {
+	    {
+	      // Chrome/Safari-specific fix:
+	      // When the textarea y-overflow is hidden, Chrome/Safari do not reflow the text to account for the space
+	      // made available by removing the scrollbar. The following forces the necessary text reflow.
+	      var width = ta.style.width;
+	      ta.style.width = '0px'; // Force reflow:
+	      /* jshint ignore:end */
+
+	      ta.style.width = width;
+	    }
+	    ta.style.overflowY = value;
+	  }
+
+	  function getParentOverflows(el) {
+	    var arr = [];
+
+	    while (el && el.parentNode && el.parentNode instanceof Element) {
+	      if (el.parentNode.scrollTop) {
+	        arr.push({
+	          node: el.parentNode,
+	          scrollTop: el.parentNode.scrollTop
+	        });
+	      }
+
+	      el = el.parentNode;
+	    }
+
+	    return arr;
+	  }
+
+	  function resize() {
+	    if (ta.scrollHeight === 0) {
+	      // If the scrollHeight is 0, then the element probably has display:none or is detached from the DOM.
+	      return;
+	    }
+
+	    var overflows = getParentOverflows(ta);
+	    var docTop = document.documentElement && document.documentElement.scrollTop; // Needed for Mobile IE (ticket #240)
+
+	    ta.style.height = '';
+	    ta.style.height = ta.scrollHeight + heightOffset + 'px'; // used to check if an update is actually necessary on window.resize
+
+	    clientWidth = ta.clientWidth; // prevents scroll-position jumping
+
+	    overflows.forEach(function (el) {
+	      el.node.scrollTop = el.scrollTop;
+	    });
+
+	    if (docTop) {
+	      document.documentElement.scrollTop = docTop;
+	    }
+	  }
+
+	  function update() {
+	    resize();
+	    var styleHeight = Math.round(parseFloat(ta.style.height));
+	    var computed = window.getComputedStyle(ta, null); // Using offsetHeight as a replacement for computed.height in IE, because IE does not account use of border-box
+
+	    var actualHeight = computed.boxSizing === 'content-box' ? Math.round(parseFloat(computed.height)) : ta.offsetHeight; // The actual height not matching the style height (set via the resize method) indicates that 
+	    // the max-height has been exceeded, in which case the overflow should be allowed.
+
+	    if (actualHeight < styleHeight) {
+	      if (computed.overflowY === 'hidden') {
+	        changeOverflow('scroll');
+	        resize();
+	        actualHeight = computed.boxSizing === 'content-box' ? Math.round(parseFloat(window.getComputedStyle(ta, null).height)) : ta.offsetHeight;
+	      }
+	    } else {
+	      // Normally keep overflow set to hidden, to avoid flash of scrollbar as the textarea expands.
+	      if (computed.overflowY !== 'hidden') {
+	        changeOverflow('hidden');
+	        resize();
+	        actualHeight = computed.boxSizing === 'content-box' ? Math.round(parseFloat(window.getComputedStyle(ta, null).height)) : ta.offsetHeight;
+	      }
+	    }
+
+	    if (cachedHeight !== actualHeight) {
+	      cachedHeight = actualHeight;
+	      var evt = createEvent('autosize:resized');
+
+	      try {
+	        ta.dispatchEvent(evt);
+	      } catch (err) {// Firefox will throw an error on dispatchEvent for a detached element
+	        // https://bugzilla.mozilla.org/show_bug.cgi?id=889376
+	      }
+	    }
+	  }
+
+	  var pageResize = function pageResize() {
+	    if (ta.clientWidth !== clientWidth) {
+	      update();
+	    }
+	  };
+
+	  var destroy = function (style) {
+	    window.removeEventListener('resize', pageResize, false);
+	    ta.removeEventListener('input', update, false);
+	    ta.removeEventListener('keyup', update, false);
+	    ta.removeEventListener('autosize:destroy', destroy, false);
+	    ta.removeEventListener('autosize:update', update, false);
+	    Object.keys(style).forEach(function (key) {
+	      ta.style[key] = style[key];
+	    });
+	    map["delete"](ta);
+	  }.bind(ta, {
+	    height: ta.style.height,
+	    resize: ta.style.resize,
+	    overflowY: ta.style.overflowY,
+	    overflowX: ta.style.overflowX,
+	    wordWrap: ta.style.wordWrap
+	  });
+
+	  ta.addEventListener('autosize:destroy', destroy, false); // IE9 does not fire onpropertychange or oninput for deletions,
+	  // so binding to onkeyup to catch most of those events.
+	  // There is no way that I know of to detect something like 'cut' in IE9.
+
+	  if ('onpropertychange' in ta && 'oninput' in ta) {
+	    ta.addEventListener('keyup', update, false);
+	  }
+
+	  window.addEventListener('resize', pageResize, false);
+	  ta.addEventListener('input', update, false);
+	  ta.addEventListener('autosize:update', update, false);
+	  ta.style.overflowX = 'hidden';
+	  ta.style.wordWrap = 'break-word';
+	  map.set(ta, {
+	    destroy: destroy,
+	    update: update
+	  });
+	  init();
+	}
+
+	function destroy(ta) {
+	  var methods = map.get(ta);
+
+	  if (methods) {
+	    methods.destroy();
+	  }
+	}
+
+	function update(ta) {
+	  var methods = map.get(ta);
+
+	  if (methods) {
+	    methods.update();
+	  }
+	}
+
+	var autosize = null; // Do nothing in Node.js environment and IE8 (or lower)
+
+	if (typeof window === 'undefined' || typeof window.getComputedStyle !== 'function') {
+	  autosize = function autosize(el) {
+	    return el;
+	  };
+
+	  autosize.destroy = function (el) {
+	    return el;
+	  };
+
+	  autosize.update = function (el) {
+	    return el;
+	  };
+	} else {
+	  autosize = function autosize(el, options) {
+	    if (el) {
+	      Array.prototype.forEach.call(el.length ? el : [el], function (x) {
+	        return assign(x);
+	      });
+	    }
+
+	    return el;
+	  };
+
+	  autosize.destroy = function (el) {
+	    if (el) {
+	      Array.prototype.forEach.call(el.length ? el : [el], destroy);
+	    }
+
+	    return el;
+	  };
+
+	  autosize.update = function (el) {
+	    if (el) {
+	      Array.prototype.forEach.call(el.length ? el : [el], update);
+	    }
+
+	    return el;
+	  };
+	}
+
+	var autosize$1 = autosize;
+
+	return autosize$1;
+
+})));

packages/meteor-autosize/package.js

@@ -0,0 +1,12 @@
+Package.describe({
+  name: 'meteor-autosize',
+  summary: 'Automatically adjust textarea height based on user input.',
+  version: '5.0.1',
+  git: "https://github.com/DeDeSt/meteor-autosize.git",
+  documentation: 'README.md'
+});
+
+Package.on_use(function (api) {
+  api.versionsFrom("METEOR@0.9.0");
+  api.add_files(['lib/autosize.js'], 'client');
+});