dlg-ui 1.0.13 → 1.0.15

package/addon/components/fly-in.hbs

@@ -0,0 +1,14 @@
+<div class="fly-in-wrapper" id="fly-in-wrapper" {{did-insert this.configWrapper}}>
+    <div class="fly-in-container">
+        <div class="fly-in-preview">
+            <img class="fly-in-image" src={{this.imageSrc}} style="width: 100%;" />
+            <FaIcon @icon={{this.icon}} class="fly-in-icon"/>
+        </div>
+        <div class="fly-in-title" {{did-insert this.configContent}}>
+            <h3>{{this.title}}</h3>
+        </div>
+    </div>
+    <div class="fly-in-dropdown">
+        {{yield to="dropdown"}}
+    </div>
+</div>

package/addon/components/fly-in.js

@@ -0,0 +1,57 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class FlyInComponent extends Component {
+    get activeWidth() {
+        return this.args.activeWidth || '300px';
+    }
+
+    get icon() {
+        return this.args.icon || null;
+    }
+
+    get imageSrc() {
+        return this.args.imageSrc || 'https://cdn.nba.com/headshots/nba/latest/1040x760/2544.png';
+    }
+
+    get title() {
+        return this.args.title || 'Title';
+    }
+
+    get titleOffset() {
+        return this.args.titleOffset || '15%';
+    }
+
+    get yPercentage() {
+        return this.args.yPercentage || '10%';
+    }
+
+    @action
+    configContent(element) {
+        element.style.right = this.titleOffset;
+    }
+    
+    @action
+    configWrapper(element) {
+        element.style.top = this.yPercentage;
+
+        element.addEventListener('mouseenter', async () => {
+            element.style.minWidth = this.activeWidth;
+            await new Promise(resolve => setTimeout(resolve, 100));
+            let dropdown = element.querySelector('.fly-in-dropdown');
+            if (dropdown) {
+                dropdown.style.display = 'block';
+                dropdown.classList.add('fly-in-dropdown-hover');
+            }
+        });
+        element.addEventListener('mouseleave', async () => {
+            element.style.minWidth = '';
+            element.querySelector('.fly-in-dropdown').style.display = 'none';
+            let dropdown = element.querySelector('.fly-in-dropdown');
+            if (dropdown) {
+                dropdown.style.display = 'none';
+                dropdown.classList.remove('fly-in-dropdown-hover');
+            }
+        });
+    }
+}

package/addon/modifiers/did-insert.js

@@ -0,0 +1,7 @@
+import { modifier } from 'ember-modifier';
+
+export default modifier(function didInsert(element, [callback]) {
+  if (typeof callback === 'function') {
+    callback(element);
+  }
+});

package/addon/styles/addon.css

@@ -1,3 +1,8 @@
+@import './dropdown.css';
+@import './fly-in.css';
+@import './navbar.css';
+@import './player-card.css';
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -17,333 +22,6 @@
   height: fit-content;
 }
 
