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;
}
};