update

refactored to use puremvc from NPM
PureMVC · Aug 26, 2024 · 603028a · 603028a
1 parent 65fc529
commit 603028a
Show file tree

Hide file tree

Showing 33 changed files with 287 additions and 1,689 deletions.
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,28 @@
+BSD 3-Clause License
+
+Copyright (c) 2023, Saad Shams <saad.shams@puremvc.org>
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+ list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+ this list of conditions and the following disclaimer in the documentation
+ and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+ contributors may be used to endorse or promote products derived from
+ this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
diff --git a/README.md b/README.md
@@ -15,6 +15,12 @@ This demo illustrates techniques for performing routine client-side maintenance
 * [plainJS](https://plainjs.com/javascript/)
 * Vanilla JS Animations using [Robert Penner's Easing Functions](http://robertpenner.com/easing/) | [Cheat Sheet](https://easings.net/)
 
+## Installation
+```shell
+npm run build
+npm run preview
+```
+
 ## Semantic HTML Components
 
 ```html

diff --git a/bin/index.html b/bin/index.html
@@ -4,8 +4,8 @@
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Employee Admin</title>
- <script type="module" crossorigin src="/assets/index-0MBlhyuv.js"></script>
- <link rel="stylesheet" crossorigin href="/assets/index-VK0D6HqQ.css">
+ <script type="module" crossorigin src="/assets/index-CjLqF_GI.js"></script>
+ <link rel="stylesheet" crossorigin href="/assets/index-CtjMmi5U.css">
 </head>
 <body>
 <div class="fluid">
@@ -46,27 +46,27 @@ <h2>User Form</h2>
  <ul>
  <li>
  <label for="first">First Name:</label>
- <input type="text" id="first" name="first" required>
+ <input type="text" id="first" name="first" required />
  </li>
  <li>
  <label for="last">Last Name:</label>
- <input type="text" id="last" name="last" required>
+ <input type="text" id="last" name="last" required />
  </li>
  <li>
  <label for="email">Email:</label>
- <input type="email" id="email" name="email" required>
+ <input type="email" id="email" name="email" required />
  </li>
  <li>
  <label for="username">Username:</label>
- <input type="text" id="username" name="username" required>
+ <input type="text" id="username" name="username" required />
  </li>
  <li>
  <label for="password">Password:</label>
- <input type="password" id="password" name="password" required>
+ <input type="password" id="password" name="password" required />
  </li>
  <li>
  <label for="confirm">Confirm:</label>
- <input type="password" id="confirm" name="confirm" required>
+ <input type="password" id="confirm" name="confirm" required />
  </li>
  <li>
  <label for="department">Department:</label>
@@ -102,4 +102,4 @@ <h2>User Roles</h2>
 
 </div>
 </body>
-</html>
+</html>
diff --git a/build/playwright.js b/build/playwright.js
@@ -1,3 +1,11 @@
+//
+// playwright.js
+// PureMVC JS Demo - EmployeeAdmin
+//
+// Copyright(c) 2023 Saad Shams <saad.shams@puremvc.org>
+// Your reuse is governed by the BSD 3-Clause License
+//
+
 // @ts-check
 import {defineConfig, devices} from "@playwright/test";
 

diff --git a/build/vite.js b/build/vite.js
@@ -1,4 +1,10 @@
-import path from 'path';
+//
+// vite.js
+// PureMVC JS Demo - EmployeeAdmin
+//
+// Copyright(c) 2023 Saad Shams <saad.shams@puremvc.org>
+// Your reuse is governed by the BSD 3-Clause License
+//
 
 export default {
  root: "src",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -36,5 +36,8 @@
  "browserslist": [
  "defaults",
  "cover 99.5%"
- ]
+ ],
+ "dependencies": {
+ "@puremvc/puremvc-js-multicore-framework": "2.0.7"
+ }
 }
diff --git a/src/css/app.css b/src/css/app.css
@@ -1,5 +1,11 @@
 @charset "UTF-8";
+/**
+ app.css
+ PureMVC JS Demo - EmployeeAdmin
 
+ Copyright(c) 2023 Saad Shams <saad.shams@puremvc.org>
+ Your reuse is governed by the BSD 3-Clause License
+*/
 @import url("base.css");
 @import url("layout.css");
 @import url("module_user.css");

diff --git a/src/css/base.css b/src/css/base.css
@@ -1,4 +1,11 @@
 @charset "UTF-8";
+/**
+ base.css
+ PureMVC JS Demo - EmployeeAdmin
+
+ Copyright(c) 2023 Saad Shams <saad.shams@puremvc.org>
+ Your reuse is governed by the BSD 3-Clause License
+*/
 *, *::before, *::after {
  box-sizing: border-box;
 }

diff --git a/src/css/layout.css b/src/css/layout.css
@@ -1,4 +1,11 @@
 @charset "UTF-8";
+/**
+ layout.css
+ PureMVC JS Demo - EmployeeAdmin
+
+ Copyright(c) 2023 Saad Shams <saad.shams@puremvc.org>
+ Your reuse is governed by the BSD 3-Clause License
+*/
 html {
  height: 100%;
 }

diff --git a/src/css/module_form.css b/src/css/module_form.css
@@ -1,4 +1,11 @@
 @charset "UTF-8";
+/**
+ module_form.css
+ PureMVC JS Demo - EmployeeAdmin
+
+ Copyright(c) 2023 Saad Shams <saad.shams@puremvc.org>
+ Your reuse is governed by the BSD 3-Clause License
+*/
 #userForm .wrapper {
  display: flex;
  flex-direction: column;

diff --git a/src/css/module_role.css b/src/css/module_role.css
@@ -1,4 +1,11 @@
 @charset "UTF-8";
+/**
+ module_role.css
+ PureMVC JS Demo - EmployeeAdmin
+
+ Copyright(c) 2023 Saad Shams <saad.shams@puremvc.org>
+ Your reuse is governed by the BSD 3-Clause License
+*/
 #userRole .wrapper {
  display: flex;
  flex-direction: column;
@@ -66,4 +73,4 @@
  padding: 0 7px;
  margin-right: 10px;
  }
-}
+}
diff --git a/src/css/module_user.css b/src/css/module_user.css
@@ -1,4 +1,11 @@
 @charset "UTF-8";
+/**
+ module_user.css
+ PureMVC JS Demo - EmployeeAdmin
+
+ Copyright(c) 2023 Saad Shams <saad.shams@puremvc.org>
+ Your reuse is governed by the BSD 3-Clause License
+*/
 #userList .wrapper {
  display: flex;
  flex-direction: column;
@@ -51,6 +58,7 @@
  padding: 10px;
  margin-top: auto;
 }
+
 @media screen and (max-width: 767px) { /* Small screens (phones) */
  #userList main ul li label span:nth-child(n+2),
  #userList main ul li:first-child span:nth-child(n+2) { /* Hide all columns starting from the 2nd column */

diff --git a/src/css/theme-dark.css b/src/css/theme-dark.css
@@ -1,4 +1,11 @@
 @charset "UTF-8";
+/**
+ theme-dark.css
+ PureMVC JS Demo - EmployeeAdmin
+
+ Copyright(c) 2023 Saad Shams <saad.shams@puremvc.org>
+ Your reuse is governed by the BSD 3-Clause License
+*/
 :root {
  --dark-theme-color: #ffffff;
  --dark-theme-background: #121212;

diff --git a/src/css/theme.css b/src/css/theme.css
@@ -1,4 +1,11 @@
 @charset "UTF-8";
+/**
+ theme.css
+ PureMVC JS Demo - EmployeeAdmin
+
+ Copyright(c) 2023 Saad Shams <saad.shams@puremvc.org>
+ Your reuse is governed by the BSD 3-Clause License
+*/
 :root {
  --light-theme-color: #ffffff;
  --light-theme-disabled: #eaeded;

diff --git a/src/index.html b/src/index.html
@@ -5,7 +5,7 @@
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Employee Admin</title>
  <link rel="stylesheet" href="css/app.css">
- <script type="module" src="js/app.js"></script>
+ <script type="module" src="js/Application.js"></script>
 </head>
 <body>
 <div class="fluid">
@@ -102,4 +102,4 @@ <h2>User Roles</h2>
 
 </div>
 </body>
-</html>
+</html>
diff --git a/src/js/Application.js b/src/js/Application.js
@@ -0,0 +1,14 @@
+//
+// Application.js
+// PureMVC JS Demo - EmployeeAdmin
+//
+// Copyright(c) 2023 Saad Shams <saad.shams@puremvc.org>
+// Your reuse is governed by the BSD 3-Clause License
+//
+
+import {ApplicationFacade} from "./ApplicationFacade.js";
+
+document.addEventListener("DOMContentLoaded", () => {
+ ApplicationFacade.getInstance("EmployeeAdmin").startup();
+});
+
diff --git a/src/js/ApplicationFacade.js b/src/js/ApplicationFacade.js
@@ -1,7 +1,15 @@
-import {puremvc} from "./api/puremvc-2.0.0.js"
+//
+// ApplicationFacade.js
+// PureMVC JS Demo - EmployeeAdmin
+//
+// Copyright(c) 2023 Saad Shams <saad.shams@puremvc.org>
+// Your reuse is governed by the BSD 3-Clause License
+//
+
+import {Facade} from "@puremvc/puremvc-js-multicore-framework";
 import {StartupCommand} from "./controller/StartupCommand.js";
 
-export class ApplicationFacade extends puremvc.Facade {
+export class ApplicationFacade extends Facade {
 
  static get STARTUP () { return "startup" }
 
@@ -29,11 +37,11 @@ export class ApplicationFacade extends puremvc.Facade {
  }
 
  static getInstance(key) {
- return puremvc.Facade.getInstance(key, k => new ApplicationFacade(k));
+ return Facade.getInstance(key, k => new ApplicationFacade(k));
  }
 
  startup(app) {
  this.sendNotification(ApplicationFacade.STARTUP, app);
  }
 
-}
+}