updated demo, bump v3.0.11

d2phap · Mar 11, 2023 · ae23852 · ae23852
1 parent bc8796d
commit ae23852
Show file tree

Hide file tree

Showing 20 changed files with 2,729 additions and 226 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -102,3 +102,5 @@ typings/
 # TernJS port file
 .tern-port
 .DS_Store
+.DS_Store
+.DS_Store
diff --git a/README.md b/README.md
@@ -22,7 +22,7 @@ NPM package: https://www.npmjs.com/package/fluent-reveal-effect
 
 ### Import the library
 ```js
-import effects from "fluent-reveal-effect"
+import { applyEffect } from "fluent-reveal-effect"
 ```
 
 
@@ -55,15 +55,15 @@ import effects from "fluent-reveal-effect"
 ```
 #### JavaScript
 ```js
-effects.applyEffect(".btn", {
-  lightColor: "rgba(255,255,255,0.1)",
+applyEffect('.btn', {
+  lightColor: 'rgba(255,255,255,0.1)',
   gradientSize: 150,
 });
 ```
 
 #### Enable Ripple click effect
 ````js
-effects.applyEffect(".btn", {
+applyEffect('.btn', {
   clickEffect: true,
 });
 ````
@@ -86,15 +86,15 @@ effects.applyEffect(".btn", {
 
 #### JavaScript
 ```js
-effects.applyEffect(".effect-group-container", {
+applyEffect('.effect-group-container', {
   clickEffect: true,
-  lightColor: "rgba(255,255,255,0.6)",
+  lightColor: 'rgba(255,255,255,0.6)',
   gradientSize: 80,
   isContainer: true,
   children: {
-    borderSelector: ".btn-border",
-    elementSelector: ".btn",
-    lightColor: "rgba(255,255,255,0.3)",
+    borderSelector: '.btn-border',
+    elementSelector: '.btn',
+    lightColor: 'rgba(255,255,255,0.3)',
     gradientSize: 150
   }
 })

diff --git a/demo/dist/index.js b/demo/dist/index.js
diff --git a/demo/dist/index.js.LICENSE.txt b/demo/dist/index.js.LICENSE.txt
@@ -0,0 +1,9 @@
+/*! 
+  Fluent Reveal Effect v3.0.9
+  ----------------------------------------
+  Copyright (c) 2023 Duong Dieu Phap.
+  Homepage: https://github.com/d2phap/fluent-reveal-effect#readme
+  Released under the MIT License.
+
+  License information can be found in LICENSE.txt.
+ */
diff --git a/demo/dist/index.js.map b/demo/dist/index.js.map
diff --git a/demo/index.html b/demo/index.html
@@ -2,75 +2,169 @@
 <html lang="en">
 
 <head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<meta http-equiv="X-UA-Compatible" content="ie=edge">
-	<title>UI kit for Fluent Design System</title>
-	<link rel="stylesheet" href="main.css">
-
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>npm-package-template demo</title>
+
+  <style>
+    body {
+      background-color: #282828;
+      padding: 3rem;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    }
+
+    .title {
+      font-size: 28px;
+      text-align: center;
+      color: #fff;
+      margin-bottom: 30px;
+    }
+
+    .toolbar {
+      text-align: center;
+    }
+
+    .toolbar-2 {
+      text-align: center;
+      margin-top: 30px;
+      padding: 30px;
+      background-color: rgba(255, 255, 255, 0.05);
+    }
+
+    .btn {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+      padding: 1rem 2rem;
+      background-color: rgba(255, 255, 255, 0.2);
+      color: #fff;
+      border: 0;
+
+      transition: all 200ms ease;
+    }
+
+    .btn.btn-round {
+      border-radius: 10px;
+    }
+
+    .btn:focus {
+      outline: none;
+    }
+
+    .btn:active {
+      box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.1);
+    }
+
+    .btn-blue {
+      background-color: #005db9;
+    }
+
+    .btn-red {
+      background-color: #ad0052;
+    }
+
+    .btn-green {
+      background-color: #00947e;
+    }
+
+    .btn-black {
+      background-color: #444;
+    }
+
+
+
+    .btn-border {
+      display: inline-block;
+      margin: 5px;
+    }
+
+    .btn-border .btn {
+      display: block;
+      margin: 2px;
+    }
+
+    .btn-border.btn-round {
+      border-radius: 10px;
+    }
+
+    .btn-border.btn-round .btn {
+      border-radius: 10px;
+    }
+
+    .ref {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+      position: fixed;
+      z-index: 10000;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      text-align: center;
+      color: #fff;
+      padding: 1rem 0;
+      background-image: linear-gradient(135deg, rgba(60, 88, 173, 0.8), rgba(41, 152, 172, 0.8));
+      -webkit-backdrop-filter: blur(10px);
+      backdrop-filter: blur(10px);
+    }
+
+    .ref a {
+      color: #fff;
+    }
+  </style>
 </head>
 
 <body>
-
-	<div class="title">
-		Reveal Effects - Fluent Design
-	</div>
-
-	<div class="toolbar">
-		<button class="btn">Button 1</button>
-		<button class="btn btn-blue">Button 2</button>
-		<button class="btn btn-red">Button 3</button>
-		<button class="btn btn-green">Button 4</button>
-
-	</div>
-
-	<div class="effect-group-container toolbar-2">
-		<div class="btn-border btn-black btn5">
-			<button class="btn btn-black">Button 5</button>
-		</div>
-		<div class="btn-border btn-blue btn6">
-			<button class="btn btn-blue">Button 6</button>
-		</div>
-		<div class="btn-border btn-red btn7">
-			<button class="btn btn-red">Button 7</button>
-		</div>
-		<div class="btn-border btn-green btn8">
-			<button class="btn btn-green">Button 8</button>
-		</div>
-		<br/>
-		<div class="btn-border btn-round btn-red btn6">
-			<button class="btn btn-red">Button 9</button>
-		</div>
-		<div class="btn-border btn-round btn-blue btn9">
-			<button class="btn btn-blue">Button 10</button>
-		</div>
-		<div class="btn-border btn-round btn-black btn10">
-			<button class="btn btn-black">Button 11</button>
-		</div>
-	</div>
-
-
-
-
-
-	<br/><br/><br/><br/><br/><br/>
-
-
-
-
-
-
-
-	<div class="ref">
-		A <a href="https://github.com/d2phap/fluent-reveal-effect/" target="_blank">
-			project</a>
-		of 
-		<a href="http://www.imageglass.org/about" target="_blank">
-			Duong Dieu Phap
-		</a>
-	</div>
-
-	<script src="main.js"></script>
+  <div class="title">
+    Reveal Effects - Fluent Design
+  </div>
+
+  <div class="toolbar">
+    <button class="btn">Button 1</button>
+    <button class="btn btn-blue">Button 2</button>
+    <button class="btn btn-red">Button 3</button>
+    <button class="btn btn-green">Button 4</button>
+
+  </div>
+
+  <div class="effect-group-container toolbar-2">
+    <div class="btn-border btn-black btn5">
+      <button class="btn btn-black">Button 5</button>
+    </div>
+    <div class="btn-border btn-blue btn6">
+      <button class="btn btn-blue">Button 6</button>
+    </div>
+    <div class="btn-border btn-red btn7">
+      <button class="btn btn-red">Button 7</button>
+    </div>
+    <div class="btn-border btn-green btn8">
+      <button class="btn btn-green">Button 8</button>
+    </div>
+    <br />
+    <div class="btn-border btn-round btn-red btn6">
+      <button class="btn btn-red">Button 9</button>
+    </div>
+    <div class="btn-border btn-round btn-blue btn9">
+      <button class="btn btn-blue">Button 10</button>
+    </div>
+    <div class="btn-border btn-round btn-black btn10">
+      <button class="btn btn-black">Button 11</button>
+    </div>
+  </div>
+
+
+
+
+
+  <br /><br /><br /><br /><br /><br />
+
+  <div class="ref">
+    A <a href="https://github.com/d2phap/fluent-reveal-effect/" target="_blank">
+      project</a>
+    of
+    <a href="http://www.imageglass.org/about" target="_blank">
+      Duong Dieu Phap
+    </a>
+  </div>
+
+  <!-- <script src="../dist/main.js"></script> -->
+  <script src="./dist/index.js"></script>
 </body>
 
 </html>
diff --git a/demo/index.js b/demo/index.js
diff --git a/demo/index.ts b/demo/index.ts
@@ -0,0 +1,24 @@
+
+import { applyEffect } from 'fluent-reveal-effect';
+
+applyEffect('.toolbar', {
+	lightColor: 'rgba(255,255,255,0.1)',
+	gradientSize: 500
+});
+
+applyEffect('.toolbar > .btn', {
+	clickEffect: true
+});
+
+applyEffect('.effect-group-container', {
+	clickEffect: true,
+	lightColor: 'rgba(255,255,255,0.6)',
+	gradientSize: 80,
+	isContainer: true,
+	children: {
+		borderSelector: '.btn-border',
+		elementSelector: '.btn',
+		lightColor: 'rgba(255,255,255,0.3)',
+		gradientSize: 150
+	}
+});