7 changed files with 3337 additions and 9 deletions
|
After Width: | Height: | Size: 2.1 KiB |
@ -0,0 +1,189 @@
@@ -0,0 +1,189 @@
|
||||
<html> |
||||
<head> |
||||
<link rel="Stylesheet" type="text/css" href="%root_path%css/vimwiki.css" /> |
||||
|
||||
<title>%title%</title> |
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
||||
|
||||
<script type="text/javascript" src="%root_path%js/scripts/shCore.js"></script> |
||||
|
||||
<link rel="stylesheet" href="%root_path%js/todo/todomvc-common/base.css"> |
||||
|
||||
<link href="%root_path%css/styles/shCore.css" rel="stylesheet" type="text/css" /> |
||||
|
||||
<link href="%root_path%css/styles/shThemeEclipse.css" rel="stylesheet" type="text/css" /> |
||||
<!-- <link href="%root_path%css/styles/shThemeMDUltra.css" rel="stylesheet" type="text/css" /> --> |
||||
<!-- <link href="%root_path%css/styles/shThemeMidnight.css" rel="stylesheet" type="text/css" /> --> |
||||
<!-- <link href="%root_path%css/styles/shThemeRDark.css" rel="stylesheet" type="text/css" /> --> |
||||
|
||||
<link rel="stylesheet" href="%root_path%css/pikaday/pikaday.css"> |
||||
|
||||
<link rel="stylesheet" href="%root_path%css/fontello/fontello.css"> |
||||
<link rel="stylesheet" href="%root_path%css/fontello/animation.css"> |
||||
|
||||
<script type="text/javascript" src="%root_path%js/scripts/shBrushScheme.js"></script> |
||||
<script type="text/javascript" src="%root_path%js/scripts/shBrushTcl_simple.js"></script> |
||||
<script type="text/javascript" src="%root_path%js/scripts/shBrushBash.js"></script> |
||||
<script type="text/javascript" src="%root_path%js/scripts/shBrushErlang.js"></script> |
||||
<script type="text/javascript" src="%root_path%js/scripts/shBrushPlain.js"></script> |
||||
<script type="text/javascript" src="%root_path%js/scripts/shBrushBash.js"></script> |
||||
<script type="text/javascript" src="%root_path%js/scripts/shBrushLatex.js"></script> |
||||
<script type="text/javascript" src="%root_path%js/scripts/shBrushHaskell.js"></script> |
||||
<script type="text/javascript" src="%root_path%js/scripts/shBrushProlog.js"></script> |
||||
<script type="text/javascript" src="%root_path%js/scripts/shBrushDiff.js"></script> |
||||
<script type="text/javascript" src="%root_path%js/scripts/shBrushVim.js"></script> |
||||
<script type="text/javascript" src="%root_path%js/scripts/shBrushJScript.js"></script> |
||||
<script type="text/javascript" src="%root_path%js/scripts/shBrushBat.js"></script> |
||||
<script type="text/javascript" src="%root_path%js/scripts/shBrushXml.js"></script> |
||||
<script type="text/javascript" src="%root_path%js/scripts/shBrushCss.js"></script> |
||||
|
||||
<script type="text/javascript" src="%root_path%js/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> |
||||
|
||||
<script type="text/javascript" src="%root_path%js/sorttable.js"></script> |
||||
|
||||
<script type="text/javascript"> |
||||
SyntaxHighlighter.defaults['toolbar'] = false; |
||||
SyntaxHighlighter.all() |
||||
</script> |
||||
|
||||
<script type="text/javascript" src="%root_path%js/abcjs_plugin_1.10-min.js"></script> |
||||
|
||||
<script type="text/javascript"> |
||||
ABCJS.plugin["show_midi"] = false; |
||||
ABCJS.plugin["hide_abc"] = true; |
||||
</script> |
||||
|
||||
<script type="text/javascript" src="%root_path%js/moment.js"></script> |
||||
<script type="text/javascript" src="%root_path%js/pikaday.js"></script> |
||||
|
||||
<script type="text/javascript" src="%root_path%js/pl/swfobject.js"></script> |
||||
<script type="text/javascript" src="%root_path%js/pl/1bit.js"></script> |
||||
|
||||
<script type="text/javascript"> |
||||
oneBit = new OneBit('%root_path%js/pl/1bit.swf'); |
||||
oneBit.ready(function() { |
||||
oneBit.specify('color', '#000000'); |
||||
oneBit.specify('background', '#FFFFFF'); |
||||
oneBit.specify('playerSize', '10'); |
||||
oneBit.specify('position', 'after'); |
||||
oneBit.specify('analytics', false); |
||||
oneBit.apply('a'); |
||||
}); |
||||
</script> |
||||
|
||||
</head> |
||||
<body> |
||||
|
||||
<!-- Ссылки на предыдущую и следующую запись дневника --> |
||||
<script type="text/javascript"> |
||||
var date = moment(document.title, "YYYY-MM-DD"); |
||||
|
||||
if (date.format('YY') != '00') { |
||||
var prev = date.subtract('days', 1).format('YYYY-MM-DD'); |
||||
var next = date.add('days', 2).format('YYYY-MM-DD'); |
||||
|
||||
document.write('<div style="text-align: left; float: left; " id="icons" class="navigation">'); |
||||
document.write('<a class="icon-left-open" href="' + prev + '.html" id="nav-prev"></a>'); |
||||
document.write('<a class="icon-home" href="%root_path%index.html"></a>'); |
||||
document.write('</div>'); |
||||
|
||||
document.write('<div style="text-align: right; float: right; " id="icons" class="navigation">'); |
||||
document.write('<a class="icon-calendar-empty" id="datepicker"></a>'); |
||||
document.write('<a class="icon-right-open" href="' + next + '.html" id="nav-next"></a>'); |
||||
document.write('</div>'); |
||||
} else { |
||||
document.write('<div style="text-align: right; float: right; " id="icons" class="navigation">'); |
||||
document.write('<a class="icon-home" href="%root_path%index.html"></a>'); |
||||
document.write('</div>'); |
||||
} |
||||
|
||||
new Pikaday( |
||||
{ |
||||
field: document.getElementById('datepicker'), |
||||
trigger: document.getElementById('datepicker'), |
||||
firstDay: 1, |
||||
minDate: new Date('2010-11-13'), |
||||
maxDate: new Date('2015-02-06'), |
||||
yearRange: [2010,2015], |
||||
i18n: { |
||||
previousMonth : 'Предыдущий месяц', |
||||
nextMonth : 'Следующий месяц', |
||||
months : ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'], |
||||
weekdays : ['Воскресенье','Понедельник','Вторник','Среда','Четверг','Пятница','Суббота'], |
||||
weekdaysShort : ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'] |
||||
}, |
||||
defaultDate: function() { |
||||
return moment().format('YYYY-MM-DD'); |
||||
}, |
||||
onSelect: function() { |
||||
document.location.href = this.getMoment().format('YYYY-MM-DD') + '.html'; |
||||
} |
||||
}); |
||||
</script> |
||||
|
||||
<script> |
||||
$(function() { |
||||
//Перелистывание страниц |
||||
$(document).keydown(function(e) { |
||||
var unicode = e.charCode ? e.charCode : e.keyCode; |
||||
// Следующая страница |
||||
if (unicode == 39) { |
||||
var tc = document.getElementById("nav-next"); |
||||
var ary = tc ? tc.getAttribute("href") : []; |
||||
|
||||
window.open(ary,"_self"); |
||||
// Предыдущая страница |
||||
} else if (unicode == 37) { |
||||
var tc = document.getElementById("nav-prev"); |
||||
var ary = tc ? tc.getAttribute("href") : []; |
||||
|
||||
window.open(ary,"_self"); |
||||
} |
||||
}) |
||||
}); |
||||
</script> |
||||
<div class="contents" style="float: left"> |
||||
<!-- TODO --> |
||||
<section id="todoapp"> |
||||
<h1>Список дел</h1> |
||||
<header id="header"> |
||||
<input id="new-todo" placeholder="" autofocus> |
||||
</header> |
||||
<section id="main"> |
||||
<input id="toggle-all" type="checkbox"> |
||||
<label for="toggle-all">Завершить все</label> |
||||
<ul id="todo-list"></ul> |
||||
</section> |
||||
<footer id="footer"> |
||||
<span id="todo-count">Осталось: <strong>0</strong></span> |
||||
<button id="clear-completed">Очистить выполненное</button> |
||||
</footer> |
||||
</section> |
||||
|
||||
<script id="todo-template" type="text/x-handlebars-template"> |
||||
{{#this}} |
||||
<li {{#if completed}}class="completed"{{/if}} data-id="{{id}}"> |
||||
<div class="view"> |
||||
<input class="toggle" type="checkbox" {{#if completed}}checked{{/if}}> |
||||
<label>{{title}}</label> |
||||
<button class="destroy"></button> |
||||
</div> |
||||
<input class="edit" value="{{title}}"> |
||||
</li> |
||||
{{/this}} |
||||
</script> |
||||
<script id="footer-template" type="text/x-handlebars-template"> |
||||
<span id="todo-count"><strong>{{activeTodoCount}}</strong> {{activeTodoWord}} left</span> |
||||
{{#if completedTodos}}<button id="clear-completed">Очистить выполненное ({{completedTodos}})</button>{{/if}} |
||||
</script> |
||||
<script src="js/todo/todomvc-common/base.js"></script> |
||||
<script src="js/todo/handlebars/handlebars.js"></script> |
||||
<script src="js/todo/todo.js"></script> |
||||
|
||||
<!-- /TODO --> |
||||
|
||||
%content% |
||||
</div> |
||||
|
||||
</body> |
||||
</html> |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,184 @@
@@ -0,0 +1,184 @@
|
||||
/*global jQuery, Handlebars */ |
||||
jQuery(function ($) { |
||||
'use strict'; |
||||
|
||||
var Utils = { |
||||
uuid: function () { |
||||
/*jshint bitwise:false */ |
||||
var i, random; |
||||
var uuid = ''; |
||||
|
||||
for (i = 0; i < 32; i++) { |
||||
random = Math.random() * 16 | 0; |
||||
if (i === 8 || i === 12 || i === 16 || i === 20) { |
||||
uuid += '-'; |
||||
} |
||||
uuid += (i === 12 ? 4 : (i === 16 ? (random & 3 | 8) : random)).toString(16); |
||||
} |
||||
|
||||
return uuid; |
||||
}, |
||||
pluralize: function (count, word) { |
||||
return count === 1 ? word : word + 's'; |
||||
}, |
||||
store: function (namespace, data) { |
||||
if (arguments.length > 1) { |
||||
return localStorage.setItem(namespace, JSON.stringify(data)); |
||||
} else { |
||||
var store = localStorage.getItem(namespace); |
||||
return (store && JSON.parse(store)) || []; |
||||
} |
||||
} |
||||
}; |
||||
|
||||
var App = { |
||||
init: function () { |
||||
this.ENTER_KEY = 13; |
||||
this.todos = Utils.store('todos-jquery'); |
||||
this.cacheElements(); |
||||
this.bindEvents(); |
||||
this.render(); |
||||
}, |
||||
cacheElements: function () { |
||||
this.todoTemplate = Handlebars.compile($('#todo-template').html()); |
||||
this.footerTemplate = Handlebars.compile($('#footer-template').html()); |
||||
this.$todoApp = $('#todoapp'); |
||||
this.$header = this.$todoApp.find('#header'); |
||||
this.$main = this.$todoApp.find('#main'); |
||||
this.$footer = this.$todoApp.find('#footer'); |
||||
this.$newTodo = this.$header.find('#new-todo'); |
||||
this.$toggleAll = this.$main.find('#toggle-all'); |
||||
this.$todoList = this.$main.find('#todo-list'); |
||||
this.$count = this.$footer.find('#todo-count'); |
||||
this.$clearBtn = this.$footer.find('#clear-completed'); |
||||
}, |
||||
bindEvents: function () { |
||||
var list = this.$todoList; |
||||
this.$newTodo.on('keyup', this.create); |
||||
this.$toggleAll.on('change', this.toggleAll); |
||||
this.$footer.on('click', '#clear-completed', this.destroyCompleted); |
||||
list.on('change', '.toggle', this.toggle); |
||||
list.on('dblclick', 'label', this.edit); |
||||
list.on('keypress', '.edit', this.blurOnEnter); |
||||
list.on('blur', '.edit', this.update); |
||||
list.on('click', '.destroy', this.destroy); |
||||
}, |
||||
render: function () { |
||||
this.$todoList.html(this.todoTemplate(this.todos)); |
||||
this.$main.toggle(!!this.todos.length); |
||||
this.$toggleAll.prop('checked', !this.activeTodoCount()); |
||||
this.renderFooter(); |
||||
Utils.store('todos-jquery', this.todos); |
||||
}, |
||||
renderFooter: function () { |
||||
var todoCount = this.todos.length; |
||||
var activeTodoCount = this.activeTodoCount(); |
||||
var footer = { |
||||
activeTodoCount: activeTodoCount, |
||||
activeTodoWord: Utils.pluralize(activeTodoCount, 'item'), |
||||
completedTodos: todoCount - activeTodoCount |
||||
}; |
||||
|
||||
this.$footer.toggle(!!todoCount); |
||||
this.$footer.html(this.footerTemplate(footer)); |
||||
}, |
||||
toggleAll: function () { |
||||
var isChecked = $(this).prop('checked'); |
||||
|
||||
$.each(App.todos, function (i, val) { |
||||
val.completed = isChecked; |
||||
}); |
||||
|
||||
App.render(); |
||||
}, |
||||
activeTodoCount: function () { |
||||
var count = 0; |
||||
|
||||
$.each(this.todos, function (i, val) { |
||||
if (!val.completed) { |
||||
count++; |
||||
} |
||||
}); |
||||
|
||||
return count; |
||||
}, |
||||
destroyCompleted: function () { |
||||
var todos = App.todos; |
||||
var l = todos.length; |
||||
|
||||
while (l--) { |
||||
if (todos[l].completed) { |
||||
todos.splice(l, 1); |
||||
} |
||||
} |
||||
|
||||
App.render(); |
||||
}, |
||||
// accepts an element from inside the `.item` div and
|
||||
// returns the corresponding todo in the todos array
|
||||
getTodo: function (elem, callback) { |
||||
var id = $(elem).closest('li').data('id'); |
||||
|
||||
$.each(this.todos, function (i, val) { |
||||
if (val.id === id) { |
||||
callback.apply(App, arguments); |
||||
return false; |
||||
} |
||||
}); |
||||
}, |
||||
create: function (e) { |
||||
var $input = $(this); |
||||
var val = $.trim($input.val()); |
||||
|
||||
if (e.which !== App.ENTER_KEY || !val) { |
||||
return; |
||||
} |
||||
|
||||
App.todos.push({ |
||||
id: Utils.uuid(), |
||||
title: val, |
||||
completed: false |
||||
}); |
||||
|
||||
$input.val(''); |
||||
App.render(); |
||||
}, |
||||
toggle: function () { |
||||
App.getTodo(this, function (i, val) { |
||||
val.completed = !val.completed; |
||||
}); |
||||
App.render(); |
||||
}, |
||||
edit: function () { |
||||
var $input = $(this).closest('li').addClass('editing').find('.edit'); |
||||
var val = $input.val(); |
||||
|
||||
$input.val(val).focus(); |
||||
}, |
||||
blurOnEnter: function (e) { |
||||
if (e.which === App.ENTER_KEY) { |
||||
e.target.blur(); |
||||
} |
||||
}, |
||||
update: function () { |
||||
var val = $.trim($(this).removeClass('editing').val()); |
||||
|
||||
App.getTodo(this, function (i) { |
||||
if (val) { |
||||
this.todos[i].title = val; |
||||
} else { |
||||
this.todos.splice(i, 1); |
||||
} |
||||
this.render(); |
||||
}); |
||||
}, |
||||
destroy: function () { |
||||
App.getTodo(this, function (i) { |
||||
this.todos.splice(i, 1); |
||||
this.render(); |
||||
}); |
||||
} |
||||
}; |
||||
|
||||
App.init(); |
||||
}); |
||||
@ -0,0 +1,529 @@
@@ -0,0 +1,529 @@
|
||||
button { |
||||
margin: 0; |
||||
padding: 0; |
||||
border: 0; |
||||
background: none; |
||||
font-size: 100%; |
||||
vertical-align: baseline; |
||||
font-family: inherit; |
||||
color: inherit; |
||||
-webkit-appearance: none; |
||||
/*-moz-appearance: none;*/ |
||||
-ms-appearance: none; |
||||
-o-appearance: none; |
||||
appearance: none; |
||||
} |
||||
|
||||
#todoapp { |
||||
background: #fff; |
||||
background: rgba(255, 255, 255, 0.9); |
||||
width: 550px; |
||||
border: 1px solid #ccc; |
||||
position: absolute; |
||||
top: 300px; |
||||
right: 50px; |
||||
border-top-left-radius: 2px; |
||||
border-top-right-radius: 2px; |
||||
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2), |
||||
0 25px 50px 0 rgba(0, 0, 0, 0.15); |
||||
} |
||||
|
||||
#todoapp:before { |
||||
content: ''; |
||||
border-left: 1px solid #f5d6d6; |
||||
border-right: 1px solid #f5d6d6; |
||||
width: 2px; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 40px; |
||||
height: 100%; |
||||
} |
||||
|
||||
#todoapp input::-webkit-input-placeholder { |
||||
font-style: italic; |
||||
} |
||||
|
||||
#todoapp input::-moz-placeholder { |
||||
font-style: italic; |
||||
color: #a9a9a9; |
||||
} |
||||
|
||||
#todoapp h1 { |
||||
position: absolute; |
||||
top: -85px; |
||||
width: 100%; |
||||
font-size: 2.0em; |
||||
font-weight: bold; |
||||
text-align: center; |
||||
} |
||||
|
||||
#header { |
||||
padding-top: 15px; |
||||
border-radius: inherit; |
||||
} |
||||
|
||||
#header:before { |
||||
content: ''; |
||||
position: absolute; |
||||
top: 0; |
||||
right: 0; |
||||
left: 0; |
||||
height: 15px; |
||||
z-index: 2; |
||||
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; |
||||
} |
||||
|
||||
#new-todo, |
||||
.edit { |
||||
position: relative; |
||||
margin: 0; |
||||
width: 100%; |
||||
font-size: 14px; |
||||
font-family: inherit; |
||||
line-height: 1em; |
||||
border: 0; |
||||
outline: none; |
||||
color: inherit; |
||||
padding: 3px; |
||||
border: 1px solid #999; |
||||
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); |
||||
-webkit-box-sizing: border-box; |
||||
-moz-box-sizing: border-box; |
||||
-ms-box-sizing: border-box; |
||||
-o-box-sizing: border-box; |
||||
box-sizing: border-box; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-font-smoothing: antialiased; |
||||
-ms-font-smoothing: antialiased; |
||||
-o-font-smoothing: antialiased; |
||||
font-smoothing: antialiased; |
||||
} |
||||
|
||||
#new-todo { |
||||
padding: 10px 10px 10px 60px; |
||||
border: none; |
||||
background: rgba(0, 0, 0, 0.02); |
||||
z-index: 2; |
||||
box-shadow: none; |
||||
} |
||||
|
||||
#main { |
||||
position: relative; |
||||
z-index: 2; |
||||
border-top: 1px dotted #adadad; |
||||
} |
||||
|
||||
label[for='toggle-all'] { |
||||
display: none; |
||||
} |
||||
|
||||
#toggle-all { |
||||
position: absolute; |
||||
top: -42px; |
||||
left: -4px; |
||||
width: 40px; |
||||
text-align: center; |
||||
border: none; /* Mobile Safari */ |
||||
} |
||||
|
||||
#toggle-all:before { |
||||
content: '»'; |
||||
font-size: 28px; |
||||
color: #d9d9d9; |
||||
padding: 0 40px 2px; |
||||
} |
||||
|
||||
#toggle-all:checked:before { |
||||
color: #737373; |
||||
} |
||||
|
||||
#todo-list { |
||||
margin: 0; |
||||
padding: 0; |
||||
list-style: none; |
||||
} |
||||
|
||||
#todo-list li { |
||||
position: relative; |
||||
font-size: 14px; |
||||
border-bottom: 1px dotted #ccc; |
||||
} |
||||
|
||||
#todo-list li:last-child { |
||||
border-bottom: none; |
||||
} |
||||
|
||||
#todo-list li.editing { |
||||
border-bottom: none; |
||||
padding: 0; |
||||
} |
||||
|
||||
#todo-list li.editing .edit { |
||||
display: block; |
||||
width: 506px; |
||||
padding: 13px 17px 12px 17px; |
||||
margin: 0 0 0 43px; |
||||
} |
||||
|
||||
#todo-list li.editing .view { |
||||
display: none; |
||||
} |
||||
|
||||
#todo-list li .toggle { |
||||
text-align: center; |
||||
width: 40px; |
||||
/* auto, since non-WebKit browsers doesn't support input styling */ |
||||
height: auto; |
||||
position: absolute; |
||||
top: 0; |
||||
bottom: 0; |
||||
margin: auto 0; |
||||
border: none; /* Mobile Safari */ |
||||
-webkit-appearance: none; |
||||
/*-moz-appearance: none;*/ |
||||
-ms-appearance: none; |
||||
-o-appearance: none; |
||||
appearance: none; |
||||
} |
||||
|
||||
#todo-list li .toggle:after { |
||||
content: '✔'; |
||||
line-height: 43px; /* 40 + a couple of pixels visual adjustment */ |
||||
font-size: 20px; |
||||
color: #d9d9d9; |
||||
text-shadow: 0 -1px 0 #bfbfbf; |
||||
} |
||||
|
||||
#todo-list li .toggle:checked:after { |
||||
color: #85ada7; |
||||
text-shadow: 0 1px 0 #669991; |
||||
bottom: 1px; |
||||
position: relative; |
||||
} |
||||
|
||||
#todo-list li label { |
||||
word-break: break-word; |
||||
padding: 10px; |
||||
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; |
||||
} |
||||
|
||||
#todo-list li.completed label { |
||||
color: #a9a9a9; |
||||
text-decoration: line-through; |
||||
} |
||||
|
||||
#todo-list li .destroy { |
||||
display: none; |
||||
position: absolute; |
||||
top: 0; |
||||
right: 10px; |
||||
bottom: 0; |
||||
width: 40px; |
||||
height: 40px; |
||||
margin: auto 0; |
||||
font-size: 22px; |
||||
color: #a88a8a; |
||||
-webkit-transition: all 0.2s; |
||||
-moz-transition: all 0.2s; |
||||
-ms-transition: all 0.2s; |
||||
-o-transition: all 0.2s; |
||||
transition: all 0.2s; |
||||
} |
||||
|
||||
#todo-list li .destroy:hover { |
||||
text-shadow: 0 0 1px #000, |
||||
0 0 10px rgba(199, 107, 107, 0.8); |
||||
-webkit-transform: scale(1.3); |
||||
-moz-transform: scale(1.3); |
||||
-ms-transform: scale(1.3); |
||||
-o-transform: scale(1.3); |
||||
transform: scale(1.3); |
||||
} |
||||
|
||||
#todo-list li .destroy:after { |
||||
content: '✖'; |
||||
} |
||||
|
||||
#todo-list li:hover .destroy { |
||||
display: block; |
||||
} |
||||
|
||||
#todo-list li .edit { |
||||
display: none; |
||||
} |
||||
|
||||
#todo-list li.editing:last-child { |
||||
margin-bottom: -1px; |
||||
} |
||||
|
||||
#footer { |
||||
color: #777; |
||||
padding: 0 15px; |
||||
position: absolute; |
||||
right: 0; |
||||
bottom: -31px; |
||||
left: 0; |
||||
height: 20px; |
||||
z-index: 1; |
||||
text-align: center; |
||||
} |
||||
|
||||
#footer:before { |
||||
content: ''; |
||||
position: absolute; |
||||
right: 0; |
||||
bottom: 31px; |
||||
left: 0; |
||||
height: 50px; |
||||
z-index: -1; |
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), |
||||
0 6px 0 -3px rgba(255, 255, 255, 0.8), |
||||
0 7px 1px -3px rgba(0, 0, 0, 0.3), |
||||
0 43px 0 -6px rgba(255, 255, 255, 0.8), |
||||
0 44px 2px -6px rgba(0, 0, 0, 0.2); |
||||
} |
||||
|
||||
#todo-count { |
||||
float: left; |
||||
text-align: left; |
||||
} |
||||
|
||||
#filters { |
||||
margin: 0; |
||||
padding: 0; |
||||
list-style: none; |
||||
position: absolute; |
||||
right: 0; |
||||
left: 0; |
||||
} |
||||
|
||||
#filters li { |
||||
display: inline; |
||||
} |
||||
|
||||
#filters li a { |
||||
color: #83756f; |
||||
margin: 2px; |
||||
text-decoration: none; |
||||
} |
||||
|
||||
#filters li a.selected { |
||||
font-weight: bold; |
||||
} |
||||
|
||||
#clear-completed { |
||||
float: right; |
||||
position: relative; |
||||
line-height: 20px; |
||||
text-decoration: none; |
||||
background: rgba(0, 0, 0, 0.1); |
||||
font-size: 11px; |
||||
padding: 0 10px; |
||||
border-radius: 3px; |
||||
box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.2); |
||||
} |
||||
|
||||
#clear-completed:hover { |
||||
background: rgba(0, 0, 0, 0.15); |
||||
box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.3); |
||||
} |
||||
|
||||
#info { |
||||
margin: 65px auto 0; |
||||
color: #a6a6a6; |
||||
font-size: 12px; |
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); |
||||
text-align: center; |
||||
} |
||||
|
||||
#info a { |
||||
color: inherit; |
||||
} |
||||
|
||||
/* |
||||
Hack to remove background from Mobile Safari. |
||||
Can't use it globally since it destroys checkboxes in Firefox and Opera |
||||
*/ |
||||
@media screen and (-webkit-min-device-pixel-ratio:0) { |
||||
#toggle-all, |
||||
#todo-list li .toggle { |
||||
background: none; |
||||
} |
||||
|
||||
#todo-list li .toggle { |
||||
height: 40px; |
||||
} |
||||
|
||||
#toggle-all { |
||||
top: -56px; |
||||
left: -15px; |
||||
width: 65px; |
||||
height: 41px; |
||||
-webkit-transform: rotate(90deg); |
||||
transform: rotate(90deg); |
||||
-webkit-appearance: none; |
||||
appearance: none; |
||||
} |
||||
} |
||||
|
||||
.hidden{ |
||||
display:none; |
||||
} |
||||
|
||||
hr { |
||||
margin: 20px 0; |
||||
border: 0; |
||||
border-top: 1px dashed #C5C5C5; |
||||
border-bottom: 1px dashed #F7F7F7; |
||||
} |
||||
|
||||
.learn a { |
||||
font-weight: normal; |
||||
text-decoration: none; |
||||
color: #b83f45; |
||||
} |
||||
|
||||
.learn a:hover { |
||||
text-decoration: underline; |
||||
color: #787e7e; |
||||
} |
||||
|
||||
.learn h3, |
||||
.learn h4, |
||||
.learn h5 { |
||||
margin: 10px 0; |
||||
font-weight: 500; |
||||
line-height: 1.2; |
||||
color: #000; |
||||
} |
||||
|
||||
.learn h3 { |
||||
font-size: 24px; |
||||
} |
||||
|
||||
.learn h4 { |
||||
font-size: 18px; |
||||
} |
||||
|
||||
.learn h5 { |
||||
margin-bottom: 0; |
||||
font-size: 14px; |
||||
} |
||||
|
||||
.learn ul { |
||||
padding: 0; |
||||
margin: 0 0 30px 25px; |
||||
} |
||||
|
||||
.learn li { |
||||
line-height: 20px; |
||||
} |
||||
|
||||
.learn p { |
||||
font-size: 15px; |
||||
font-weight: 300; |
||||
line-height: 1.3; |
||||
margin-top: 0; |
||||
margin-bottom: 0; |
||||
} |
||||
|
||||
.quote { |
||||
border: none; |
||||
margin: 20px 0 60px 0; |
||||
} |
||||
|
||||
.quote p { |
||||
font-style: italic; |
||||
} |
||||
|
||||
.quote p:before { |
||||
content: '“'; |
||||
font-size: 50px; |
||||
opacity: .15; |
||||
position: absolute; |
||||
top: -20px; |
||||
left: 3px; |
||||
} |
||||
|
||||
.quote p:after { |
||||
content: '”'; |
||||
font-size: 50px; |
||||
opacity: .15; |
||||
position: absolute; |
||||
bottom: -42px; |
||||
right: 3px; |
||||
} |
||||
|
||||
.quote footer { |
||||
position: absolute; |
||||
bottom: -40px; |
||||
right: 0; |
||||
} |
||||
|
||||
.quote footer img { |
||||
border-radius: 3px; |
||||
} |
||||
|
||||
.quote footer a { |
||||
margin-left: 5px; |
||||
vertical-align: middle; |
||||
} |
||||
|
||||
.speech-bubble { |
||||
position: relative; |
||||
padding: 10px; |
||||
background: rgba(0, 0, 0, .04); |
||||
border-radius: 5px; |
||||
} |
||||
|
||||
.speech-bubble:after { |
||||
content: ''; |
||||
position: absolute; |
||||
top: 100%; |
||||
right: 30px; |
||||
border: 13px solid transparent; |
||||
border-top-color: rgba(0, 0, 0, .04); |
||||
} |
||||
|
||||
/**body*/.learn-bar > .learn { |
||||
position: absolute; |
||||
width: 272px; |
||||
top: 8px; |
||||
left: -300px; |
||||
padding: 10px; |
||||
border-radius: 5px; |
||||
background-color: rgba(255, 255, 255, .6); |
||||
transition-property: left; |
||||
transition-duration: 500ms; |
||||
} |
||||
|
||||
@media (min-width: 899px) { |
||||
/**body*/.learn-bar { |
||||
width: auto; |
||||
margin: 0 0 0 300px; |
||||
} |
||||
/**body*/.learn-bar > .learn { |
||||
left: 8px; |
||||
} |
||||
/**body*/.learn-bar #todoapp { |
||||
width: 550px; |
||||
margin: 130px auto 40px auto; |
||||
} |
||||
} |
||||
@ -0,0 +1,209 @@
@@ -0,0 +1,209 @@
|
||||
(function () { |
||||
'use strict'; |
||||
|
||||
// Underscore's Template Module
|
||||
// Courtesy of underscorejs.org
|
||||
var _ = (function (_) { |
||||
_.defaults = function (object) { |
||||
if (!object) { |
||||
return object; |
||||
} |
||||
for (var argsIndex = 1, argsLength = arguments.length; argsIndex < argsLength; argsIndex++) { |
||||
var iterable = arguments[argsIndex]; |
||||
if (iterable) { |
||||
for (var key in iterable) { |
||||
if (object[key] == null) { |
||||
object[key] = iterable[key]; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
return object; |
||||
} |
||||
|
||||
// By default, Underscore uses ERB-style template delimiters, change the
|
||||
// following template settings to use alternative delimiters.
|
||||
_.templateSettings = { |
||||
evaluate : /<%([\s\S]+?)%>/g, |
||||
interpolate : /<%=([\s\S]+?)%>/g, |
||||
escape : /<%-([\s\S]+?)%>/g |
||||
}; |
||||
|
||||
// When customizing `templateSettings`, if you don't want to define an
|
||||
// interpolation, evaluation or escaping regex, we need one that is
|
||||
// guaranteed not to match.
|
||||
var noMatch = /(.)^/; |
||||
|
||||
// Certain characters need to be escaped so that they can be put into a
|
||||
// string literal.
|
||||
var escapes = { |
||||
"'": "'", |
||||
'\\': '\\', |
||||
'\r': 'r', |
||||
'\n': 'n', |
||||
'\t': 't', |
||||
'\u2028': 'u2028', |
||||
'\u2029': 'u2029' |
||||
}; |
||||
|
||||
var escaper = /\\|'|\r|\n|\t|\u2028|\u2029/g; |
||||
|
||||
// JavaScript micro-templating, similar to John Resig's implementation.
|
||||
// Underscore templating handles arbitrary delimiters, preserves whitespace,
|
||||
// and correctly escapes quotes within interpolated code.
|
||||
_.template = function(text, data, settings) { |
||||
var render; |
||||
settings = _.defaults({}, settings, _.templateSettings); |
||||
|
||||
// Combine delimiters into one regular expression via alternation.
|
||||
var matcher = new RegExp([ |
||||
(settings.escape || noMatch).source, |
||||
(settings.interpolate || noMatch).source, |
||||
(settings.evaluate || noMatch).source |
||||
].join('|') + '|$', 'g'); |
||||
|
||||
// Compile the template source, escaping string literals appropriately.
|
||||
var index = 0; |
||||
var source = "__p+='"; |
||||
text.replace(matcher, function(match, escape, interpolate, evaluate, offset) { |
||||
source += text.slice(index, offset) |
||||
.replace(escaper, function(match) { return '\\' + escapes[match]; }); |
||||
|
||||
if (escape) { |
||||
source += "'+\n((__t=(" + escape + "))==null?'':_.escape(__t))+\n'"; |
||||
} |
||||
if (interpolate) { |
||||
source += "'+\n((__t=(" + interpolate + "))==null?'':__t)+\n'"; |
||||
} |
||||
if (evaluate) { |
||||
source += "';\n" + evaluate + "\n__p+='"; |
||||
} |
||||
index = offset + match.length; |
||||
return match; |
||||
}); |
||||
source += "';\n"; |
||||
|
||||
// If a variable is not specified, place data values in local scope.
|
||||
if (!settings.variable) source = 'with(obj||{}){\n' + source + '}\n'; |
||||
|
||||
source = "var __t,__p='',__j=Array.prototype.join," + |
||||
"print=function(){__p+=__j.call(arguments,'');};\n" + |
||||
source + "return __p;\n"; |
||||
|
||||
try { |
||||
render = new Function(settings.variable || 'obj', '_', source); |
||||
} catch (e) { |
||||
e.source = source; |
||||
throw e; |
||||
} |
||||
|
||||
if (data) return render(data, _); |
||||
var template = function(data) { |
||||
return render.call(this, data, _); |
||||
}; |
||||
|
||||
// Provide the compiled function source as a convenience for precompilation.
|
||||
template.source = 'function(' + (settings.variable || 'obj') + '){\n' + source + '}'; |
||||
|
||||
return template; |
||||
}; |
||||
|
||||
return _; |
||||
})({}); |
||||
|
||||
if (location.hostname === 'todomvc.com') { |
||||
window._gaq = [['_setAccount','UA-31081062-1'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script')); |
||||
} |
||||
|
||||
function redirect() { |
||||
if (location.hostname === 'tastejs.github.io') { |
||||
location.href = location.href.replace('tastejs.github.io/todomvc', 'todomvc.com'); |
||||
} |
||||
} |
||||
|
||||
function findRoot() { |
||||
var base; |
||||
|
||||
[/labs/, /\w*-examples/].forEach(function (href) { |
||||
var match = location.href.match(href); |
||||
|
||||
if (!base && match) { |
||||
base = location.href.indexOf(match); |
||||
} |
||||
}); |
||||
|
||||
return location.href.substr(0, base); |
||||
} |
||||
|
||||
function getFile(file, callback) { |
||||
if (!location.host) { |
||||
return console.info('Miss the info bar? Run TodoMVC from a server to avoid a cross-origin error.'); |
||||
} |
||||
|
||||
var xhr = new XMLHttpRequest(); |
||||
|
||||
xhr.open('GET', findRoot() + file, true); |
||||
xhr.send(); |
||||
|
||||
xhr.onload = function () { |
||||
if (xhr.status === 200 && callback) { |
||||
callback(xhr.responseText); |
||||
} |
||||
}; |
||||
} |
||||
|
||||
function Learn(learnJSON, config) { |
||||
if (!(this instanceof Learn)) { |
||||
return new Learn(learnJSON, config); |
||||
} |
||||
|
||||
var template, framework; |
||||
|
||||
if (typeof learnJSON !== 'object') { |
||||
try { |
||||
learnJSON = JSON.parse(learnJSON); |
||||
} catch (e) { |
||||
return; |
||||
} |
||||
} |
||||
|
||||
if (config) { |
||||
template = config.template; |
||||
framework = config.framework; |
||||
} |
||||
|
||||
if (!template && learnJSON.templates) { |
||||
template = learnJSON.templates.todomvc; |
||||
} |
||||
|
||||
if (!framework && document.querySelector('[data-framework]')) { |
||||
framework = document.querySelector('[data-framework]').getAttribute('data-framework'); |
||||
} |
||||
|
||||
|
||||
if (template && learnJSON[framework]) { |
||||
this.frameworkJSON = learnJSON[framework]; |
||||
this.template = template; |
||||
|
||||
this.append(); |
||||
} |
||||
} |
||||
|
||||
Learn.prototype.append = function () { |
||||
var aside = document.createElement('aside'); |
||||
aside.innerHTML = _.template(this.template, this.frameworkJSON); |
||||
aside.className = 'learn'; |
||||
|
||||
// Localize demo links
|
||||
var demoLinks = aside.querySelectorAll('.demo-link'); |
||||
Array.prototype.forEach.call(demoLinks, function (demoLink) { |
||||
demoLink.setAttribute('href', findRoot() + demoLink.getAttribute('href')); |
||||
}); |
||||
|
||||
document.body.className = (document.body.className + ' learn-bar').trim(); |
||||
document.body.insertAdjacentHTML('afterBegin', aside.outerHTML); |
||||
}; |
||||
|
||||
redirect(); |
||||
getFile('learn.json', Learn); |
||||
})(); |
||||
Loading…
Reference in new issue