[1.0.5]

zlatnaspirala · Oct 13, 2022 · a4195a4 · a4195a4
1 parent beefa5e
commit a4195a4
Show file tree

Hide file tree

Showing 23 changed files with 547 additions and 162 deletions.
diff --git a/dist/hello.js b/dist/hello.js
@@ -48,10 +48,16 @@ class MyList extends _index.BaseComponent {
     this.initial(arg);
   }
   onClick = this.clickBind;
+
+  /**
+   * @description
+   * Index Key is not required but 
+   * it is nice to have.
+   */
   render = () => `
     <div class="verCenter">
-      ${this.tableData.map((item, index) => `<h1 onclick="(${this.onClick})('${this.id}')"
-               class="middle">` + index + item + `</h1>`).join('')}
+      ${this.tableData.map((item, index) => `<h2 data-key="${index}" onclick="(${this.onClick})('${this.id}')"
+               class="middle">` + index + item + `</h2>`).join('')}
     </div>
   `;
 }
@@ -80,7 +86,15 @@ let myBoxComp, myHeader;
 
 (0, _index.On)("my-box-custom", r => {
   console.info("Application On ver-box custom integrated dom element, click event attached.", r);
-  alert(" List item clicked => " + r.path[0].innerHTML);
+  // alert(" List item clicked => " + r.path[0].innerHTML);
+  console.log('>>>>>>>>>>' + myBoxComp.tableData);
+  // myBoxComp.tableData.slice();
+  let getIndex = r.path[0].getAttribute('data-key');
+  myBoxComp.tableData.splice(getIndex, 1);
+  setTimeout(function () {
+    myBoxComp.set('tableData', myBoxComp.tableData);
+  }, 600);
+  r.path[0].classList.add('animate-destroy');
 });
 
 },{"../index":5,"./components/my-list":2,"./layouts/heder":4}],4:[function(require,module,exports){

diff --git a/dist/index.html b/dist/index.html
@@ -15,10 +15,10 @@
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   <meta name="robots" content="noindex">
-  <link rel="icon" type="image/png" sizes="96x96" href="assets/icon/96.png">
-  <link rel="icon" type="image/png" sizes="192x192" href="assets/icon/192.png">
-  <link rel="icon" href="assets/icon/favicon.ico" type="image/x-icon">
-  <meta name="msapplication-TileImage" content="assets/icon/ms-icon-310x310.png">
+  <link rel="icon" type="image/png" sizes="96x96" href="assets/icons/96.png">
+  <link rel="icon" type="image/png" sizes="192x192" href="assets/icons/192.png">
+  <!--link rel="icon" href="assets/icons/favicon.ico" type="image/x-icon"-->
+  <meta name="msapplication-TileImage" content="assets/icon/512.png">
   <title>Safir</title>
   <link rel="stylesheet" href="./style.css">
   <script defer src="./hello.js"></script>

diff --git a/dist/style.css b/dist/style.css
diff --git a/hello/assets/icons/block.png b/hello/assets/icons/block.png
diff --git a/hello/components/my-list.js b/hello/components/my-list.js
@@ -27,11 +27,16 @@ export default class MyList extends BaseComponent {
 
   onClick = this.clickBind;
 
+  /**
+   * @description
+   * Index Key is not required but 
+   * it is nice to have.
+   */
   render = () => `
     <div class="verCenter">
       ${this.tableData.map((item, index) =>
-          `<h1 onclick="(${this.onClick})('${this.id}')"
-               class="middle">` + index + item + `</h1>`
+          `<h2 data-key="${index}" onclick="(${this.onClick})('${this.id}')"
+               class="middle">` + index + item + `</h2>`
       ).join('')}
     </div>
   `;

diff --git a/hello/css/_animations.scss b/hello/css/_animations.scss
@@ -0,0 +1,36 @@
+  // &:hover {
+  //   @include themify($themes) {
+  //     color: themed('buttonTextHoverColor');
+  //   }
+
+  .animate-jello {
+    animation: jello2 1s ease 0s 1 normal forwards;
+  }
+
+  @keyframes jello2 {
+    0% { transform: scale(0); }
+    100% { transform: scale(1); }
+  }
+
+  .animate-jello2 {
+    animation: jello 2s ease 0s 1 normal forwards;
+  }
+
+  @keyframes jello {
+    0% { transform: scale3d(1, 1, 1); }
+    30% { transform: scale3d(1.25, 0.75, 1); }
+    40% { transform: scale3d(0.75, 1.25, 1); }
+    50% { transform: scale3d(1.15, 0.85, 1); }
+    65% { transform: scale3d(0.95, 1.05, 1); }
+    75% { transform: scale3d(1.05, 0.95, 1); }
+    100% { transform: scale3d(1, 1, 1); }
+  }
+
+  .animate-destroy {
+    animation: animateDestroy 1s ease 0s 1 normal forwards;
+  }
+
+  @keyframes animateDestroy {
+    0% { opacity: 1; transform: rotate(0) scale(1); }
+    100% { opacity: 0; transform: rotate(-540deg) scale(0); }
+  }
diff --git a/hello/css/_general.scss b/hello/css/_general.scss
@@ -33,10 +33,10 @@ body {
 
 h2 {
   @include themify($themes) {
-    border: themed('buttonBorder');
+    cursor: default;
     &:hover {
       color: themed('textHoverColor');
-      border: themed('buttonBorderHover');
+      background:  themed('divShadowColor');
     }
   }
 }
@@ -57,6 +57,7 @@ button {
     color: themed('textColor');
     background-color: themed('backgroundColor');
     border: themed('buttonBorder');
+    font-size: themed('fontSize');
   }
 
   font-family: Accuratist;

diff --git a/hello/css/base/_variables.scss b/hello/css/base/_variables.scss
@@ -1,19 +1,21 @@
 $themes: (
   light: (
+    fontSize: 2vw,
     backgroundColor: #fff,
     divShadowColor: #49d8ff14,
     scrollBar: inset 0 0 5px rgb(32, 116, 135),
     scrollbarThumb: silver,
     scrollbarThumbHover: orange,
-    textColor: #408bbd,
-    buttonTextColor: #408bbd,
+    textColor: #023e66,
+    buttonTextColor: #0f2d41,
     buttonTextTransform: none,
-    buttonTextHoverColor: #61b0e7,
+    buttonTextHoverColor: #000000,
     buttonColor: rgb(255, 255, 255),
-    buttonBorder: 1px solid rgb(176, 235, 248),
+    buttonBorder: 1px solid rgb(0, 148, 181),
     buttonBorderHover: 1px solid rgb(0, 221, 255),
   ),
   dark: (
+    fontSize: 2vw,
     backgroundColor: rgb(83, 83, 83),
     divShadowColor: #ff000014,
     scrollBar: inset 0 0 5px rgb(32, 116, 135),
@@ -27,6 +29,7 @@ $themes: (
     buttonBorderHover: 1px solid rgb(250, 250, 250),
   ),
   orange: (
+    fontSize: 2vw,
     backgroundColor: rgb(0, 0, 0),
     divShadowColor: #ff000014,
     scrollBar: inset 0 0 5px rgb(32, 116, 135),