MuseumActivities

components.albers-square\.js

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class extends Component {
  @tracked pos1 = 0;
  @tracked pos2 = 0;
	@tracked pos3 = 0;
	@tracked pos4 = 0;

	@tracked elementTop = 0;
  @tracked elementLeft  = 0;

	@action
  registerListener(element) {
    element.addEventListener('mousedown', this.handleMouseDown(element));
  }
  
  @action
  handleMouseDown(event, element) {
    event.preventDefault();
    console.log('Hi');
    
    console.log(element);
    
    // get the mouse cursor position at startup:
    this.pos3 = event.clientX;
    this.pos4 = event.clientY;
    
    event.target.onmousemove = this.handleMouseDrag;
    event.target.onmouseup = this.handleMouseUp;
  }

	@action
	handleMouseDrag(event, element) {
    event.preventDefault();
    // calculate the new cursor position:
    this.pos1 = this.pos3 - event.clientX;
    this.pos2 = this.pos4 - event.clientY;
    this.pos3 = event.clientX;
    this.pos4 = event.clientY;
    console.log(event);
    // set the element's new position:
    this.elementTop = (event.target.offsetTop - this.pos2);
    this.elementLeft = (event.target.offsetLeft - this.pos1);
  }

	@action
	handleMouseUp(event) {
    event.target.onmouseup = null;
    event.target.onmousemove = null;
  }
}

controllers.albers\.js

import Controller from '@ember/controller';
import {set} from '@ember/object';

function randomNumber(min, max) {  
    min = Math.ceil(min); 
    max = Math.floor(max); 
    return Math.floor(Math.random() * (max - min + 1)) + min; 
}

export default Controller.extend({
  smallColor: '#e66465',
  mediumColor: '#f6b73c',
  largeColor: '#e66465',
  extraLargeColor: "#f6b73c",
  
  displayText: '',
  
  phrases: [
    'The Circus',
    'Birthday Cake',
    'A Hot Summer Day',
    'Growing',
    'Butterfly Wings',
    'Nothing but Net',
    'A Cold Night',
    'Beach Side',
    'Halloween',
    'Christmas',
    'Work',
    'Sea Breeze',
    'Rain',
    'Night',
    'Day'
  ],
  
  actions: {
    onChangeS(event) {
      set(this, 'smallColor', event.target.value);
    },
    
    onChangeM(event) {
      set(this, 'mediumColor', event.target.value);
    },
    
    onChangeL(event) {
      set(this, 'largeColor', event.target.value);
    },
    
    onChangeXL(event) {
      set(this, 'extraLargeColor', event.target.value);
    },
    
    onClick() {
  		const index = randomNumber(1, this.phrases.length);
      set(this, 'displayText', this.phrases[index - 1]);
		},
  }
});

controllers.application\.js

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';
}

router\.js

import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('albers', { path: '/albers' });
  this.route('personal-treasure-hunt', { path: '/personal-treasure-hunt' });
});

export default Router;

routes.albers\.js

import Route from '@ember/routing/route';

export default Route.extend({
  
});

styles.app\.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.albers-square {
  position: absolute;
 	cursor: move;
}

.albers-square--small {
  z-index: 3;
  height: 100px;
  width: 100px;
}

.albers-square--medium {
  z-index: 2;
  height: 200px;
  width: 200px;
}

.albers-square--large {
  z-index: 1;
  height: 300px;
  width: 300px;
}

.albers-square--extra-large {
  z-index: 0;
  height: 400px;
  width: 400px;
}

.albers-route-dragging-container {
	position: relative;
  margin-top: 100px;
}

templates.albers\.hbs

<button onClick={{action "onClick"}}>Get Phrase</button>
<h1>{{displayText}}</h1>
<div>
   <input 
    	type="color" 
      id="head" 
      name="head"
      value={{smallColor}}
      onChange={{action "onChangeS"}}>
    <label for="head">Small</label>
</div>

<div>
    <input 
    	type="color" 
      id="head" 
      name="head"
      value={{mediumColor}}
      onChange={{action "onChangeM"}}>
    <label for="body">Medium</label>
</div>
<div>
    <input 
    	type="color" 
      id="head" 
      name="head"
      value={{largeColor}}
      onChange={{action "onChangeL"}}>
    <label for="head">Large</label>
</div>

<div>
    <input 
    	type="color" 
      id="body" 
      name="body"
      value={{extraLargeColor}}
      onChange={{action "onChangeXL"}}
      >
    <label for="body">Extra Large</label>
</div>
<div class="albers-route-dragging-container">  
  {{albers-square size="small" color=smallColor}}
  {{albers-square size="medium" color=mediumColor}}
  {{albers-square size="large" color=largeColor}}
  {{albers-square size="extra-large" color=extraLargeColor}}
</div>

templates.application\.hbs

<h1>Welcome to {{this.appName}}</h1>

{{#link-to "albers"}}
	Albers
{{/link-to}}

{{#link-to "personal-treasure-hunt"}}
	Personal Treasure Hunt
{{/link-to}}
<br>
<br>
{{outlet}}
<br>
<br>

templates.components.albers-square\.hbs

<div 
	class="albers-square albers-square--{{@size}}"
  style="background-color: {{@color}}; top: {{elementTop}}px; left: {{elementLeft}}px;"
   {{on "mousedown" this.handleMouseDown}}
   {{on "mouseup" this.handleMouseUp}}
  ></div> 
  

twiddle\.json

{
  "version": "0.17.0",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.17.0",
    "ember-template-compiler": "3.17.0",
    "ember-testing": "3.17.0"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}