7 changed files with 3337 additions and 9 deletions
|
After Width: | Height: | Size: 2.1 KiB |
@ -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 @@ |
|||||||
|
/*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 @@ |
|||||||
|
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 @@ |
|||||||
|
(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