CanJS Test 2

CanJS experiment 2.

by peter9477

HTML

<script src="https://canjs.com/release/2.3.23/can.jquery.js"></script>
<script src="https://canjs.com/release/2.3.23/can.map.delegate.js"></script>
<div class="header">
    <h1>CanJS Test 2</h1>
</div>

<!-- YOUR CODE HERE -->
<div id="content"></div>

<!-- PUT ANY TEMPLATES YOU NEED HERE -->
<script id="main-template" type="text/mustache">
	<p>Position:
    {{#if count}}
		#{{count}}: {{latitude}}, {{longitude}} <a class="map" href="javascript://">Map</a>
    {{else}}
    	unknown
    {{/if}}
    </p>
    <p>
        <label class="{{#if running}}disabled{{/if}}">Update period</label>
        <select class="period" {{#if running}}disabled{{/if}} {($value)}="period">
            {{#each periods}}
                <option value="{{short}}">{{name}} ({{short}}s)</option>
            {{/each}}
        </select>
    </p>
  	<button class="start">{{#if running}}Stop{{else}}Start{{/if}}</button>
</script>

CSS

.header {
    background: #E1E3E1;
    padding: 10px 0;
    border-bottom: 1px solid #B5B6B5;
    margin-bottom: 15px;
}
h1 {
    font-size: 24px;
    font-weight: bold;
}
h2 {
    font-size: 18px;
    text-decoration: underline;
}
label.disabled { color: grey; }
p { 
    margin: 0.5em 0;
}
#content {
    border: 1px solid red;
    background-color: #feeeee;
    padding: 0.5em;
    margin: 0.5em;
    width: 400px;
}

JavaScript

var model = new can.Map({
    running: false,
    count: 0,
	latitude: 0,
	longitude: 0,
    periods: [
    	{short: 120, name: 'very slow'},
    	{short: 30, name: 'slow'},
    	{short: 10, name: 'medium'},
    	{short: 5, name: 'fast'},
    	{short: 1, name: 'very fast'}
    	],
    period: 10,
	define: {
		period: {
			type: "number"
        }
    }
});

model.delegate('period', 'set', function(ev, vnew) {
	console.log('period now', vnew, typeof vnew);
});

var MyCtrl = can.Control.extend({
    init: function(element, options) {
    	element.html(can.view('main-template', model));
        this.timer = 0;
    },
    update: function() {
        var self = this;
    	model.attr('count', model.attr('count') + 1);
		model.attr('latitude', (43 + Math.random() * 2).toFixed(6));
		model.attr('longitude', (-78 - Math.random() * 2).toFixed(6));
        this.timer = setTimeout(function() { self.update(); }, model.attr('period') * 1000);
    },
    'button.start click': function() {
        var self = this;
        model.attr('running', !model.attr('running'));
        console.log('running now', model.attr('running'), model.attr('period'));
        if (model.attr('running')) {
        	model.attr('latitude', 0);
            model.attr('longitude', 0);
            model.attr('count', 0);
        	this.timer = setTimeout(function() { self.update() }, 1000);
        } else {
            clearTimeout(this.timer);
        }
    },
    'a.map click': function() {
    	console.log('click map');
        var lat = model.attr('latitude'),
        	long = model.attr('longitude'),
        	url = 'https://maps.google.com/maps?q=' 
            	+ lat + ',' + long + '&ll=' + lat + ',' + long + '&z=12';
        window.open(url, '_blank');
    }
});

new MyCtrl('#content');