From ca330a2c72d5a6d3fc312377bf0258881c8be1dd Mon Sep 17 00:00:00 2001 From: chomik Date: Sat, 1 Jun 2019 17:59:19 +0200 Subject: [PATCH] autosize plugin --- js/app/autosize.js | 0 js/tabler.js | 19 ++ package.json | 7 +- pages/_docs/autosize.md | 11 + pages/_includes/layout/js.html | 1 + static/libs/autosize/autosize.js | 288 +++++++++++++++++++++++++++ static/libs/autosize/autosize.min.js | 6 + 7 files changed, 330 insertions(+), 2 deletions(-) create mode 100644 js/app/autosize.js create mode 100644 pages/_docs/autosize.md create mode 100644 static/libs/autosize/autosize.js create mode 100644 static/libs/autosize/autosize.min.js diff --git a/js/app/autosize.js b/js/app/autosize.js new file mode 100644 index 00000000..e69de29b diff --git a/js/tabler.js b/js/tabler.js index 10077a5c..ea2e0973 100644 --- a/js/tabler.js +++ b/js/tabler.js @@ -109,6 +109,25 @@ $(document).ready(function () { e.preventDefault(); return false; }); + + + /* + Autosize plugin + */ + if(window.autosize) { + (function() { + + var $elem = $('[data-toggle="autosize"]'); + console.log('$elem', $elem); + + if ($elem) { + $elem.each(function() { + autosize($(this)); + }); + } + + })(); + } }); window.tabler = tabler; diff --git a/package.json b/package.json index 05e6db92..b4ce5e8a 100644 --- a/package.json +++ b/package.json @@ -48,8 +48,6 @@ ], "homepage": "https://tabler.io", "devDependencies": { - "apexcharts": "3.6.2", - "bootstrap": "twbs/bootstrap#41fcd13", "browser-sync": "^2.26.5", "bundlesize": "0.15.3", "clean-css-cli": "4.3.0", @@ -73,5 +71,10 @@ "terser": "3.17.0", "icon-font-generator": "2.1.10", "svgo": "1.2.2" + }, + "dependencies": { + "apexcharts": "3.6.2", + "bootstrap": "twbs/bootstrap#41fcd13", + "autosize": "4.0.2" } } diff --git a/pages/_docs/autosize.md b/pages/_docs/autosize.md new file mode 100644 index 00000000..2d896444 --- /dev/null +++ b/pages/_docs/autosize.md @@ -0,0 +1,11 @@ +--- +title: Autosize +--- + +A small, stand-alone script to automatically adjust textarea height. + +### Default markup + +{% example html %} + +{% endexample %} diff --git a/pages/_includes/layout/js.html b/pages/_includes/layout/js.html index a4f2d607..7527b0da 100644 --- a/pages/_includes/layout/js.html +++ b/pages/_includes/layout/js.html @@ -3,6 +3,7 @@ + diff --git a/static/libs/autosize/autosize.js b/static/libs/autosize/autosize.js new file mode 100644 index 00000000..ae609f6b --- /dev/null +++ b/static/libs/autosize/autosize.js @@ -0,0 +1,288 @@ +/*! + autosize 4.0.2 + license: MIT + http://www.jacklmoore.com/autosize +*/ +(function (global, factory) { + if (typeof define === "function" && define.amd) { + define(['module', 'exports'], factory); + } else if (typeof exports !== "undefined") { + factory(module, exports); + } else { + var mod = { + exports: {} + }; + factory(mod, mod.exports); + global.autosize = mod.exports; + } +})(this, function (module, exports) { + 'use strict'; + + 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:start */ + ta.offsetWidth; + /* 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, options); + }); + } + 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; + }; + } + + exports.default = autosize; + module.exports = exports['default']; +}); \ No newline at end of file diff --git a/static/libs/autosize/autosize.min.js b/static/libs/autosize/autosize.min.js new file mode 100644 index 00000000..4d9b4e9a --- /dev/null +++ b/static/libs/autosize/autosize.min.js @@ -0,0 +1,6 @@ +/*! + autosize 4.0.2 + license: MIT + http://www.jacklmoore.com/autosize +*/ +!function(e,t){if("function"==typeof define&&define.amd)define(["module","exports"],t);else if("undefined"!=typeof exports)t(module,exports);else{var n={exports:{}};t(n,n.exports),e.autosize=n.exports}}(this,function(e,t){"use strict";var n,o,p="function"==typeof Map?new Map:(n=[],o=[],{has:function(e){return-1