Skip to content
This repository has been archived by the owner on Feb 7, 2022. It is now read-only.

Commit

Permalink
Firstish
Browse files Browse the repository at this point in the history
  • Loading branch information
@jamesgpearce
jamesgpearce committed Sep 6, 2011
1 parent 3eab29c commit 69e84db
Show file tree
Hide file tree
Showing 14 changed files with 376 additions and 1 deletion.
Binary file added .DS_Store
View file
Binary file not shown.
12 changes: 12 additions & 0 deletions .gitmodules
View file
@@ -0,0 +1,12 @@
[submodule "lib/underscore"]
path = lib/underscore
url = https://github.com/documentcloud/underscore.git
[submodule "lib/backbone"]
path = lib/backbone
url = https://github.com/documentcloud/backbone.git
[submodule "lib/Backbone.localStorage"]
path = lib/Backbone.localStorage
url = https://github.com/jeromegn/Backbone.localStorage.git
[submodule "lib/jquery"]
path = lib/jquery
url = https://github.com/jquery/jquery.git
23 changes: 23 additions & 0 deletions index.html
View file
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<title>Wizard JS</title>

<script src="lib/jquery/dist/jquery.js"></script>
<script src="lib/underscore/underscore.js"></script>
<script src="lib/backbone/backbone.js"></script>
<script src="lib/Backbone.localStorage/backbone.localStorage.js"></script>
<script src="lib/foxjs/fox.js"></script>

<script src="src/base.js"></script>
<script src="src/models.js"></script>
<script src="src/collections.js"></script>
<script src="src/views.js"></script>

<script src="packs/pets.js"></script>

<link href="res/style.css" rel="stylesheet"/>

</head>
<body></body>
</html>
1 change: 1 addition & 0 deletions lib/Backbone.localStorage
Submodule Backbone.localStorage added at 160707
1 change: 1 addition & 0 deletions lib/backbone
Submodule backbone added at 78a626
1 change: 0 additions & 1 deletion lib/foxjs
Submodule foxjs deleted from 99c640
1 change: 1 addition & 0 deletions lib/jquery
Submodule jquery added at c2531e
1 change: 1 addition & 0 deletions lib/underscore
Submodule underscore added at 610b34
22 changes: 22 additions & 0 deletions packs/pets.js
View file
@@ -0,0 +1,22 @@
Wizard.packs.pets = {

things: {
Cat: {
defaults: {
name: "A cat"
}
},
Dog: {
defaults: {
name: "A dog",
breed: "A breed"
}
},
Fish: {
defaults: {
name: "A fish"
}
}
}

};
30 changes: 30 additions & 0 deletions res/style.css
View file
@@ -0,0 +1,30 @@
.App {
display: -webkit-box;
-webkit-box-orient: vertical;
height:100%;
}

td {
vertical-align: top;
}

nav {
display: table-cell;
background: #eee;
width: 300px;
}

.selected {
background:#000;
color:#fff;
}

form {
display: table-cell;
background:#ccc;
}


td {
border: 1px solid black
}
6 changes: 6 additions & 0 deletions src/base.js
View file
@@ -0,0 +1,6 @@
var Wizard = {
models: {},
collections: {},
views: {},
packs: {}
};
6 changes: 6 additions & 0 deletions src/collections.js
View file
@@ -0,0 +1,6 @@
Wizard.collections.Things = Backbone.Collection.extend({
model: Wizard.models.Thing,
initialize: function() {
this.localStorage = new Store(this.localStoreName);
}
});
8 changes: 8 additions & 0 deletions src/models.js
View file
@@ -0,0 +1,8 @@
Wizard.models.Thing = Backbone.Model.extend(
{
defaults: {
name: "A thing"
}
},
{modelName: 'thing'}
);
265 changes: 265 additions & 0 deletions src/views.js
View file
@@ -0,0 +1,265 @@
Wizard.views.Base = Backbone.View.extend({
addChildElement: function (element) {
this.el.appendChild(element);
return element;
},
addChildView: function (view) {
view.parentView = this;
if (!this.childViews) {
this.childViews = [];
}
this.childViews.push(view);
this.addChildElement(view.render().el);
return view;
},
removeChildViews: function () {
if (this.childViews) {
_.each(this.childViews, function (childView) {
childView.remove();
});
this.childViews = [];
}
},
remove: function () {
this.el.parentNode.removeChild(this.el);
},
layoutChildViews: function () {
this.addChildElement(Fox.makeLayout.apply(Fox, arguments));
}
});

Wizard.views.ThingFormField = Wizard.views.Base.extend({
tagName: "div",
events: {
"input input": "change"
},
initialize: function (options) {
this.key = options.key;
this.el.className = this.model.constructor.modelName + "Form" + this.key;
this.model.bind('change:' + this.key, this.render, this);
},
change: function () {
var update = {};
update[this.key] = this.el.children[0].value;
this.model.set(update);
},
render: function () {
if(!this.input) {
this.el.innerHTML = this.key + ": ";
this.input = document.createElement('input');
this.input.setAttribute('type', 'text');
this.el.appendChild(this.input);
}
this.input.setAttribute('value', this.model.get(this.key));
return this;
}
});

