Created
November 22, 2020 21:05
-
-
Save mattduffield/ef2bb6a0131e978211896a97796d9311 to your computer and use it in GitHub Desktop.
Aurelia V2 Drag-n-Drop
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