@cocreate/events 1.8.4 → 1.9.0

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+# [1.9.0](https://github.com/CoCreate-app/CoCreate-events/compare/v1.8.4...v1.9.0) (2023-04-30)
+
+
+### Bug Fixes
+
+* fullscreen target updated to fullscreen fullscreen-target ([a6c2acb](https://github.com/CoCreate-app/CoCreate-events/commit/a6c2acb8870ba52e916939a4d6cb7e0fddc5249b))
+* package-lock.json and pnpm-lock.yaml added to .gitignore ([b93d0c3](https://github.com/CoCreate-app/CoCreate-events/commit/b93d0c3cb06498be033c4117b2501e17e3556840))
+* removed toogle fullscreen icons. now using css content ([c3fff41](https://github.com/CoCreate-app/CoCreate-events/commit/c3fff41dfdfcd67f876b66a29abf41fca3e8d59e))
+* typo originalHTML to originalHtml ([3ac8d14](https://github.com/CoCreate-app/CoCreate-events/commit/3ac8d143b7d5fbcb4985844414d0fbb18e4f7f79))
+* typo originalHTML to originalHtml ([fa694cb](https://github.com/CoCreate-app/CoCreate-events/commit/fa694cb50e63b92c8e60895e1c1c632ebdab9f3f))
+
+
+### Features
+
+* localStorage attributes ([e2f5089](https://github.com/CoCreate-app/CoCreate-events/commit/e2f5089975428f96bf155f58e3581502122562f8))
+* observer -key attributes ([7b5c218](https://github.com/CoCreate-app/CoCreate-events/commit/7b5c218756249f6017b1bf03c39fb6ba8d5fa87b))
+
 ## [1.8.4](https://github.com/CoCreate-app/CoCreate-events/compare/v1.8.3...v1.8.4) (2023-04-24)
 
 

package/demo/click.html

@@ -65,6 +65,6 @@
 	    
         <!-- <script src="../dist/CoCreate-events.js"></script> -->
 	    <script src="https://cdn.cocreate.app/latest/CoCreate.min.js" ></script>
-	    <!-- <script src="https://cdn.cocreate.app/1.50.5/CoCreate.min.js" ></script> -->
+	    <!-- <script src="https://cdn.cocreate.app/1.50.6/CoCreate.min.js" ></script> -->
 	</body>
 </html>

package/demo/index.html

@@ -63,9 +63,11 @@
 			other content
 		</div>
 		<!-- defining key example -->
-		<!-- <div click-target="#testing" click-value="hello, bye" click-key="ty">
-			<span id="testing" class="{{ty}}">other content</span>
-		</div> -->
+		<div click-target="#testing" click-value="hello, bye" click-key="ty"> click here</div>
+		<div id="testing" class="{{ty}}">
+			<span class="{{ty}}"><b a="{{ty}}">other content {{ty}}</b></span>
+			<span class="{{ty}}"><b a="{{ty}}">other content {{ty}}</b></span>
+		</div>
 		
 		<!-- defining key example -->
 		<div >
@@ -81,8 +83,7 @@
 		<input placeholder="Search all attributes" input-value input-key="keyname" input-target="#keyname">
 	
         <!--<script src="../dist/CoCreate-events.js"></script>-->
-        <script src="https://cdn.cocreate.app/1.50.5/CoCreate.min.js"></script>
-	    <!-- <script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script> -->
+	    <script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
 
 	</body>
 </html>

package/demo/selected.html

@@ -49,7 +49,7 @@
 		</div>
 
         <!-- <script src="../dist/CoCreate-selected.js"></script> -->
-        <script src="https://cdn.cocreate.app/1.50.5/CoCreate.min.js"></script>
+        <script src="https://cdn.cocreate.app/1.50.6/CoCreate.min.js"></script>
 	    <!-- <script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script> -->
 	</body>
 </html>

package/docs/index.html

@@ -143,7 +143,7 @@
                                 <a class="margin-right:10px" hidden id="eye-slash" show="#eye, #demo-preview" hide="#eye-slash" events="code-height" events-target="#demo-code"><i class="fas fa-eye-slash"></i></a>
                                 <a class="margin-right:10px" id="code" show="#code-slash" hide="#code, #demo-code"><i class="fa fa-code"></i></a>
                                 <a class="margin-right:10px" hidden id="code-slash" show="#code, #demo-code" hide="#code-slash"><i class="fas fa-code"></i></a>
-                                <a class="margin-right:5px" fullscreen target="#playground"><i class="fas fa-expand"></i></a>
+                                <a class="margin-right:5px" fullscreen fullscreen-target="#playground"></a>
                             </div>
         
                         </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/events",
-  "version": "1.8.4",
+  "version": "1.9.0",
   "description": "A simple events component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.",
   "keywords": [
     "events",

package/src/index.js

@@ -20,6 +20,7 @@ const CoCreateEvents = {
 			this.initPrefix('selected', ['click']);
 			this.initPrefix('onload', ['onload']);
 			this.initPrefix('observe', ['observer']);
+			this.initPrefix('localstorage', ['onload', 'observer']);
 		}
 
 		let customEventEls = document.querySelectorAll('[event-name]')
@@ -56,7 +57,7 @@ const CoCreateEvents = {
 			}
 		});
 
-		let selector = `[${prefix}], [${prefix}-value], [${prefix}-target], [${prefix}-closest], [${prefix}-parent], [${prefix}-next], [${prefix}-previous]`
+		let selector = `[${prefix}], [${prefix}-key], [${prefix}-value], [${prefix}-target], [${prefix}-closest], [${prefix}-parent], [${prefix}-next], [${prefix}-previous]`
 
 		observer.init({ 
 			name: 'CoCreateEventattributes', 
@@ -72,7 +73,7 @@ const CoCreateEvents = {
 			observer.init({
 				name: 'observerAttributes',
 				observe: ['attributes'],
-				attributeName: [`${prefix}-target`, `${prefix}-closest`, `${prefix}-parent`, `${prefix}-next`, `${prefix}-previous`],
+				attributeName: [`${prefix}-key`, `${prefix}-value`, `${prefix}-target`, `${prefix}-closest`, `${prefix}-parent`, `${prefix}-next`, `${prefix}-previous`],
 				callback: function(mutation) {
 					// remove previous observer
 					self.initElements([mutation.target], prefix, events)
@@ -158,7 +159,7 @@ const CoCreateEvents = {
 					// 	return;
 					self.__updateElements(target, prefix);
 
-					let selector = `[${prefix}], [${prefix}-value], [${prefix}-target], [${prefix}-closest], [${prefix}-parent], [${prefix}-next], [${prefix}-previous]`
+					let selector = `[${prefix}], [${prefix}-key], [${prefix}-value], [${prefix}-target], [${prefix}-closest], [${prefix}-parent], [${prefix}-next], [${prefix}-previous]`
 
 					let parentElement = target.parentElement;
 					if (parentElement) {
@@ -185,7 +186,15 @@ const CoCreateEvents = {
 		const self = this;
 		// ToDo: support empty value when prefix-attribute defined, add and remove the attribute
 		
-		let values = element.getAttribute(`${prefix}-value`) || element.getAttribute(prefix);
+		let values
+		if (prefix === 'localstorage') {
+			let key = element.getAttribute('localstorage-get')
+			if (key)
+				values = localStorage.getItem(key)
+			else
+				return
+		} else
+			values = element.getAttribute(`${prefix}-value`) || element.getAttribute(prefix);
 		if (values)
 			values = values.split(',');
 		else {
@@ -451,7 +460,7 @@ function replaceKey(prefix, element, key, values) {
 		else
 			element.htmlKeys[key] = value;
 
-		let newHTML = element.originalHTML
+		let newHTML = element.originalHtml
 		if (newHTML) {
 			for (let elementKey of Object.keys(element.htmlKeys)) {
 				const htmlKeyRegex = new RegExp(elementKey, "g");