Wizard.views.ThingForm = Wizard.views.Base.extend({
tagName: "form",
initialize: function () {
this.el.className = this.model.constructor.modelName + 'Form';
this.model.bind('destroy', this.remove, this);
},
render: function () {
this.removeChildViews();
_.each(this.model.attributes, function (value, key) {
this.addChildView(new Wizard.views.ThingFormField({
model: this.model,
key: key
}));
}, this);
return this;
}
});

Wizard.views.AddThing = Wizard.views.Base.extend({
tagName: 'li',
events: {
click: "add"
},
initialize: function () {
this.el.className = 'Add' + this.collection.model.modelName;
},
add: function () {
this.collection.add();
},
render: function () {
this.el.innerHTML = "Add";
return this;
}
});

Wizard.views.ThingItem = Wizard.views.Base.extend({
tagName: "li",
events: {
click: "itemFocus"
},
initialize: function () {
this.el.className = this.model.constructor.modelName + 'Item';
this.model.bind('change', this.render, this);
this.model.bind('destroy', this.remove, this);
},
render: function () {
this.el.innerHTML = this.model.get('name');
return this;
},
itemFocus: function () {
if (!this.selected) {
this.trigger('itemFocus', this);
}
},
select: function () {
if (!this.selected) {
this.el.className += ' selected ';
this.selected = true;
}
},
deselect: function () {
if (this.selected) {
this.el.className = this.el.className.replace(' selected ', '');
this.selected = false;
}
}
});

Wizard.views.ThingsList = Wizard.views.Base.extend({
tagName: "ul",
initialize: function () {
this.el.className = this.collection.model.modelName + 'sList';
this.collection.bind('add', this.addThingItem, this);
},
render: function () {
this.addChildView(new Wizard.views.AddThing({collection:this.collection}));
_.each(this.collection, this.addThingItem, this);
return this;
},
addThingItem: function (thing) {
var thingItem = new Wizard.views.ThingItem({model: thing});
this.addChildView(thingItem);
thingItem.bind('itemFocus', this.itemFocus, this);
return thingItem;
},
itemFocus: function (item) {
this.trigger('itemFocus', this, item);
},
select: function (item) {
item.select();
this.selected = true;
},
deselect: function () {
if (this.selected) {
_.each(this.childViews, function (childView) {
if (childView.deselect) {
childView.deselect();
}
});
this.selected = false;
}
}
});

Wizard.views.ThingsLists = Wizard.views.Base.extend({
tagName: "nav",
initialize: function () {
this.el.className = 'ThingsLists';
for (var pack in Wizard.packs) {
pack = Wizard.packs[pack];
_.extend(pack, {
models: {},
collections: {},
views: {}
});
for (var thingName in pack.things) {
var thingNamePlural = thingName + 's';
var Thing = pack.models[thingName] = Wizard.models.Thing.extend(
pack.things[thingName],
{modelName: thingName}
);
var Things = pack.collections[thingNamePlural] = Wizard.collections.Things.extend({
model: Thing
});
var things = pack.collections[thingNamePlural.toLowerCase()] = new Things(
[], {localStoreName: thingNamePlural.toLowerCase()}
);
pack.views[thingNamePlural.toLowerCase()] = this.addThingsList(things);
}
}
},
addThingsList: function (things) {
var thingsList = new Wizard.views.ThingsList({collection: things});
this.addChildView(thingsList);
thingsList.bind('itemFocus', this.itemFocus, this);
return thingsList;
},
itemFocus: function (list, item) {
_.each(this.childViews, function (childView) {
childView.deselect();
});
list.select(item);
this.trigger('itemFocus', this, list, item);
}
});

Wizard.views.Main = Wizard.views.Base.extend({
tagName: "article",
className: 'Main',
//todo tabs
addThingForm: function (thing) {
var thingForm = new Wizard.views.ThingForm({model: thing});
this.addChildView(thingForm);
return thingForm;
},
removeThingForm: function () {
this.removeChildViews();
}
});

Wizard.views.Toolbar = Wizard.views.Base.extend({
tagName: "nav",
className: 'Toolbar',
initialize: function () {
this.el.innerHTML = "A toolbar";
}
});


Wizard.views.App = Wizard.views.Base.extend({
initialize: function () {
this.el = document.body;
this.el.className = 'App';
this.toolbar = Wizard.views.toolbar = new Wizard.views.Toolbar();
this.thingsLists = Wizard.views.thingsLists = new Wizard.views.ThingsLists();
this.main = Wizard.views.main = new Wizard.views.Main();
this.layoutChildViews([
"+-------------+",
"|a |",
"+----+--------+",
"|b |c |",
"| | |",
"| | |",
"+----+--------+"
], {
map: {
a: this.toolbar,
b: this.thingsLists,
c: this.main
},
styles: {
table: {width:'100%'},
a: {'height':'60px'},
b: {'fixed-width':'200px', height:'500px'}
}
});
this.thingsLists.bind('itemFocus', this.itemFocus, this);

},
itemFocus: function (lists, list, item) {
this.main.removeThingForm();
this.main.addThingForm(item.model);
}
});

window.addEventListener('load', function () {
Wizard.views.app = new Wizard.views.App;
}, false);

0 comments on commit 69e84db

Please sign in to comment.