From 7499395ac03142a1c6668d42473b6004dd673113 Mon Sep 17 00:00:00 2001 From: Afshin Mehrabani Date: Fri, 26 Jul 2013 11:36:25 +0430 Subject: [PATCH] Change clearStorage API + change version to v0.3.0 --- example/index.html | 4 -- widearea.css | 2 +- widearea.js | 114 +++++++++++++++++++++++++++++++++------------ 3 files changed, 86 insertions(+), 34 deletions(-) diff --git a/example/index.html b/example/index.html index 5cfe2f4..333a3a7 100644 --- a/example/index.html +++ b/example/index.html @@ -74,16 +74,12 @@ } .detail-widearea { margin-top: 50px; - opacity: 0.4; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } - .detail-widearea:hover { - opacity: 1; - } diff --git a/widearea.css b/widearea.css index b965e51..06b3fe2 100644 --- a/widearea.css +++ b/widearea.css @@ -1,5 +1,5 @@ .widearea { - padding-right: 20px; + padding-right: 25px; } .widearea-overlayLayer { diff --git a/widearea.js b/widearea.js index 24051e8..68a5e8a 100644 --- a/widearea.js +++ b/widearea.js @@ -1,5 +1,5 @@ /** - * WideArea v0.2.0 + * WideArea v0.3.0 * https://github.com/usablica/widearea * MIT licensed * @@ -19,7 +19,7 @@ } } (this, function (exports) { //Default config/variables - var VERSION = '0.2.0'; + var VERSION = '0.3.0'; /** * WideArea main class @@ -38,12 +38,69 @@ defaultColorScheme: 'light', closeIconLabel: 'Close WideArea', changeThemeIconLabel: 'Toggle Color Scheme', - fullScreenIconLabel: 'WideArea Mode' + fullScreenIconLabel: 'WideArea Mode', + autoSaveKeyPrefix: 'WDATA-' }; _enable.call(this); } + /** + * Save textarea data to storage + * + * @api private + * @method _saveToStorage + */ + function _saveToStorage(id, value) { + //save textarea data in localStorage + localStorage.setItem(this._options.autoSaveKeyPrefix + id, value); + } + + /** + * Get data from storage + * + * @api private + * @method _getFromStorage + */ + function _getFromStorage(id) { + return localStorage.getItem(this._options.autoSaveKeyPrefix + id); + } + + /** + * Clear specific textarea data from storage + * + * @api private + * @method _clearStorage + */ + function _clearStorage(value) { + + var currentElement, id; + if (typeof(value) == "string") { + //with css selector + currentElement = this._targetElement.querySelector(value); + if (currentElement) { + id = parseInt(currentElement.getAttribute("data-widearea-id")); + } + } else if (typeof(value) == "number") { + //first, clear it from storage + currentElement = this._targetElement.querySelector('textarea[data-widearea-id="' + value + '"]'); + id = value; + } else if (typeof(value) == "object") { + //with DOM + currentElement = value; + + if (currentElement) { + id = parseInt(currentElement.getAttribute("data-widearea-id")); + } + } + + //and then, clear the textarea + if (currentElement && id) { + currentElement.value = ''; + localStorage.removeItem(this._options.autoSaveKeyPrefix + id); + } + } + /** * Enable the WideArea * @@ -60,13 +117,6 @@ _enableFullScreen.call(self, this); }; - //save data - save = function(){ - //save textarea data in localStorage - var storage = 'WDATA-' + this.getAttribute('data-widearea-id'); - localStorage.setItem(storage,this.value); - }; - //to hold all textareas in the page this._textareas = []; @@ -96,20 +146,25 @@ //set wideArea id and increase the stepper currentTextArea.setAttribute("data-widearea-id", this._wideAreaId); wideAreaIcons.setAttribute("id", "widearea-" + this._wideAreaId); - ++this._wideAreaId; //Autosaving - var storage = 'WDATA-' + currentTextArea.getAttribute('data-widearea-id'); - if(localStorage.getItem(storage)){ - currentTextArea.value = localStorage.getItem(storage); + if (_getFromStorage.call(this, this._wideAreaId)) { + currentTextArea.value = _getFromStorage.call(this, this._wideAreaId); } + + var onTextChanged = function () { + _saveToStorage.call(self, this.getAttribute('data-widearea-id'), this.value); + }; //add textchange listener if (currentTextArea.addEventListener) { - currentTextArea.addEventListener('input',save, false); - } else if (currentTextArea.attachEvent) {//IE hack - currentTextArea.attachEvent('onpropertychange', save); + currentTextArea.addEventListener('input', onTextChanged, false); + } else if (currentTextArea.attachEvent) { //IE hack + currentTextArea.attachEvent('onpropertychange', onTextChanged); } + //go to next wideArea + ++this._wideAreaId; + //set icons panel position _renewIconsPosition(currentTextArea, wideAreaIcons); @@ -291,13 +346,19 @@ //set the value of small textarea to fullscreen one currentTextArea.value = targetTextarea.value; + var onTextChanged = function () { + _saveToStorage.call(self, this.getAttribute('data-widearea-id'), this.value); + }; + //add textchange listener + if (currentTextArea.addEventListener) { + currentTextArea.addEventListener('input', onTextChanged, false); + } else if (currentTextArea.attachEvent) { //IE hack + currentTextArea.attachEvent('onpropertychange', onTextChanged); + } + //bind to keydown event this._onKeyDown = function(e) { if (e.keyCode === 27 && self._options.exitOnEsc) { - //save data on localStorage - textAreas = document.getElementsByClassName('widearea-fullscreen'); - var storage = 'WDATA-' + textAreas[0].getAttribute('data-widearea-id'); - localStorage.setItem(storage,textAreas[0].value); //escape key pressed _disableFullScreen.call(self); } @@ -342,17 +403,12 @@ var overlayLayer = document.querySelector(".widearea-overlayLayer"); var fullscreenTextArea = overlayLayer.querySelector("textarea"); - //save data on localStorage - textAreas = document.getElementsByClassName('widearea-fullscreen'); - var storage = 'WDATA-' + textAreas[0].getAttribute('data-widearea-id'); - localStorage.setItem(storage,textAreas[0].value); - //change the focus smallTextArea.focus(); //set fullscreen textarea to small one smallTextArea.value = fullscreenTextArea.value; - + //reset class for targeted text smallTextArea.className = smallTextArea.className.replace(/widearea-fullscreened/gi, "").replace(/^\s+|\s+$/g, ""); @@ -417,8 +473,8 @@ this._options = _mergeOptions(this._options, options); return this; }, - clearData: function(id){ - localStorage.removeItem('WDATA-' + id); + clearData: function(value) { + _clearStorage.call(this, value); return this; } };