@cocreate/events 1.8.4 → 1.9.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/demo/click.html +2 -2
  3. package/demo/hover.html +1 -1
  4. package/demo/index.html +7 -6
  5. package/demo/selected.html +1 -1
  6. package/docs/index.html +15 -15
  7. package/package.json +1 -1
  8. package/src/index.js +14 -5
package/CHANGELOG.md CHANGED
@@ -1,3 +1,27 @@
1
+ ## [1.9.1](https://github.com/CoCreate-app/CoCreate-events/compare/v1.9.0...v1.9.1) (2023-05-01)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * replace fontawesome with svg ([11ed649](https://github.com/CoCreate-app/CoCreate-events/commit/11ed649b3a40be52f44bf6f2aa4b1c567f75df05))
7
+
8
+ # [1.9.0](https://github.com/CoCreate-app/CoCreate-events/compare/v1.8.4...v1.9.0) (2023-04-30)
9
+
10
+
11
+ ### Bug Fixes
12
+
13
+ * fullscreen target updated to fullscreen fullscreen-target ([a6c2acb](https://github.com/CoCreate-app/CoCreate-events/commit/a6c2acb8870ba52e916939a4d6cb7e0fddc5249b))
14
+ * package-lock.json and pnpm-lock.yaml added to .gitignore ([b93d0c3](https://github.com/CoCreate-app/CoCreate-events/commit/b93d0c3cb06498be033c4117b2501e17e3556840))
15
+ * removed toogle fullscreen icons. now using css content ([c3fff41](https://github.com/CoCreate-app/CoCreate-events/commit/c3fff41dfdfcd67f876b66a29abf41fca3e8d59e))
16
+ * typo originalHTML to originalHtml ([3ac8d14](https://github.com/CoCreate-app/CoCreate-events/commit/3ac8d143b7d5fbcb4985844414d0fbb18e4f7f79))
17
+ * typo originalHTML to originalHtml ([fa694cb](https://github.com/CoCreate-app/CoCreate-events/commit/fa694cb50e63b92c8e60895e1c1c632ebdab9f3f))
18
+
19
+
20
+ ### Features
21
+
22
+ * localStorage attributes ([e2f5089](https://github.com/CoCreate-app/CoCreate-events/commit/e2f5089975428f96bf155f58e3581502122562f8))
23
+ * observer -key attributes ([7b5c218](https://github.com/CoCreate-app/CoCreate-events/commit/7b5c218756249f6017b1bf03c39fb6ba8d5fa87b))
24
+
1
25
  ## [1.8.4](https://github.com/CoCreate-app/CoCreate-events/compare/v1.8.3...v1.8.4) (2023-04-24)
2
26
 
3
27
 
package/demo/click.html CHANGED
@@ -36,7 +36,7 @@
36
36
  <p>Here is div-01 i should get class hidden</p>
37
37
  <div>
38
38
  <div class="vdom-item" >some content1</div>
39
- <span click="test" click-closest=".vdom-item"><i class="fa fa-caret-down"></i></span>
39
+ <span click="test" click-closest=".vdom-item"><i class="height:16px fill:#505050" src="/assets/svg/caret-down".svg"></i></span>
40
40
  </div>
41
41
  <div class="vdom-item" >some content2</div>
42
42
  </div>
@@ -65,6 +65,6 @@
65
65
 
66
66
  <!-- <script src="../dist/CoCreate-events.js"></script> -->
67
67
  <script src="https://cdn.cocreate.app/latest/CoCreate.min.js" ></script>
68
- <!-- <script src="https://cdn.cocreate.app/1.50.5/CoCreate.min.js" ></script> -->
68
+ <!-- <script src="https://cdn.cocreate.app/1.50.6/CoCreate.min.js" ></script> -->
69
69
  </body>
70
70
  </html>
package/demo/hover.html CHANGED
@@ -30,7 +30,7 @@
30
30
  <p>Here is div-01 i should get class hidden</p>
31
31
  <div>
32
32
  <div class="vdom-item" >some content1</div>
33
- <span hover="test" hover-closest=".vdom-item"><i class="fa fa-caret-down"></i></span>
33
+ <span hover="test" hover-closest=".vdom-item"><i class="height:16px fill:#505050" src="/assets/svg/caret-down".svg"></i></span>
34
34
  </div>
35
35
  <div class="vdom-item" >some content2</div>
36
36
  </div>
package/demo/index.html CHANGED
@@ -36,7 +36,7 @@
36
36
  <p>Here is div-01 i should get class hidden</p>
37
37
  <div>
38
38
  <div class="vdom-item" >some content1</div>
39
- <span toggle="test" toggle-closest=".vdom-item"><i class="fa fa-caret-down"></i></span>
39
+ <span toggle="test" toggle-closest=".vdom-item"><i class="height:16px fill:#505050" src="/assets/svg/caret-down".svg"></i></span>
40
40
  </div>
41
41
  <div class="vdom-item" >some content2</div>
42
42
  </div>
@@ -63,9 +63,11 @@
63
63
  other content
64
64
  </div>
65
65
  <!-- defining key example -->
66
- <!-- <div click-target="#testing" click-value="hello, bye" click-key="ty">
67
- <span id="testing" class="{{ty}}">other content</span>
68
- </div> -->
66
+ <div click-target="#testing" click-value="hello, bye" click-key="ty"> click here</div>
67
+ <div id="testing" class="{{ty}}">
68
+ <span class="{{ty}}"><b a="{{ty}}">other content {{ty}}</b></span>
69
+ <span class="{{ty}}"><b a="{{ty}}">other content {{ty}}</b></span>
70
+ </div>
69
71
 
70
72
  <!-- defining key example -->
71
73
  <div >
@@ -81,8 +83,7 @@
81
83
  <input placeholder="Search all attributes" input-value input-key="keyname" input-target="#keyname">
82
84
 
83
85
  <!--<script src="../dist/CoCreate-events.js"></script>-->
84
- <script src="https://cdn.cocreate.app/1.50.5/CoCreate.min.js"></script>
85
- <!-- <script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script> -->
86
+ <script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
86
87
 
87
88
  </body>
88
89
  </html>
package/demo/selected.html CHANGED
@@ -49,7 +49,7 @@
49
49
  </div>
50
50
 
51
51
  <!-- <script src="../dist/CoCreate-selected.js"></script> -->
52
- <script src="https://cdn.cocreate.app/1.50.5/CoCreate.min.js"></script>
52
+ <script src="https://cdn.cocreate.app/1.50.6/CoCreate.min.js"></script>
53
53
  <!-- <script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script> -->
54
54
  </body>
55
55
  </html>
package/docs/index.html CHANGED
@@ -32,13 +32,13 @@
32
32
  <div class="display:flex align-items:center font-size:20px position:absolute right:0 padding:5px background:white">
33
33
  <div class="display:flex align-items:center transition:0.3s padding-left:10px" share-network="true" share-text="Enter decription here" share-title="testing im a title" share-height="600" share-width="700" share-media="https://cdn.cocreate.app/docs/events.png" hover="display:block!important" hover-target=".social-networks">
34
34
  <div class="display:none social-networks">
35
- <a class="margin-right:15px" share-network='twitter' title="Share on twitter"><i class="fab fa-twitter"></i></a>
36
- <a class="margin-right:15px" share-network='facebook' title="Share on Facebook"><i class="fab fa-facebook"></i></a>
37
- <a class="margin-right:15px" share-network='instagram' title="Share on instagram"><i class="fab fa-instagram"></i></a>
35
+ <a class="margin-right:15px" share-network='twitter' title="Share on twitter"><i class="height:20px fill:#505050" src="/assets/svg/twitter.svg"></i></a>
36
+ <a class="margin-right:15px" share-network='facebook' title="Share on Facebook"><i class="height:20px fill:#505050" src="/assets/svg/facebook.svg"></i></a>
37
+ <a class="margin-right:15px" share-network='instagram' title="Share on instagram"><i class="height:20px fill:#505050" src="/assets/svg/instagram.svg"></i></a>
38
38
  </div>
39
- <a class="margin-right:15px" share-network='share' title="Share on share"><i class="fas fa-share-alt"></i></a>
39
+ <a class="margin-right:15px" share-network='share' title="Share on share"><i class="height:20px fill:#505050" src="/assets/svg/share-alt.svg"></i></a>
40
40
  </div>
41
- <a href="https://github.com/CoCreate-app/CoCreate-events" target="_blank" class="margin-right:15px"><i class="fab fa-github"></i></a>
41
+ <a href="https://github.com/CoCreate-app/CoCreate-events" target="_blank" class="margin-right:15px"><i class="height:20px fill:#505050" src="/assets/svg/github.svg"></i></a>
42
42
  </div>
43
43
  </div>
44
44
  <h1 class="max-width:500px margin:20px_10px line-height:1.5 font-size:16px font-weight:100">It is used to change values in classes or specific attributes, its name describes its functionality events.</h1>
@@ -47,7 +47,7 @@
47
47
  <div id="events-install" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-target="#events-install-section">
48
48
  <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-target='[href="#events-install"]'>
49
49
  <h2 class="padding:5px_0px">Install</h2>
50
- <a class="margin-left:10px display:none" href="#events-install"><i class="fas fa-link"></i></a>
50
+ <a class="margin-left:10px display:none" href="#events-install"><i class="height:20px fill:#505050" src="/assets/svg/link.svg"></i></a>
51
51
  </span>
52
52
  </div>
53
53
  <pre><code class="language-bash">npm i @cocreate/events</code></pre>
@@ -57,7 +57,7 @@
57
57
  <div id="events-usage" class="margin-top:80px border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-target="#events-usage-section">
58
58
  <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-target='[href="#events-usage"]'>
59
59
  <h2 class="padding:5px_0px">Usage</h2>
60
- <a class="margin-left:10px display:none" href="#events-usage"><i class="fas fa-link"></i></a>
60
+ <a class="margin-left:10px display:none" href="#events-usage"><i class="height:20px fill:#505050" src="/assets/svg/link.svg"></i></a>
61
61
  </span>
62
62
  </div>
63
63
  <div class="">
@@ -94,7 +94,7 @@
94
94
  <div id="events-attributes" class="margin-top:80px border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-target="#events-attributes-section">
95
95
  <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-target='[href="#events-attributes"]'>
96
96
  <h2 class="padding:5px_0px">Attributes</h2>
97
- <a class="margin-left:10px display:none" href="#events-attributes"><i class="fas fa-link"></i></a>
97
+ <a class="margin-left:10px display:none" href="#events-attributes"><i class="height:20px fill:#505050" src="/assets/svg/link.svg"></i></a>
98
98
  </span>
99
99
  </div>
100
100
  <ul class="list-style-type:none ">
@@ -122,7 +122,7 @@
122
122
  <div id="events-demo" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-target="#events-demo-section">
123
123
  <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-target='[href="#events-demo"]'>
124
124
  <h2 class="padding:5px_0px">Demo</h2>
125
- <a class="margin-left:10px display:none" href="#events-demo"><i class="fas fa-link"></i></a>
125
+ <a class="margin-left:10px display:none" href="#events-demo"><i class="height:20px fill:#505050" src="/assets/svg/link.svg"></i></a>
126
126
  </span>
127
127
  </div>
128
128
  <div class="position:sticky top:0 padding:15px_0px height:100vh">
@@ -139,11 +139,11 @@
139
139
  </div>
140
140
 
141
141
  <div class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
142
- <a class="margin-right:10px" id="eye" show="#eye-slash" hide="#eye, #demo-preview" events="code-height" events-target="#demo-code"><i class="far fa-eye"></i></a>
143
- <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>
144
- <a class="margin-right:10px" id="code" show="#code-slash" hide="#code, #demo-code"><i class="fa fa-code"></i></a>
145
- <a class="margin-right:10px" hidden id="code-slash" show="#code, #demo-code" hide="#code-slash"><i class="fas fa-code"></i></a>
146
- <a class="margin-right:5px" fullscreen target="#playground"><i class="fas fa-expand"></i></a>
142
+ <a class="margin-right:10px" id="eye" show="#eye-slash" hide="#eye, #demo-preview" events="code-height" events-target="#demo-code"><i class="height:18px fill:#505050" src="/assets/svg/eye.svg"></i></a>
143
+ <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="height:20px fill:#505050" src="/assets/svg/eye-slash.svg"></i></a>
144
+ <a class="margin-right:10px" id="code" show="#code-slash" hide="#code, #demo-code"><i class="height:20px fill:#505050" src="/assets/svg/code.svg"></i></a>
145
+ <a class="margin-right:10px" hidden id="code-slash" show="#code, #demo-code" hide="#code-slash"><i class="display:flex height:18px fill:#505050" src="/assets/svg/code.svg"></i></a>
146
+ <a class="margin-right:5px" fullscreen fullscreen-target="#playground"></a>
147
147
  </div>
148
148
 
149
149
  </div>
@@ -153,7 +153,7 @@
153
153
 
154
154
  </div>
155
155
  <button href="https://github.com/CoCreate-app/CoCreate-events/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..." target="_blank" class="position:fixed bottom:15px right:15px padding:15px background:dodgerblue color:#fff font-size:1.5rem grow-hover border-radius:50% border-width:0 box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4)">
156
- <i class="fas fa-pencil-alt"></i>
156
+ <i class="height:20px fill:#505050" src="/assets/svg/pencil-alt.svg"></i>
157
157
  </button>
158
158
  </main>
159
159
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cocreate/events",
3
- "version": "1.8.4",
3
+ "version": "1.9.1",
4
4
  "description": "A simple events component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.",
5
5
  "keywords": [
6
6
  "events",
package/src/index.js CHANGED
@@ -20,6 +20,7 @@ const CoCreateEvents = {
20
20
  this.initPrefix('selected', ['click']);
21
21
  this.initPrefix('onload', ['onload']);
22
22
  this.initPrefix('observe', ['observer']);
23
+ this.initPrefix('localstorage', ['onload', 'observer']);
23
24
  }
24
25
 
25
26
  let customEventEls = document.querySelectorAll('[event-name]')
@@ -56,7 +57,7 @@ const CoCreateEvents = {
56
57
  }
57
58
  });
58
59
 
59
- let selector = `[${prefix}], [${prefix}-value], [${prefix}-target], [${prefix}-closest], [${prefix}-parent], [${prefix}-next], [${prefix}-previous]`
60
+ let selector = `[${prefix}], [${prefix}-key], [${prefix}-value], [${prefix}-target], [${prefix}-closest], [${prefix}-parent], [${prefix}-next], [${prefix}-previous]`
60
61
 
61
62
  observer.init({
62
63
  name: 'CoCreateEventattributes',
@@ -72,7 +73,7 @@ const CoCreateEvents = {
72
73
  observer.init({
73
74
  name: 'observerAttributes',
74
75
  observe: ['attributes'],
75
- attributeName: [`${prefix}-target`, `${prefix}-closest`, `${prefix}-parent`, `${prefix}-next`, `${prefix}-previous`],
76
+ attributeName: [`${prefix}-key`, `${prefix}-value`, `${prefix}-target`, `${prefix}-closest`, `${prefix}-parent`, `${prefix}-next`, `${prefix}-previous`],
76
77
  callback: function(mutation) {
77
78
  // remove previous observer
78
79
  self.initElements([mutation.target], prefix, events)
@@ -158,7 +159,7 @@ const CoCreateEvents = {
158
159
  // return;
159
160
  self.__updateElements(target, prefix);
160
161
 
161
- let selector = `[${prefix}], [${prefix}-value], [${prefix}-target], [${prefix}-closest], [${prefix}-parent], [${prefix}-next], [${prefix}-previous]`
162
+ let selector = `[${prefix}], [${prefix}-key], [${prefix}-value], [${prefix}-target], [${prefix}-closest], [${prefix}-parent], [${prefix}-next], [${prefix}-previous]`
162
163
 
163
164
  let parentElement = target.parentElement;
164
165
  if (parentElement) {
@@ -185,7 +186,15 @@ const CoCreateEvents = {
185
186
  const self = this;
186
187
  // ToDo: support empty value when prefix-attribute defined, add and remove the attribute
187
188
 
188
- let values = element.getAttribute(`${prefix}-value`) || element.getAttribute(prefix);
189
+ let values
190
+ if (prefix === 'localstorage') {
191
+ let key = element.getAttribute('localstorage-get')
192
+ if (key)
193
+ values = localStorage.getItem(key)
194
+ else
195
+ return
196
+ } else
197
+ values = element.getAttribute(`${prefix}-value`) || element.getAttribute(prefix);
189
198
  if (values)
190
199
  values = values.split(',');
191
200
  else {
@@ -451,7 +460,7 @@ function replaceKey(prefix, element, key, values) {
451
460
  else
452
461
  element.htmlKeys[key] = value;
453
462
 
454
- let newHTML = element.originalHTML
463
+ let newHTML = element.originalHtml
455
464
  if (newHTML) {
456
465
  for (let elementKey of Object.keys(element.htmlKeys)) {
457
466
  const htmlKeyRegex = new RegExp(elementKey, "g");