less.js implemented, abstraction for device interfaces missing
This commit is contained in:
bastianwegge
parent
613f382363
commit
9a9f659e11
|
|
@ -0,0 +1,90 @@
|
|||
/* global classes */
|
||||
.center {
|
||||
text-align:center;
|
||||
}
|
||||
.cb {
|
||||
clear:both;
|
||||
}
|
||||
|
||||
/* basic layout */
|
||||
header {
|
||||
width: 600px;
|
||||
margin: 20px auto 0;
|
||||
padding:10px 0 0 0;
|
||||
|
||||
background-color:#aaa;
|
||||
|
||||
border-radius: 5px;
|
||||
border: 2px solid #000;
|
||||
|
||||
position:relative;
|
||||
z-index:1;
|
||||
}
|
||||
|
||||
#content {
|
||||
width:550px;
|
||||
margin: -10px auto;
|
||||
padding: 20px 5px 5px 5px;
|
||||
|
||||
background-color: #ddd;
|
||||
border-radius: 5px;
|
||||
border: 2px solid #000;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.4em;
|
||||
a { text-decoration:none; color:#000; }
|
||||
}
|
||||
|
||||
nav {
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
float:left;
|
||||
width:100px;
|
||||
height:80px;
|
||||
border: 1px solid #fff;
|
||||
margin: 9px;
|
||||
text-align:center;
|
||||
|
||||
/*temp*/
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
nav ul li a {
|
||||
display:block;
|
||||
height: 80px;
|
||||
text-decoration:none;
|
||||
color: #fff;
|
||||
line-height:80px;
|
||||
}
|
||||
|
||||
nav ul li a:hover { background-color:#777; }
|
||||
|
||||
.room
|
||||
{
|
||||
position:relative;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.room#room1 { background:url(../img/room1.png) no-repeat center; }
|
||||
.room#room2 { background:url(../img/room2.png) no-repeat center; }
|
||||
.room#room3 { background:url(../img/room3.png) no-repeat center; }
|
||||
.room#room4 { background:url(../img/room4.png) no-repeat center; }
|
||||
.room#room5 { background:url(../img/room5.png) no-repeat center; }
|
||||
|
||||
.device
|
||||
{
|
||||
position:absolute;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.on
|
||||
{
|
||||
background-color:Green;
|
||||
}
|
||||
|
||||
.off
|
||||
{
|
||||
background-color:Red;
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
|
||||
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
|
||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
34
index.html
34
index.html
|
|
@ -3,22 +3,44 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Bunti backbone prototype</title>
|
||||
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" charset="utf-8">
|
||||
<link rel="stylesheet/less" type="text/css" href="css/core.less">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="sitewrap">
|
||||
<header>
|
||||
<h1 class="center"><a href="">bunti v2</a></h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#/room/1">Room 1</a></li>
|
||||
<li><a href="#/room/2">Room 2</a></li>
|
||||
<li><a href="#/room/3">Room 3</a></li>
|
||||
<li><a href="#/room/4">Room 4</a></li>
|
||||
<li><a href="#/room/5">Room 5</a></li>
|
||||
</ul>
|
||||
<div class="cb"></div>
|
||||
</nav>
|
||||
</header>
|
||||
<div id="content">
|
||||
|
||||
</div>
|
||||
<script src="js/libs/jquery.js"></script>
|
||||
<script src="js/libs/underscore.js"></script>
|
||||
<script src="js/libs/backbone.js"></script>
|
||||
<script src="js/libs/handlebars.js"></script>
|
||||
</div>
|
||||
<script src="js/libs/jquery.js"></script> <!-- 1.7.2 -->
|
||||
<script src="js/libs/underscore.js"></script> <!-- 1.3.3 -->
|
||||
<script src="js/libs/backbone.js"></script> <!-- 1.9.2 -->
|
||||
<script src="js/libs/handlebars.js"></script> <!-- 1.0.beta.6 -->
|
||||
<script src="js/libs/less.js"></script> <!-- 1.3.0 -->
|
||||
|
||||
<!-- Application core (Order matters) -->
|
||||
<script src="js/app.js"></script>
|
||||
|
||||
<!-- Modules (Order does not matter) -->
|
||||
<script src="js/modules/router.js"></script>
|
||||
<script src="js/modules/dashboard.js"></script>
|
||||
<script src="js/modules/util.js"></script>
|
||||
<script src="js/modules/room.js"></script>
|
||||
<script src="js/modules/devices/device.js"></script>
|
||||
<script src="js/modules/devices/position.js"></script>
|
||||
<script src="js/modules/devices/option.js"></script>
|
||||
<script src="js/modules/devices/switch.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
40
js/app.js
40
js/app.js
|
|
@ -12,22 +12,14 @@
|
|||
} ()
|
||||
};
|
||||
|
||||
jQuery(function ($) {
|
||||
// load the modules
|
||||
app.room = app.module('room');
|
||||
app.control = app.module('control');
|
||||
app.option = app.module('option');
|
||||
app.util = app.module('util');
|
||||
|
||||
// load the data -- dummy -- struts/node backend
|
||||
var model = {
|
||||
var dataModel = {
|
||||
rooms: [
|
||||
{
|
||||
roomId: 1,
|
||||
title: "Raum 1",
|
||||
controls: [
|
||||
{ controlId: 1, type: "switch", options: [{ status: "off"}] },
|
||||
{ controlId: 2, type: "switch", options: [{ status: "on"}] },
|
||||
devices: [
|
||||
{ deviceId: 1, type: "switch", options: [{ status: "off"}], pos:{x:280} },
|
||||
{ deviceId: 2, type: "switch", options: [{ status: "on"}], pos:{x:500,y:280} },
|
||||
]
|
||||
},
|
||||
{ roomId: 2, title: "Raum 2" },
|
||||
|
|
@ -35,16 +27,20 @@ jQuery(function ($) {
|
|||
{ roomId: 4, title: "Raum 4" },
|
||||
{ roomId: 5, title: "Raum 5" }
|
||||
]
|
||||
};
|
||||
};
|
||||
|
||||
var myTestTemplate = app.util.loadTemplate('js/templates/test.handlebars', function(data) {
|
||||
source = data;
|
||||
template = Handlebars.compile(source);
|
||||
//$('#target').html(template(jsondata));
|
||||
$('#content').append(template(model));
|
||||
jQuery(function ($) {
|
||||
// load the modules
|
||||
app.util = app.module('util');
|
||||
app.util.preloadTemplates(['room','switch'], function () {
|
||||
app.router = app.module('router');
|
||||
app.Router = new app.router.Router();
|
||||
Backbone.history.start();
|
||||
});
|
||||
|
||||
// create the model
|
||||
dashboard = new app.room.List(model.rooms);
|
||||
|
||||
});
|
||||
//app.room = app.module('room');
|
||||
//app.option = app.module('option');
|
||||
|
||||
//// create the model
|
||||
//dashboard = new app.room.View({ model: dataModel });
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,48 @@
|
|||
// js/modules/dashboard.js
|
||||
// Module reference argument, assigned at the bottom
|
||||
|
||||
(function (Dashboard) {
|
||||
|
||||
// Dependencies
|
||||
var Util = app.module("util");
|
||||
var Room = app.module("room");
|
||||
|
||||
Dashboard.Model = Backbone.Model.extend({
|
||||
defaults: {
|
||||
rooms: Room.List
|
||||
}
|
||||
});
|
||||
|
||||
Dashboard.View = Backbone.View.extend({
|
||||
el: $('#content'),
|
||||
initialize: function () {
|
||||
// load the data -- dummy -- struts/node backend
|
||||
this.rooms = new Room.List(dataModel.rooms);
|
||||
},
|
||||
render: function () {
|
||||
this.$el.html('');
|
||||
_.each(this.rooms.models, function (room) {
|
||||
this.renderRoom(room);
|
||||
}, this);
|
||||
return this;
|
||||
},
|
||||
renderRoom: function (room) {
|
||||
var roomView = new Room.View({
|
||||
model: room
|
||||
});
|
||||
this.$el.append(roomView.render().el);
|
||||
},
|
||||
renderRoomWithId: function (roomId) {
|
||||
this.$el.html('');
|
||||
_.each(this.rooms.models, function (room) {
|
||||
if (room.get('roomId') == roomId) {
|
||||
this.renderRoom(room);
|
||||
}
|
||||
}, this);
|
||||
}
|
||||
});
|
||||
|
||||
})(app.module("dashboard"));
|
||||
|
||||
|
||||
|
||||
|
|
@ -2,24 +2,51 @@
|
|||
// Module reference argument, assigned at the bottom
|
||||
// every device gets its model from the base and is rendered into seperate viewbases
|
||||
|
||||
(function (Control) {
|
||||
(function (Device) {
|
||||
|
||||
// Dependencies
|
||||
var Position = app.module("position");
|
||||
var Option = app.module("option");
|
||||
var Util = app.module("util");
|
||||
|
||||
Device.Model = Backbone.Model.extend({
|
||||
defaults: {
|
||||
options: Option.List
|
||||
},
|
||||
initialize: function () {
|
||||
|
||||
deviceId: 0,
|
||||
options: Option.List,
|
||||
pos: Position.Model,
|
||||
type: ''
|
||||
}
|
||||
});
|
||||
|
||||
Device.List = Backbone.Collections.extend({
|
||||
model: Control.Model
|
||||
Device.List = Backbone.Collection.extend({
|
||||
model: Device.Model
|
||||
});
|
||||
|
||||
})(app.module("control"));
|
||||
Device.View = Backbone.View.extend({
|
||||
initialize: function () {
|
||||
this.$el.addClass('device');
|
||||
|
||||
this.options = new Option.List(this.model.get('options'));
|
||||
this.pos = new Position.Model(this.model.get('pos'));
|
||||
this.type = this.model.get('type');
|
||||
|
||||
this.template = Handlebars.compile(Util.getTemplate(this.type));
|
||||
},
|
||||
render: function () {
|
||||
this.$el.attr('style', 'left:' + this.pos.get('x') + 'px;top:' + this.pos.get('y') + 'px');
|
||||
this.$el.html(this.template(this.model.toJSON()));
|
||||
return this;
|
||||
},
|
||||
events: {
|
||||
"click .switch": "toggleSwitch"
|
||||
},
|
||||
toggleSwitch: function () {
|
||||
var status = this.model.get('options')[0].status;
|
||||
status = (status == "off" ? "on" : "off");
|
||||
this.model.get('options')[0].status = status;
|
||||
this.model.trigger("change:options");
|
||||
this.render();
|
||||
}
|
||||
});
|
||||
|
||||
})(app.module("device"));
|
||||
|
|
@ -3,12 +3,17 @@
|
|||
|
||||
(function (Option) {
|
||||
Option.Model = Backbone.Model.extend({
|
||||
status: ''
|
||||
});
|
||||
|
||||
Option.List = Backbone.Collections.extend({
|
||||
Option.List = Backbone.Collection.extend({
|
||||
model: Option.Model
|
||||
});
|
||||
|
||||
Option.View = Backbone.View.extend({
|
||||
|
||||
});
|
||||
|
||||
})(app.module("option"));
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
(function (Position) {
|
||||
|
||||
Position.Model = Backbone.Model.extend({
|
||||
defaults: {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
});
|
||||
|
||||
})(app.module("position"));
|
||||
|
|
@ -2,7 +2,23 @@
|
|||
// Module reference argument, assigned at the bottom
|
||||
|
||||
(function (Switch) {
|
||||
Switch.Model = Backbone.Model.extend({
|
||||
defaults: {
|
||||
status: 'off'
|
||||
}
|
||||
});
|
||||
|
||||
Switch.List = Backbone.Collection.extend({
|
||||
model: Switch.Model
|
||||
});
|
||||
|
||||
Switch.View = Backbone.View.extend({
|
||||
render: function () {
|
||||
this.template = Handlebars.compile(Util.getTemplate('switch'));
|
||||
this.$el.html(this.template(this.model.toJSON()));
|
||||
return this;
|
||||
}
|
||||
});
|
||||
})(app.module("switch"));
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -4,22 +4,41 @@
|
|||
(function (Room) {
|
||||
|
||||
// Dependencies
|
||||
var Control = app.module("control");
|
||||
var Util = app.module("util");
|
||||
var Device = app.module("device");
|
||||
|
||||
// The basic person model
|
||||
Room.Model = Backbone.Model.extend({
|
||||
defaults: {
|
||||
roomId: null,
|
||||
title: 'undefined',
|
||||
controls: Control.List
|
||||
devices: Device.List
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Room.List = Backbone.Collection.extend({
|
||||
model: Room.Model
|
||||
});
|
||||
|
||||
Room.View = Backbone.View.extend({
|
||||
initialize: function () {
|
||||
this.$el.attr('id', 'room' + this.model.get('roomId')).addClass('room');
|
||||
this.template = Handlebars.compile(Util.getTemplate('room'));
|
||||
this.devices = new Device.List(this.model.get('devices'));
|
||||
},
|
||||
render: function () {
|
||||
this.$el.html(this.template(this.model.toJSON()));
|
||||
_.each(this.devices.models, function (device) {
|
||||
this.renderDevice(device);
|
||||
}, this);
|
||||
return this;
|
||||
},
|
||||
renderDevice: function (device) {
|
||||
var deviceView = new Device.View({ model: device });
|
||||
this.$el.append(deviceView.render().el);
|
||||
}
|
||||
});
|
||||
|
||||
})(app.module("room"));
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,30 @@
|
|||
// js/router.js
|
||||
// Module reference argument, assigned at the bottom
|
||||
// every device gets its model from the base and is rendered into seperate viewbases
|
||||
|
||||
(function (Router) {
|
||||
|
||||
var Dashboard = app.module("dashboard");
|
||||
|
||||
Router.Router = Backbone.Router.extend({
|
||||
routes: {
|
||||
"room/:id": "roomDetails",
|
||||
"": "home"
|
||||
},
|
||||
|
||||
initialize: function () {
|
||||
if (!this.dashboard) {
|
||||
this.dashboard = new Dashboard.View();
|
||||
}
|
||||
},
|
||||
|
||||
home: function () {
|
||||
$('#content').html('');
|
||||
//this.dashboard.render();
|
||||
},
|
||||
|
||||
roomDetails: function (roomId) {
|
||||
this.dashboard.renderRoomWithId(roomId);
|
||||
}
|
||||
});
|
||||
})(app.module("router"));
|
||||
|
|
@ -3,13 +3,29 @@
|
|||
|
||||
(function (Util) {
|
||||
|
||||
Util.loadTemplateAjax = function(path, callback) {
|
||||
$.ajax({
|
||||
url: path, //ex. js/templates/mytemplate.handlebars
|
||||
cache: true,
|
||||
success: callback
|
||||
// cache
|
||||
Util.templates = {};
|
||||
|
||||
Util.preloadTemplates = function (names, callback) {
|
||||
var loadTemplate = function (index) {
|
||||
var name = names[index];
|
||||
$.get('js/templates/' + name + '.handlebars', function (data) {
|
||||
Util.templates[name] = data;
|
||||
index++;
|
||||
if (index < names.length) {
|
||||
loadTemplate(index);
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
});
|
||||
}
|
||||
loadTemplate(0);
|
||||
}
|
||||
|
||||
|
||||
Util.getTemplate = function (name) {
|
||||
return Util.templates[name];
|
||||
}
|
||||
|
||||
})(app.module("util"));
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
{{roomId}}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<div class="switch {{#options}}{{status}}{{/options}}" style="width:20px;height:20px">
|
||||
{{#options}}{{status}}{{/options}}
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<configuration>
|
||||
<system.webServer>
|
||||
<staticContent>
|
||||
<mimeMap fileExtension=".handlebars" mimeType="text/x-handlebars-template" />
|
||||
<mimeMap fileExtension=".less" mimeType="text/css" />
|
||||
</staticContent>
|
||||
</system.webServer>
|
||||
</configuration>
|
||||
Loading…
Reference in New Issue