-.dropdown-option {
-  border-bottom-style: solid;
-  border-width: 2px;
-  width: 100%;
-  padding-left: 8px;
-  padding-right: 8px;
-  padding-top: 6px;
-  padding-bottom: 6px;
-  box-sizing: border-box;
-  cursor: pointer;
-}
-
-.dropdown-option:hover {
-  background-color: black;
-  color: white;
-  border: black;
-}
-
-.dropdown-options {
-  white-space: normal;
-  max-height: 0;
-  overflow-wrap: break-word;
-  border-style: solid;
-  border-top-style: none;
-  border-bottom-style: none;
-  border-width: 2px;
-  background-color: #f6f6f6;
-  transform: scaleY(0);
-  transform-origin: top;
-  transition: opacity 0.2s ease, transform 0.2s ease;
-  opacity: 0;
-}
-
-.dropdown-options.display {
-  opacity: 1;
-  max-height: 500px;
-  transform: scaleY(1);
-}
-
-.dropdown-placeholder {
-  font-style: italic;
-  color: #444;
-}
-
-.dropdown-select {
-  width: 100%;
-  padding-left: 8px;
-  padding-top: 8px;
-  padding-bottom: 8px;
-  padding-right: 20px;
-  box-sizing: border-box;
-  position: relative;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  cursor: pointer;
-  border-style: solid;
-  border-width: 2px;
-  background-color: #eee;
-  user-select: none;
-}
-
-.dropdown-select::after {
-  content: '\25BC';
-  display: block;
-  position: absolute;
-  right: 0px;
-  top: 50%;
-  right: 8px;
-  pointer-events: none;
-  transition: transform 0.3s ease;
-  top: 25%;
-}
-
-.dropdown-select.open::after {
-  transform: rotate(-180deg);
-  transform-origin: center;
-  padding-right: 0px;
-}
-
-.dropdown-wrapper {
-  width: 100%;
-}
-
-.header-dropdown-options {
-  white-space: normal;
-  overflow-wrap: break-word;
-  border-style: solid;
-  border-top-style: none;
-  border-bottom-style: none;
-  border-width: 2px;
-  background-color: #f6f6f6;
-  max-height: 0;
-  opacity: 0;
-  transform: scaleY(0);
-  transform-origin: top;
-  transition: opacity 0.2s ease, transform 0.2s ease;
-}
-
-.header-dropdown-options.open {
-  border-top-style: solid;
-  opacity: 1;
-  max-height: 500px;
-  transform: scaleY(1);
-}
-
-.header-dropdown-select {
-  width: fit-content;
-  max-width: 100%;
-  padding-top: 8px;
-  padding-bottom: 2px;
-  padding-right: 25px;
-  box-sizing: border-box;
-  position: relative;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  cursor: pointer;
-  border-bottom-style: solid;
-  border-width: 2px;
-  user-select: none;
-}
-
-.header-dropdown-select.open {
-  border-bottom-style: none;
-}
-
-.header-dropdown-select::after {
-  content: '\25BE';
-  display: block;
-  position: absolute;
-  right: 0px;
-  top: 20%;
-  pointer-events: none;
-  transition: transform 0.3s ease;
-  font-size: 1.5rem;
-}
-
-.header-dropdown-select.open::after {
-  transform: rotate(-180deg);
-  transform-origin: center;
-  padding-right: 0px;
-  top: 16%;
-}
-
-.header-dropdown-selected {
-  font-weight: bold;
-}
-
-.header-dropdown-wrapper {
-  width: 100%;
-}
-
-.navbar-body {
-  flex: 1 1 auto;
-  padding: 0 1em;
-}
-
-.navbar-container {
-  background-color: #eee;
-  position: sticky;
-  top: 0;
-  left: 0;
-  min-height: 5vh;
-  height: fit-content;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  z-index: 10;
-  padding: 0 1em;
-}
-
-.navbar-dropdown .header-dropdown-options {
-  position: absolute;
-  min-width: 60px !important;
-}
-
-.navbar-dropdown .header-dropdown-select {
-  padding-top: 0px;
-  border-bottom-style: none;
-}
-
-.navbar-dropdown .header-dropdown-select::after {
-  top: 0;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  padding-top: 2px;
-}
-
-.navbar-dropdown .header-dropdown-selected {
-  font-weight: normal;
-}
-
-.navbar-elements {
-  display: flex;
-  flex-wrap: wrap;
-  width: fit-content;
-}
-
-.navbar-selection {
-  padding: 8px;
-  display: flex;
-  align-items: center;
-  position: relative;
-}
-
-.navbar-selection::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  transform: scaleY(0);
-  background-color: #cccccc;
-  z-index: -1;
-  transition: transform 0.3s ease;
-  transform-origin: bottom;
-}
-
-.navbar-selection:hover::before {
-  height: 100%;
-  transform: scaleY(1);
-}
-
-.navbar-title {
-  font-size: clamp(20px, 3vw, 30px);
-  margin-right: 1em;
-  width: fit-content;
-  white-space: nowrap;
-  font-weight: bold;
-}
-
-.navbar-wrapper {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-}
-
-.navbar-yield {
-  display: flex;
-  justify-content: center;
-  flex: 1 1 auto;
-  padding-top: 8px;
-}
-
-.player-card {
-  display: flex;
-  flex-direction: row;
-  padding: 0.5em;
-  font-size: 1em;
-  background-color: #f6f6f6;
-  border: solid;
-}
-
-.player-name {
-  width: 40%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.player-pic {
-  width: 30%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.player-points {
-  font-size: 0.8em;
-}
-
-.player-pos {
-  width: 10%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.player-text {
-  text-align: center;
-}
-
-.player-trophy {
-  width: 20%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-}
-
-.has-trophy::after {
-  content: '\00D7'var(--trophy-count);
-  color: Blue;
-  font-weight: 900;
-  font-size: 1.3em;
-  position: absolute;
-  left: 50%;
-  top: 30%;
-  transform: translate(-50%, -60%);
-  pointer-events: none;
-  text-shadow: 1px 1px 2px #0002;
-}
-
-.player-pic img,
-.player-trophy img {
-  width: 100%;
-  height: auto;
-  display: block;
-  object-fit: contain;
-}
-
-.player-pic img {
-  border-radius: 50%;
-}
-
-.player-wrapper {
-  container-type: inline-size;
-  width: 100%;
-}
-
 .radio-label {
   font-weight: bold;
 }
@@ -353,34 +31,3 @@
   flex-direction: column;
   margin: 5px 0px 5px 0px;
 }
-
-@container (min-width: 100px) {
-  .player-card {
-    font-size: 0.6rem;
-  }
-}
-@container (min-width: 200px) {
-  .player-card {
-    font-size: 0.8rem;
-  }
-}
-@container (min-width: 300px) {
-  .player-card {
-    font-size: 1rem;
-  }
-}
-@container (min-width: 400px) {
-  .player-card {
-    font-size: 1.4rem;
-  }
-}
-@container (min-width: 500px) {
-  .player-card {
-    font-size: 1.5rem;
-  }
-}
-@container (min-width: 600px) {
-  .player-card {
-    font-size: 2rem;
-  }
-}

package/addon/styles/dropdown.css

@@ -0,0 +1,162 @@
+.dropdown-option {
+  border-bottom-style: solid;
+  border-width: 2px;
+  width: 100%;
+  padding-left: 8px;
+  padding-right: 8px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+
+.dropdown-option:hover {
+  background-color: black;
+  color: white;
+  border: black;
+}
+
+.dropdown-options {
+  white-space: normal;
+  max-height: 0;
+  overflow-wrap: break-word;
+  border-style: solid;
+  border-top-style: none;
+  border-bottom-style: none;
+  border-width: 2px;
+  background-color: #f6f6f6;
+  transform: scaleY(0);
+  transform-origin: top;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  opacity: 0;
+  position: absolute;
+  z-index: 1;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.dropdown-options.display {
+  opacity: 1;
+  max-height: 500px;
+  transform: scaleY(1);
+}
+
+.dropdown-placeholder {
+  font-style: italic;
+  color: #444;
+}
+
+.dropdown-select {
+  width: 100%;
+  padding-left: 8px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  padding-right: 20px;
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  border-style: solid;
+  border-width: 2px;
+  background-color: #eee;
+  user-select: none;
+}
+
+.dropdown-select::after {
+  content: '\25BC';
+  display: block;
+  position: absolute;
+  right: 0px;
+  top: 50%;
+  right: 8px;
+  pointer-events: none;
+  transition: transform 0.3s ease;
+  top: 25%;
+}
+
+.dropdown-select.open::after {
+  transform: rotate(-180deg);
+  transform-origin: center;
+  padding-right: 0px;
+}
+
+.dropdown-wrapper {
+  width: 100%;
+  position: relative;
+}
+
+.header-dropdown-options {
+  white-space: normal;
+  overflow-wrap: break-word;
+  border-style: solid;
+  border-top-style: none;
+  border-bottom-style: none;
+  border-width: 2px;
+  background-color: #f6f6f6;
+  max-height: 0;
+  opacity: 0;
+  transform: scaleY(0);
+  transform-origin: top;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  position: absolute;
+  z-index: 1;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.header-dropdown-options.open {
+  border-top-style: solid;
+  opacity: 1;
+  max-height: 500px;
+  transform: scaleY(1);
+}
+
+.header-dropdown-select {
+  width: fit-content;
+  max-width: 100%;
+  padding-top: 8px;
+  padding-bottom: 2px;
+  padding-right: 25px;
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  border-bottom-style: solid;
+  border-width: 2px;
+  user-select: none;
+}
+
+.header-dropdown-select.open {
+  border-bottom-style: none;
+}
+
+.header-dropdown-select::after {
+  content: '\25BE';
+  display: block;
+  position: absolute;
+  right: 0px;
+  top: 11%;
+  pointer-events: none;
+  transition: transform 0.3s ease;
+  font-size: 1.3rem;
+}
+
+.header-dropdown-select.open::after {
+  transform: rotate(-180deg);
+  transform-origin: center;
+  padding-right: 0px;
+  top: 16%;
+}
+
+.header-dropdown-selected {
+  font-weight: bold;
+}
+
+.header-dropdown-wrapper {
+  width: 100%;
+  position: relative;
+}

package/addon/styles/fly-in.css

@@ -0,0 +1,76 @@
+.fly-in-container {
+  height: inherit;
+}
+
+.fly-in-dropdown {
+  background-color: #d6d6d6;
+  border-bottom-left-radius: 10px;
+  border: solid;
+  border-right: none;
+  border-width: 2px;
+  padding: 10px;
+  z-index: 2;
+  opacity: 0;
+  max-height: 0;
+  right: 0%;
+  display: none;
+}
+
+.fly-in-dropdown-hover {
+  opacity: 1;
+  max-height: 500px;
+  max-width: 500px;
+}
+
+.fly-in-icon {
+  align-self: center;
+  padding: 0.5em;
+  height: 50% !important;
+  width: auto !important;
+}
+
+.fly-in-image {
+  height: inherit;
+  padding: 0.5em;
+  box-sizing: border-box;
+  border-top-left-radius: 38%;
+  border-bottom-left-radius: 38%;
+  border-bottom-right-radius: 38%;
+  background-color: #e6e6e6;
+  position: relative;
+}
+
+.fly-in-preview {
+  height: inherit;
+  display: flex;
+  justify-self: start;
+  position: relative;
+  right: 43px;
+  margin-right: -43px;
+}
+
+.fly-in-title {
+  opacity: 0;
+  max-height: 0;
+  position: absolute;
+  top: 20%;
+  overflow: hidden;
+  transition: opacity 0.3s ease, max-height 0.3s ease;
+}
+
+.fly-in-wrapper:hover .fly-in-title {
+  opacity: 1;
+  max-height: 500px;
+}
+
+.fly-in-wrapper {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  background-color: #d6d6d6;
+  right: 0%;
+  height: 10vh;
+  transition: width 0.3s ease;
+  min-width: 131px;
+  transition: min-width 0.3s ease;
+}

package/addon/styles/navbar.css

@@ -0,0 +1,89 @@
+.navbar-body {
+  flex: 1 1 auto;
+  padding: 0 1em;
+}
+
+.navbar-container {
+  background-color: #eee;
+  position: sticky;
+  top: 0;
+  left: 0;
+  min-height: 5vh;
+  height: fit-content;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  z-index: 10;
+  padding: 0 1em;
+}
+
+.navbar-dropdown .header-dropdown-options {
+  position: absolute;
+  min-width: 60px !important;
+}
+
+.navbar-dropdown .header-dropdown-select {
+  padding-top: 0px;
+  border-bottom-style: none;
+}
+
+.navbar-dropdown .header-dropdown-select::after {
+  top: -3px;
+}
+
+.navbar-dropdown .header-dropdown-selected {
+  font-weight: normal;
+}
+
+.navbar-elements {
+  display: flex;
+  flex-wrap: wrap;
+  width: fit-content;
+}
+
+.navbar-selection {
+  padding: 8px;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.navbar-selection::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform: scaleY(0);
+  background-color: #cccccc;
+  z-index: -1;
+  transition: transform 0.3s ease;
+  transform-origin: bottom;
+}
+
+.navbar-selection:hover::before {
+  height: 100%;
+  transform: scaleY(1);
+}
+
+.navbar-title {
+  font-size: clamp(20px, 3vw, 30px);
+  margin-right: 1em;
+  width: fit-content;
+  white-space: nowrap;
+  font-weight: bold;
+}
+
+.navbar-wrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.navbar-yield {
+  display: flex;
+  justify-content: center;
+  flex: 1 1 auto;
+  padding-top: 8px;
+}

package/addon/styles/player-card.css

@@ -0,0 +1,110 @@
+.player-card {
+  display: flex;
+  flex-direction: row;
+  padding: 0.5em;
+  font-size: 1em;
+  background-color: #f6f6f6;
+  border: solid;
+}
+
+.player-name {
+  width: 40%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.player-pic {
+  width: 30%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.player-points {
+  font-size: 0.8em;
+}
+
+.player-pos {
+  width: 10%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.player-text {
+  text-align: center;
+}
+
+.player-trophy {
+  width: 20%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+.has-trophy::after {
+  content: '\00D7'var(--trophy-count);
+  color: Blue;
+  font-weight: 900;
+  font-size: 1.3em;
+  position: absolute;
+  left: 50%;
+  top: 30%;
+  transform: translate(-50%, -60%);
+  pointer-events: none;
+  text-shadow: 1px 1px 2px #0002;
+}
+
+.player-pic img,
+.player-trophy img {
+  width: 100%;
+  height: auto;
+  display: block;
+  object-fit: contain;
+}
+
+.player-pic img {
+  border-radius: 50%;
+}
+
+.player-wrapper {
+  container-type: inline-size;
+  width: 100%;
+}
+
+@container (min-width: 100px) {
+  .player-card {
+    font-size: 0.6rem;
+  }
+}
+@container (min-width: 200px) {
+  .player-card {
+    font-size: 0.8rem;
+  }
+}
+@container (min-width: 300px) {
+  .player-card {
+    font-size: 1rem;
+  }
+}
+@container (min-width: 400px) {
+  .player-card {
+    font-size: 1.4rem;
+  }
+}
+@container (min-width: 500px) {
+  .player-card {
+    font-size: 1.5rem;
+  }
+}
+@container (min-width: 600px) {
+  .player-card {
+    font-size: 2rem;
+  }
+}

package/app/components/fly-in.js

@@ -0,0 +1 @@
+export { default } from 'dlg-ui/components/fly-in';

package/app/modifiers/did-insert.js

@@ -0,0 +1 @@
+export { default } from 'dlg-ui/modifiers/did-insert';

package/config/environment.js

@@ -1,5 +1,7 @@
 'use strict';
 
 module.exports = function (/* environment, appConfig */) {
-  return {};
+  return {
+    modulePrefix: 'dlg-ui',
+  };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dlg-ui",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "description": "The default blueprint for ember-cli addons.",
   "keywords": [
     "ember-addon"
@@ -26,34 +26,39 @@
     "test:ember-compatibility": "ember try:each"
   },
   "dependencies": {
-    "ember-cli-babel": "^7.26.11",
-    "ember-cli-htmlbars": "^6.1.1"
+    "@ember/string": "^3.1.1",
+    "ember-cli-babel": "^8.2.0",
+    "ember-cli-htmlbars": "^6.3.0"
+  },
+  "peerDependencies": {
+    "ember-source": "^4.8.0 || ^5.0.0 || ^6.0.0"
   },
   "devDependencies": {
     "@ember/optional-features": "^2.0.0",
-    "@ember/render-modifiers": "^2.1.0",
+    "@ember/render-modifiers": "^3.0.0",
     "@ember/test-helpers": "^2.8.1",
     "@embroider/test-setup": "^1.8.3",
+    "@fortawesome/ember-fontawesome": "^3.1.0",
+    "@fortawesome/fontawesome-svg-core": "^7.1.0",
+    "@fortawesome/free-solid-svg-icons": "^7.1.0",
     "@glimmer/component": "^1.1.2",
-    "@glimmer/tracking": "^1.1.2",
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",
     "ember-auto-import": "^2.4.3",
-    "ember-cli": "~4.8.1",
+    "ember-cli": "~4.12.0",
     "ember-cli-dependency-checker": "^3.3.1",
     "ember-cli-inject-live-reload": "^2.1.0",
     "ember-cli-sri": "^2.1.1",
     "ember-cli-terser": "^4.0.2",
-    "ember-disable-prototype-extensions": "^1.1.3",
     "ember-load-initializers": "^2.1.2",
-    "ember-page-title": "^7.0.0",
+    "ember-modifier": "^4.2.2",
+    "ember-page-title": "^9.0.3",
     "ember-qunit": "^6.0.0",
-    "ember-resolver": "^8.0.3",
-    "ember-source": "~4.8.0",
+    "ember-resolver": "^10.0.0",
+    "ember-source": "~5.4.0",
     "ember-source-channel-url": "^3.0.0",
     "ember-template-lint": "^4.16.1",
     "ember-truth-helpers": "^4.0.3",
-    "ember-try": "^2.0.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-ember": "^11.1.0",
@@ -64,7 +69,7 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^2.7.1",
     "qunit": "^2.19.2",
-    "qunit-dom": "^2.0.0",
+    "qunit-dom": "^3.5.0",
     "webpack": "^5.74.0"
   },
   "engines": {