Skip to content

complete #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open

complete #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
2d5601f
init git
pahaz Nov 11, 2012
9cb38f9
init submodules
pahaz Nov 11, 2012
a372867
init work html and styles
pahaz Nov 11, 2012
f9373bf
fix submodules
pahaz Nov 11, 2012
1ddf52f
Find strange error.
pahaz Nov 11, 2012
94a8964
Add create event button
pahaz Nov 26, 2012
b3a20d3
complete
pahaz Nov 26, 2012
487dabd
add new function logic for ajax
pahaz Nov 26, 2012
d1dbb0e
comment init app
pahaz Nov 26, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
.idea/
6 changes: 6 additions & 0 deletions .gitmodules
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
[submodule "oop"]
path = oop
url = https://github.com/pahaz/dz-4-oop.git
[submodule "todo"]
path = todo
url = https://github.com/addyosmani/todomvc.git
107 changes: 107 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="todo/assets/base.css">
<style>
#add-button {
width: 100%;
border-bottom: 1px solid #6C615C;
background: #8D7D77;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
border-top-left-radius: 1px;
border-top-right-radius: 1px;
border: double;
border-color: aliceBlue;
padding: 10px;
}
.events__item {
word-break: break-word;
padding: 15px;
margin-left: 45px;
display: block;
line-height: 1.2;
-webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s;
}
</style>

<!-- script src="jquery-1.7.2.min.js"></script -->
<script src="oop/underscore/underscore.js"></script>
<!-- script src="backbone.js"></script -->
<script src="oop/MyAbstractLayer.js"></script>
<script src="oop/Model.js"></script>
<script src="oop/Collection.js"></script>

<title>Yo!</title>
</head>
<body>

<form>
<section id="todoapp">
<header id="header">
<h1>Events</h1>
<input id="new-todo" placeholder="What event?" autofocus=""/>

<div style="padding: 16px 16px 16px 60px; background: rgba(0, 0, 0, 0.02);">
<label>Start
<input type="date" name="start" id="js-start_time" />
</label>

<label style="float: right;">
<input type="date" name="end" id="js-end_time" />
End
</label>
<br/>
<br/>

<input type="submit" value="Add event" id="add-button" />

<br/>
<br/>

<hr/>

<div class="filter">
<label><input type="checkbox" id="filter_future" class="js-filters" />Select future events</label>
<label><input type="checkbox" id="filter_my" class="js-filters" />Select my events</label>

<div>Order by</div>
<label><input type="radio" name="sort" class="js-filters" value="title" />Name</label>
<label><input type="radio" name="sort" class="js-filters" value="go" />My</label>
<label><input type="radio" name="sort" class="js-filters" value="start_time" />Start</label>
<label><input type="radio" name="sort" class="js-filters" value="end_time" />End</label>
</div>


</div>
</header>
<section id="main">
<ul id="todo-list">
<li class="">
<input class="toggle" type="checkbox">
<div class="events__item">
<div>Name: pewpew</div>
<div>Start: 18.8.2005 12:00</div>
<div>End: 18.8.2005 12:30</div>
</div>
</li>
</ul>
</section>
</section>
<br/>

</form>

<script src="index.js"></script>​
</body>

</html>
155 changes: 155 additions & 0 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,155 @@
/**
* Created with PyCharm.
* User: pahaz
* Date: 11.11.12
* Time: 22:08
* To change this template use File | Settings | File Templates.
*/

/**
* Application Event.
*
* @constructor
* @this {app}
*/
var app = function () {};

/**
* Application initialization.
*
* @this {app}
*/
app.prototype.init = function () {
var self = this;
this.render = document.getElementById('todo-list');
this.inputs = {
'title': document.getElementById('new-todo'),
'start_time': document.getElementById('js-start_time'),
'end_time': document.getElementById('js-end_time')
};

this.full_collection = new EventsCollection(this.load());
this.current_collection = this.full_collection;

this.template = _.template("\
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Лучше не использовать \ я бы даже сказал предельно крайне не желательно использовать. Проще всего вынести этот шаблон в HTML (в скрытый элемент) и не мучаться так

<% collection.each(function(event) { %> \
<li> \
<% if (event.get('go')) { %> \
<input class='toggle' type='checkbox'> \
<% } %> \
<div class='events__item'> \
<div><b><%- event.get('title') %></b></div> \
<div><small>Start: <%- event.get('start_time').toLocaleDateString() %></small></div> \
<div><small>End: <%- event.get('end_time').toLocaleDateString() %></small></div> \
</div> \
</li> \
<% }); %>");

this.action = document.getElementById('add-button');
this.action.addEventListener('click', function (event) {
self.action_click(event);
event.preventDefault();
});

var listeners = document.querySelectorAll('.js-filters');
var self = this;
_.each(listeners, function(listener) {
listener.addEventListener('change', self.change_current_collection.bind(self));
});
};

/**
* Load initial collection data.
*
* @this {app}
*/
app.prototype.load = function () {
return [
createNewEvent(new Date(2000, 10, 1), new Date(2000, 11, 1), "First", true),
createNewEvent(new Date(2005, 5, 1), new Date(2006, 1, 1), "Second"),
createNewEvent(new Date(2001, 10, 1), new Date(2006, 10, 1), "Looooong event", true),
createNewEvent(new Date(1991, 5, 1), new Date(2000, 1, 20), "OoOOOoold event"),
createNewEvent(new Date(2007, 3, 11), new Date(2008, 1, 5), "from 2007 to 2008", true),
createNewEvent(new Date(2000, 5, 12), new Date(2020, 8, 17), "from 2000 To futureeeee"),
createNewEvent(new Date(2013, 5, 12), new Date(2017, 1, 27), "Futureeeee", true),
createNewEvent(new Date(2006, 10, 1), new Date(2008, 11, 1), "Firth")
];
};

/**
* Application click action listener.
*
* @this {app}
*/
app.prototype.action_click = function (event) { // WTF: this is WINDOW !!!
var info = {};
_.each(this.inputs, function(num, key) {
info[key] = num.value;
});

try {
var model_class = this.full_collection.model;
var new_event = new model_class(info);
this.full_collection.add(new_event);
this.change_current_collection(event);
this.save();
} catch (e) {
alert(e.message);
}
};

/**
* Save collection data.
*
* @this {app}
*/
app.prototype.save = function() {

};

/**
* Application change collection listener.
*
* @this {app}
*/
app.prototype.change_current_collection = function (event) {
this.current_collection = this.full_collection;

// TODO: optimization;
var my = document.getElementById('filter_my').checked;
var future = document.getElementById('filter_future').checked;
var sort = false;

if (document.querySelector('input[name="sort"]:checked') !== null) {
sort = document.querySelector('input[name="sort"]:checked').value;
}

var tmp_collection = this.current_collection;
if (my) {
tmp_collection = tmp_collection.my_events();
}
if (future) {
tmp_collection = tmp_collection.start_after(new Date());
}
if (sort) {
tmp_collection = tmp_collection.sortBy(function (model) { return model.get(sort); });
}

this.current_collection = tmp_collection;
this.paint();
};

/**
* Render current collection.
*
* @this {app}
*/
app.prototype.paint = function () {
this.render.innerHTML = this.template({'collection': this.current_collection});
};

/*
var application = new app();
application.init();
application.paint();
*/
1 change: 1 addition & 0 deletions oop
Open in desktop
Submodule oop added at f5ac4c
1 change: 1 addition & 0 deletions todo
Open in desktop
Submodule todo added at c6027e