Created
November 23, 2020 18:11
-
-
Save mattduffield/8aa669ac53fac72b4904920ca2f5bf5c to your computer and use it in GitHub Desktop.
Aurelia V2 Multiple select
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Dumber Gist</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"> | |
| <base href="/"> | |
| </head> | |
| <!-- | |
| Dumber Gist uses dumber bundler, the default bundle file | |
| is /dist/entry-bundle.js. | |
| The starting module is pointed to "main" (data-main attribute on script) | |
| which is your src/main.js. | |
| --> | |
| <body> | |
| <my-app></my-app> | |
| <script src="/dist/entry-bundle.js" data-main="main"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "dependencies": { | |
| "aurelia": "dev" | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Aurelia from 'aurelia'; | |
| import { MyApp } from './my-app'; | |
| Aurelia.app(MyApp).start(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :root { | |
| --input: #4c97ff; | |
| --action: #bd42bd; | |
| --wait: #ffab19; | |
| --nav: #40bf4a; | |
| --screen: #ffbf00; | |
| --noop: #ff4d6a; | |
| --group: #5cb1d6; | |
| --loop: #5cb1d6; | |
| --condition: #ffab19; | |
| --function: #96f; | |
| --instrument: #ff6680; | |
| --alert: #D64545; | |
| } | |
| main { | |
| display: grid; | |
| grid-template-columns: 485px auto 485px; | |
| grid-template-rows: 1fr; | |
| height: calc(100% - 75px); | |
| overflow-y: auto; | |
| padding: 0 10px; | |
| } | |
| article { | |
| background-color: var(--secondary-color); | |
| } | |
| aside { | |
| background-color: darkgray; | |
| } | |
| section { | |
| position: relative; | |
| overflow-y: auto; | |
| display: grid; | |
| grid-template-columns: auto; | |
| grid-template-rows: 50px auto; | |
| grid-template-areas: | |
| "header" | |
| "content"; | |
| margin-right: 20px; | |
| } | |
| .tools { | |
| display: flex; | |
| flex-flow: row wrap; | |
| padding: 20px; | |
| list-style: none; | |
| } | |
| .tools .tool-item { | |
| border: 1px solid var(--primary-color); | |
| border-radius: 10px; | |
| padding: 10px; | |
| margin: 10px; | |
| height: 125px; | |
| width: 200px; | |
| color: white; | |
| opacity: 0.8; | |
| transition: all .2s ease-in-out; | |
| } | |
| .tool-item:hover { | |
| opacity: 1; | |
| transform: scale(1.05); | |
| cursor: pointer; | |
| } | |
| .tool-item .container { | |
| display: grid; | |
| grid-template-rows: 35px auto; | |
| height: 100%; | |
| width: 100%; | |
| } | |
| .tool-item .container .tool-header { | |
| align-self: center; | |
| justify-self: center; | |
| font-size: 20px; | |
| } | |
| .tool-item .container .tool-body { | |
| align-self: center; | |
| justify-self: center; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <main> | |
| <article> | |
| <div class="tools"> | |
| <div repeat.for="item of tools" | |
| class="tool-item ${item.name.toLowerCase().includes(toolSearch.toLowerCase()) ? '' : 'hidden'}" | |
| style="background-color: var(--${item.bgColor});" | |
| draggable="true" | |
| dragstart.trigger="onDrag($event, item)"> | |
| <div class="container"> | |
| <div class="tool-header">${item.name}</div> | |
| <div class="tool-body"> | |
| <i class="${item.icon} fa-2x"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </article> | |
| <section drop.trigger="onDrop($event)" dragover.trigger="onDragOver($event)"> | |
| <div repeat.for="step of steps" | |
| class="canvas-container"> | |
| </div> | |
| </section> | |
| <aside> | |
| </aside> | |
| </main> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export class MyApp { | |
| message = 'Hello Aurelia 2!'; | |
| tools = []; | |
| steps = []; | |
| constructor() { | |
| this.configureTools(); | |
| } | |
| configureTools() { | |
| this.tools = [ | |
| {name: 'check', description: '', bgColor: 'input', icon: 'fas fa-check-square'}, | |
| {name: 'click', description: '', bgColor: 'action', icon: 'fas fa-mouse'}, | |
| {name: 'goto', description: 'Goto step', bgColor: 'nav', icon: 'fab fa-chrome'}, | |
| {name: 'select', description: '', bgColor: 'input', icon: 'fas fa-caret-circle-down'}, | |
| {name: 'type', description: '', bgColor: 'input', icon: 'fas fa-text'}, | |
| {name: 'waitForSelector', description: '', bgColor: 'wait', icon: 'far fa-hourglass'}, | |
| {name: 'waitForTimeout', description: '', bgColor: 'wait', icon: 'far fa-hourglass'} | |
| ]; | |
| } | |
| onDrag(e, item) { | |
| e.dataTransfer.setData('text', item.name); | |
| console.log('onDrag - item.name', item.name); | |
| return true; | |
| } | |
| onDrop(e) { | |
| //e.preventDefault(); | |
| const data = e.dataTransfer.getData('text'); | |
| this.steps.push({name: data}); | |
| console.log('onDrop - data', data); | |
| } | |
| onDragOver(e) { | |
| //e.preventDefault(); | |
| console.log('onDragOver'); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment