Merge branch 'staging' of github.com:xwiki-labs/cryptpad into staging
ansuz
7 years ago
commit
744809101c
@ -0,0 +1,141 @@
|
|||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
#issue-count {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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) {
|
||||||
|
.learn-bar {
|
||||||
|
width: auto;
|
||||||
|
padding-left: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.learn-bar > .learn {
|
||||||
|
left: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,249 @@
|
|||||||
|
/* global _ */
|
||||||
|
(function () {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
/* jshint ignore:start */
|
||||||
|
// 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') {
|
||||||
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||||
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||||
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||||
|
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||||
|
ga('create', 'UA-31081062-1', 'auto');
|
||||||
|
ga('send', 'pageview');
|
||||||
|
}
|
||||||
|
/* jshint ignore:end */
|
||||||
|
|
||||||
|
function redirect() {
|
||||||
|
if (location.hostname === 'tastejs.github.io') {
|
||||||
|
location.href = location.href.replace('tastejs.github.io/todomvc', 'todomvc.com');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function findRoot() {
|
||||||
|
var base = location.href.indexOf('examples/');
|
||||||
|
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]').dataset.framework;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.template = template;
|
||||||
|
|
||||||
|
if (learnJSON.backend) {
|
||||||
|
this.frameworkJSON = learnJSON.backend;
|
||||||
|
this.frameworkJSON.issueLabel = framework;
|
||||||
|
this.append({
|
||||||
|
backend: true
|
||||||
|
});
|
||||||
|
} else if (learnJSON[framework]) {
|
||||||
|
this.frameworkJSON = learnJSON[framework];
|
||||||
|
this.frameworkJSON.issueLabel = framework;
|
||||||
|
this.append();
|
||||||
|
}
|
||||||
|
|
||||||
|
this.fetchIssueCount();
|
||||||
|
}
|
||||||
|
|
||||||
|
Learn.prototype.append = function (opts) {
|
||||||
|
var aside = document.createElement('aside');
|
||||||
|
aside.innerHTML = _.template(this.template, this.frameworkJSON);
|
||||||
|
aside.className = 'learn';
|
||||||
|
|
||||||
|
if (opts && opts.backend) {
|
||||||
|
// Remove demo link
|
||||||
|
var sourceLinks = aside.querySelector('.source-links');
|
||||||
|
var heading = sourceLinks.firstElementChild;
|
||||||
|
var sourceLink = sourceLinks.lastElementChild;
|
||||||
|
// Correct link path
|
||||||
|
var href = sourceLink.getAttribute('href');
|
||||||
|
sourceLink.setAttribute('href', href.substr(href.lastIndexOf('http')));
|
||||||
|
sourceLinks.innerHTML = heading.outerHTML + sourceLink.outerHTML;
|
||||||
|
} else {
|
||||||
|
// Localize demo links
|
||||||
|
var demoLinks = aside.querySelectorAll('.demo-link');
|
||||||
|
Array.prototype.forEach.call(demoLinks, function (demoLink) {
|
||||||
|
if (demoLink.getAttribute('href').substr(0, 4) !== 'http') {
|
||||||
|
demoLink.setAttribute('href', findRoot() + demoLink.getAttribute('href'));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
document.body.className = (document.body.className + ' learn-bar').trim();
|
||||||
|
document.body.insertAdjacentHTML('afterBegin', aside.outerHTML);
|
||||||
|
};
|
||||||
|
|
||||||
|
Learn.prototype.fetchIssueCount = function () {
|
||||||
|
var issueLink = document.getElementById('issue-count-link');
|
||||||
|
if (issueLink) {
|
||||||
|
var url = issueLink.href.replace('https://github.com', 'https://api.github.com/repos');
|
||||||
|
var xhr = new XMLHttpRequest();
|
||||||
|
xhr.open('GET', url, true);
|
||||||
|
xhr.onload = function (e) {
|
||||||
|
var parsedResponse = JSON.parse(e.target.responseText);
|
||||||
|
if (parsedResponse instanceof Array) {
|
||||||
|
var count = parsedResponse.length;
|
||||||
|
if (count !== 0) {
|
||||||
|
issueLink.innerHTML = 'This app has ' + count + ' open issues';
|
||||||
|
document.getElementById('issue-count').style.display = 'inline';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
xhr.send();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
redirect();
|
||||||
|
getFile('learn.json', Learn);
|
||||||
|
})();
|
||||||
@ -0,0 +1,49 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en" data-framework="javascript">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Crypt Todo</title>
|
||||||
|
<link rel="stylesheet" href="assets/todomvc-common/base.css">
|
||||||
|
<link rel="stylesheet" href="assets/todomvc-app-css/index.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<section class="todoapp">
|
||||||
|
<header class="header">
|
||||||
|
<h1>todos</h1>
|
||||||
|
<input class="new-todo" placeholder="What needs to be done?" autofocus>
|
||||||
|
</header>
|
||||||
|
<section class="main">
|
||||||
|
<input class="toggle-all" type="checkbox">
|
||||||
|
<label for="toggle-all">Mark all as complete</label>
|
||||||
|
<ul class="todo-list"></ul>
|
||||||
|
</section>
|
||||||
|
<footer class="footer">
|
||||||
|
<span class="todo-count"></span>
|
||||||
|
<ul class="filters">
|
||||||
|
<li>
|
||||||
|
<a href="#/" class="selected">All</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#/active">Active</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#/completed">Completed</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<button class="clear-completed">Clear completed</button>
|
||||||
|
</footer>
|
||||||
|
</section>
|
||||||
|
<footer class="info">
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
<script src="assets/todomvc-common/base.js"></script>
|
||||||
|
<script src="js/helpers.js"></script>
|
||||||
|
<script src="js/store.js"></script>
|
||||||
|
<script src="js/model.js"></script>
|
||||||
|
<script src="js/template.js"></script>
|
||||||
|
<script src="js/view.js"></script>
|
||||||
|
<script src="js/controller.js"></script>
|
||||||
|
<script src="js/app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
/*global app, $on */
|
||||||
|
(function () {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sets up a brand new Todo list.
|
||||||
|
*
|
||||||
|
* @param {string} name The name of your new to do list.
|
||||||
|
*/
|
||||||
|
function Todo(name) {
|
||||||
|
this.storage = new app.Store(name);
|
||||||
|
this.model = new app.Model(this.storage);
|
||||||
|
this.template = new app.Template();
|
||||||
|
this.view = new app.View(this.template);
|
||||||
|
this.controller = new app.Controller(this.model, this.view);
|
||||||
|
}
|
||||||
|
|
||||||
|
var todo = new Todo('todos-vanillajs');
|
||||||
|
|
||||||
|
function setView() {
|
||||||
|
todo.controller.setView(document.location.hash);
|
||||||
|
}
|
||||||
|
$on(window, 'load', setView);
|
||||||
|
$on(window, 'hashchange', setView);
|
||||||
|
})();
|
||||||
@ -0,0 +1,270 @@
|
|||||||
|
(function (window) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Takes a model and view and acts as the controller between them
|
||||||
|
*
|
||||||
|
* @constructor
|
||||||
|
* @param {object} model The model instance
|
||||||
|
* @param {object} view The view instance
|
||||||
|
*/
|
||||||
|
function Controller(model, view) {
|
||||||
|
var self = this;
|
||||||
|
self.model = model;
|
||||||
|
self.view = view;
|
||||||
|
|
||||||
|
self.view.bind('newTodo', function (title) {
|
||||||
|
self.addItem(title);
|
||||||
|
});
|
||||||
|
|
||||||
|
self.view.bind('itemEdit', function (item) {
|
||||||
|
self.editItem(item.id);
|
||||||
|
});
|
||||||
|
|
||||||
|
self.view.bind('itemEditDone', function (item) {
|
||||||
|
self.editItemSave(item.id, item.title);
|
||||||
|
});
|
||||||
|
|
||||||
|
self.view.bind('itemEditCancel', function (item) {
|
||||||
|
self.editItemCancel(item.id);
|
||||||
|
});
|
||||||
|
|
||||||
|
self.view.bind('itemRemove', function (item) {
|
||||||
|
self.removeItem(item.id);
|
||||||
|
});
|
||||||
|
|
||||||
|
self.view.bind('itemToggle', function (item) {
|
||||||
|
self.toggleComplete(item.id, item.completed);
|
||||||
|
});
|
||||||
|
|
||||||
|
self.view.bind('removeCompleted', function () {
|
||||||
|
self.removeCompletedItems();
|
||||||
|
});
|
||||||
|
|
||||||
|
self.view.bind('toggleAll', function (status) {
|
||||||
|
self.toggleAll(status.completed);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Loads and initialises the view
|
||||||
|
*
|
||||||
|
* @param {string} '' | 'active' | 'completed'
|
||||||
|
*/
|
||||||
|
Controller.prototype.setView = function (locationHash) {
|
||||||
|
var route = locationHash.split('/')[1];
|
||||||
|
var page = route || '';
|
||||||
|
this._updateFilterState(page);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* An event to fire on load. Will get all items and display them in the
|
||||||
|
* todo-list
|
||||||
|
*/
|
||||||
|
Controller.prototype.showAll = function () {
|
||||||
|
var self = this;
|
||||||
|
self.model.read(function (data) {
|
||||||
|
self.view.render('showEntries', data);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Renders all active tasks
|
||||||
|
*/
|
||||||
|
Controller.prototype.showActive = function () {
|
||||||
|
var self = this;
|
||||||
|
self.model.read({ completed: false }, function (data) {
|
||||||
|
self.view.render('showEntries', data);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Renders all completed tasks
|
||||||
|
*/
|
||||||
|
Controller.prototype.showCompleted = function () {
|
||||||
|
var self = this;
|
||||||
|
self.model.read({ completed: true }, function (data) {
|
||||||
|
self.view.render('showEntries', data);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* An event to fire whenever you want to add an item. Simply pass in the event
|
||||||
|
* object and it'll handle the DOM insertion and saving of the new item.
|
||||||
|
*/
|
||||||
|
Controller.prototype.addItem = function (title) {
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
if (title.trim() === '') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
self.model.create(title, function () {
|
||||||
|
self.view.render('clearNewTodo');
|
||||||
|
self._filter(true);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Triggers the item editing mode.
|
||||||
|
*/
|
||||||
|
Controller.prototype.editItem = function (id) {
|
||||||
|
var self = this;
|
||||||
|
self.model.read(id, function (data) {
|
||||||
|
self.view.render('editItem', {id: id, title: data[0].title});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Finishes the item editing mode successfully.
|
||||||
|
*/
|
||||||
|
Controller.prototype.editItemSave = function (id, title) {
|
||||||
|
var self = this;
|
||||||
|
title = title.trim();
|
||||||
|
|
||||||
|
if (title.length !== 0) {
|
||||||
|
self.model.update(id, {title: title}, function () {
|
||||||
|
self.view.render('editItemDone', {id: id, title: title});
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
self.removeItem(id);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Cancels the item editing mode.
|
||||||
|
*/
|
||||||
|
Controller.prototype.editItemCancel = function (id) {
|
||||||
|
var self = this;
|
||||||
|
self.model.read(id, function (data) {
|
||||||
|
self.view.render('editItemDone', {id: id, title: data[0].title});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* By giving it an ID it'll find the DOM element matching that ID,
|
||||||
|
* remove it from the DOM and also remove it from storage.
|
||||||
|
*
|
||||||
|
* @param {number} id The ID of the item to remove from the DOM and
|
||||||
|
* storage
|
||||||
|
*/
|
||||||
|
Controller.prototype.removeItem = function (id) {
|
||||||
|
var self = this;
|
||||||
|
self.model.remove(id, function () {
|
||||||
|
self.view.render('removeItem', id);
|
||||||
|
});
|
||||||
|
|
||||||
|
self._filter();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Will remove all completed items from the DOM and storage.
|
||||||
|
*/
|
||||||
|
Controller.prototype.removeCompletedItems = function () {
|
||||||
|
var self = this;
|
||||||
|
self.model.read({ completed: true }, function (data) {
|
||||||
|
data.forEach(function (item) {
|
||||||
|
self.removeItem(item.id);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
self._filter();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Give it an ID of a model and a checkbox and it will update the item
|
||||||
|
* in storage based on the checkbox's state.
|
||||||
|
*
|
||||||
|
* @param {number} id The ID of the element to complete or uncomplete
|
||||||
|
* @param {object} checkbox The checkbox to check the state of complete
|
||||||
|
* or not
|
||||||
|
* @param {boolean|undefined} silent Prevent re-filtering the todo items
|
||||||
|
*/
|
||||||
|
Controller.prototype.toggleComplete = function (id, completed, silent) {
|
||||||
|
var self = this;
|
||||||
|
self.model.update(id, { completed: completed }, function () {
|
||||||
|
self.view.render('elementComplete', {
|
||||||
|
id: id,
|
||||||
|
completed: completed
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!silent) {
|
||||||
|
self._filter();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Will toggle ALL checkboxes' on/off state and completeness of models.
|
||||||
|
* Just pass in the event object.
|
||||||
|
*/
|
||||||
|
Controller.prototype.toggleAll = function (completed) {
|
||||||
|
var self = this;
|
||||||
|
self.model.read({ completed: !completed }, function (data) {
|
||||||
|
data.forEach(function (item) {
|
||||||
|
self.toggleComplete(item.id, completed, true);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
self._filter();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Updates the pieces of the page which change depending on the remaining
|
||||||
|
* number of todos.
|
||||||
|
*/
|
||||||
|
Controller.prototype._updateCount = function () {
|
||||||
|
var self = this;
|
||||||
|
self.model.getCount(function (todos) {
|
||||||
|
self.view.render('updateElementCount', todos.active);
|
||||||
|
self.view.render('clearCompletedButton', {
|
||||||
|
completed: todos.completed,
|
||||||
|
visible: todos.completed > 0
|
||||||
|
});
|
||||||
|
|
||||||
|
self.view.render('toggleAll', {checked: todos.completed === todos.total});
|
||||||
|
self.view.render('contentBlockVisibility', {visible: todos.total > 0});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Re-filters the todo items, based on the active route.
|
||||||
|
* @param {boolean|undefined} force forces a re-painting of todo items.
|
||||||
|
*/
|
||||||
|
Controller.prototype._filter = function (force) {
|
||||||
|
var activeRoute = this._activeRoute.charAt(0).toUpperCase() + this._activeRoute.substr(1);
|
||||||
|
|
||||||
|
// Update the elements on the page, which change with each completed todo
|
||||||
|
this._updateCount();
|
||||||
|
|
||||||
|
// If the last active route isn't "All", or we're switching routes, we
|
||||||
|
// re-create the todo item elements, calling:
|
||||||
|
// this.show[All|Active|Completed]();
|
||||||
|
if (force || this._lastActiveRoute !== 'All' || this._lastActiveRoute !== activeRoute) {
|
||||||
|
this['show' + activeRoute]();
|
||||||
|
}
|
||||||
|
|
||||||
|
this._lastActiveRoute = activeRoute;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Simply updates the filter nav's selected states
|
||||||
|
*/
|
||||||
|
Controller.prototype._updateFilterState = function (currentPage) {
|
||||||
|
// Store a reference to the active route, allowing us to re-filter todo
|
||||||
|
// items as they are marked complete or incomplete.
|
||||||
|
this._activeRoute = currentPage;
|
||||||
|
|
||||||
|
if (currentPage === '') {
|
||||||
|
this._activeRoute = 'All';
|
||||||
|
}
|
||||||
|
|
||||||
|
this._filter();
|
||||||
|
|
||||||
|
this.view.render('setFilter', currentPage);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Export to window
|
||||||
|
window.app = window.app || {};
|
||||||
|
window.app.Controller = Controller;
|
||||||
|
})(window);
|
||||||
@ -0,0 +1,52 @@
|
|||||||
|
/*global NodeList */
|
||||||
|
(function (window) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
// Get element(s) by CSS selector:
|
||||||
|
window.qs = function (selector, scope) {
|
||||||
|
return (scope || document).querySelector(selector);
|
||||||
|
};
|
||||||
|
window.qsa = function (selector, scope) {
|
||||||
|
return (scope || document).querySelectorAll(selector);
|
||||||
|
};
|
||||||
|
|
||||||
|
// addEventListener wrapper:
|
||||||
|
window.$on = function (target, type, callback, useCapture) {
|
||||||
|
target.addEventListener(type, callback, !!useCapture);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Attach a handler to event for all elements that match the selector,
|
||||||
|
// now or in the future, based on a root element
|
||||||
|
window.$delegate = function (target, selector, type, handler) {
|
||||||
|
function dispatchEvent(event) {
|
||||||
|
var targetElement = event.target;
|
||||||
|
var potentialElements = window.qsa(selector, target);
|
||||||
|
var hasMatch = Array.prototype.indexOf.call(potentialElements, targetElement) >= 0;
|
||||||
|
|
||||||
|
if (hasMatch) {
|
||||||
|
handler.call(targetElement, event);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// https://developer.mozilla.org/en-US/docs/Web/Events/blur
|
||||||
|
var useCapture = type === 'blur' || type === 'focus';
|
||||||
|
|
||||||
|
window.$on(target, type, dispatchEvent, useCapture);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Find the element's parent with the given tag name:
|
||||||
|
// $parent(qs('a'), 'div');
|
||||||
|
window.$parent = function (element, tagName) {
|
||||||
|
if (!element.parentNode) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (element.parentNode.tagName.toLowerCase() === tagName.toLowerCase()) {
|
||||||
|
return element.parentNode;
|
||||||
|
}
|
||||||
|
return window.$parent(element.parentNode, tagName);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Allow for looping on nodes by chaining:
|
||||||
|
// qsa('.foo').forEach(function () {})
|
||||||
|
NodeList.prototype.forEach = Array.prototype.forEach;
|
||||||
|
})(window);
|
||||||
@ -0,0 +1,141 @@
|
|||||||
|
/*jshint eqeqeq:false */
|
||||||
|
(function (window) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Creates a new client side storage object and will create an empty
|
||||||
|
* collection if no collection already exists.
|
||||||
|
*
|
||||||
|
* @param {string} name The name of our DB we want to use
|
||||||
|
* @param {function} callback Our fake DB uses callbacks because in
|
||||||
|
* real life you probably would be making AJAX calls
|
||||||
|
*/
|
||||||
|
function Store(name, callback) {
|
||||||
|
callback = callback || function () {};
|
||||||
|
|
||||||
|
this._dbName = name;
|
||||||
|
|
||||||
|
if (!localStorage[name]) {
|
||||||
|
var data = {
|
||||||
|
todos: []
|
||||||
|
};
|
||||||
|
|
||||||
|
localStorage[name] = JSON.stringify(data);
|
||||||
|
}
|
||||||
|
|
||||||
|
callback.call(this, JSON.parse(localStorage[name]));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Finds items based on a query given as a JS object
|
||||||
|
*
|
||||||
|
* @param {object} query The query to match against (i.e. {foo: 'bar'})
|
||||||
|
* @param {function} callback The callback to fire when the query has
|
||||||
|
* completed running
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* db.find({foo: 'bar', hello: 'world'}, function (data) {
|
||||||
|
* // data will return any items that have foo: bar and
|
||||||
|
* // hello: world in their properties
|
||||||
|
* });
|
||||||
|
*/
|
||||||
|
Store.prototype.find = function (query, callback) {
|
||||||
|
if (!callback) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var todos = JSON.parse(localStorage[this._dbName]).todos;
|
||||||
|
|
||||||
|
callback.call(this, todos.filter(function (todo) {
|
||||||
|
for (var q in query) {
|
||||||
|
if (query[q] !== todo[q]) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Will retrieve all data from the collection
|
||||||
|
*
|
||||||
|
* @param {function} callback The callback to fire upon retrieving data
|
||||||
|
*/
|
||||||
|
Store.prototype.findAll = function (callback) {
|
||||||
|
callback = callback || function () {};
|
||||||
|
callback.call(this, JSON.parse(localStorage[this._dbName]).todos);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Will save the given data to the DB. If no item exists it will create a new
|
||||||
|
* item, otherwise it'll simply update an existing item's properties
|
||||||
|
*
|
||||||
|
* @param {object} updateData The data to save back into the DB
|
||||||
|
* @param {function} callback The callback to fire after saving
|
||||||
|
* @param {number} id An optional param to enter an ID of an item to update
|
||||||
|
*/
|
||||||
|
Store.prototype.save = function (updateData, callback, id) {
|
||||||
|
var data = JSON.parse(localStorage[this._dbName]);
|
||||||
|
var todos = data.todos;
|
||||||
|
|
||||||
|
callback = callback || function () {};
|
||||||
|
|
||||||
|
// If an ID was actually given, find the item and update each property
|
||||||
|
if (id) {
|
||||||
|
for (var i = 0; i < todos.length; i++) {
|
||||||
|
if (todos[i].id === id) {
|
||||||
|
for (var key in updateData) {
|
||||||
|
todos[i][key] = updateData[key];
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
localStorage[this._dbName] = JSON.stringify(data);
|
||||||
|
callback.call(this, todos);
|
||||||
|
} else {
|
||||||
|
// Generate an ID
|
||||||
|
updateData.id = new Date().getTime();
|
||||||
|
|
||||||
|
todos.push(updateData);
|
||||||
|
localStorage[this._dbName] = JSON.stringify(data);
|
||||||
|
callback.call(this, [updateData]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Will remove an item from the Store based on its ID
|
||||||
|
*
|
||||||
|
* @param {number} id The ID of the item you want to remove
|
||||||
|
* @param {function} callback The callback to fire after saving
|
||||||
|
*/
|
||||||
|
Store.prototype.remove = function (id, callback) {
|
||||||
|
var data = JSON.parse(localStorage[this._dbName]);
|
||||||
|
var todos = data.todos;
|
||||||
|
|
||||||
|
for (var i = 0; i < todos.length; i++) {
|
||||||
|
if (todos[i].id == id) {
|
||||||
|
todos.splice(i, 1);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
localStorage[this._dbName] = JSON.stringify(data);
|
||||||
|
callback.call(this, todos);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Will drop all storage and start fresh
|
||||||
|
*
|
||||||
|
* @param {function} callback The callback to fire after dropping the data
|
||||||
|
*/
|
||||||
|
Store.prototype.drop = function (callback) {
|
||||||
|
var data = {todos: []};
|
||||||
|
localStorage[this._dbName] = JSON.stringify(data);
|
||||||
|
callback.call(this, data.todos);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Export to window
|
||||||
|
window.app = window.app || {};
|
||||||
|
window.app.Store = Store;
|
||||||
|
})(window);
|
||||||
@ -0,0 +1,114 @@
|
|||||||
|
/*jshint laxbreak:true */
|
||||||
|
(function (window) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var htmlEscapes = {
|
||||||
|
'&': '&',
|
||||||
|
'<': '<',
|
||||||
|
'>': '>',
|
||||||
|
'"': '"',
|
||||||
|
'\'': ''',
|
||||||
|
'`': '`'
|
||||||
|
};
|
||||||
|
|
||||||
|
var escapeHtmlChar = function (chr) {
|
||||||
|
return htmlEscapes[chr];
|
||||||
|
};
|
||||||
|
|
||||||
|
var reUnescapedHtml = /[&<>"'`]/g;
|
||||||
|
var reHasUnescapedHtml = new RegExp(reUnescapedHtml.source);
|
||||||
|
|
||||||
|
var escape = function (string) {
|
||||||
|
return (string && reHasUnescapedHtml.test(string))
|
||||||
|
? string.replace(reUnescapedHtml, escapeHtmlChar)
|
||||||
|
: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sets up defaults for all the Template methods such as a default template
|
||||||
|
*
|
||||||
|
* @constructor
|
||||||
|
*/
|
||||||
|
function Template() {
|
||||||
|
this.defaultTemplate
|
||||||
|
= '<li data-id="{{id}}" class="{{completed}}">'
|
||||||
|
+ '<div class="view">'
|
||||||
|
+ '<input class="toggle" type="checkbox" {{checked}}>'
|
||||||
|
+ '<label>{{title}}</label>'
|
||||||
|
+ '<button class="destroy"></button>'
|
||||||
|
+ '</div>'
|
||||||
|
+ '</li>';
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Creates an <li> HTML string and returns it for placement in your app.
|
||||||
|
*
|
||||||
|
* NOTE: In real life you should be using a templating engine such as Mustache
|
||||||
|
* or Handlebars, however, this is a vanilla JS example.
|
||||||
|
*
|
||||||
|
* @param {object} data The object containing keys you want to find in the
|
||||||
|
* template to replace.
|
||||||
|
* @returns {string} HTML String of an <li> element
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* view.show({
|
||||||
|
* id: 1,
|
||||||
|
* title: "Hello World",
|
||||||
|
* completed: 0,
|
||||||
|
* });
|
||||||
|
*/
|
||||||
|
Template.prototype.show = function (data) {
|
||||||
|
var i = 0, l = data.length;
|
||||||
|
var view = '';
|
||||||
|
|
||||||
|
for (; i < l; i++) {
|
||||||
|
var template = this.defaultTemplate;
|
||||||
|
var completed = '';
|
||||||
|
var checked = '';
|
||||||
|
|
||||||
|
if (data[i].completed) {
|
||||||
|
completed = 'completed';
|
||||||
|
checked = 'checked';
|
||||||
|
}
|
||||||
|
|
||||||
|
template = template.replace('{{id}}', data[i].id);
|
||||||
|
template = template.replace('{{title}}', escape(data[i].title));
|
||||||
|
template = template.replace('{{completed}}', completed);
|
||||||
|
template = template.replace('{{checked}}', checked);
|
||||||
|
|
||||||
|
view = view + template;
|
||||||
|
}
|
||||||
|
|
||||||
|
return view;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Displays a counter of how many to dos are left to complete
|
||||||
|
*
|
||||||
|
* @param {number} activeTodos The number of active todos.
|
||||||
|
* @returns {string} String containing the count
|
||||||
|
*/
|
||||||
|
Template.prototype.itemCounter = function (activeTodos) {
|
||||||
|
var plural = activeTodos === 1 ? '' : 's';
|
||||||
|
|
||||||
|
return '<strong>' + activeTodos + '</strong> item' + plural + ' left';
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Updates the text within the "Clear completed" button
|
||||||
|
*
|
||||||
|
* @param {[type]} completedTodos The number of completed todos.
|
||||||
|
* @returns {string} String containing the count
|
||||||
|
*/
|
||||||
|
Template.prototype.clearCompletedButton = function (completedTodos) {
|
||||||
|
if (completedTodos > 0) {
|
||||||
|
return 'Clear completed';
|
||||||
|
} else {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Export to window
|
||||||
|
window.app = window.app || {};
|
||||||
|
window.app.Template = Template;
|
||||||
|
})(window);
|
||||||
@ -0,0 +1,219 @@
|
|||||||
|
/*global qs, qsa, $on, $parent, $delegate */
|
||||||
|
|
||||||
|
(function (window) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* View that abstracts away the browser's DOM completely.
|
||||||
|
* It has two simple entry points:
|
||||||
|
*
|
||||||
|
* - bind(eventName, handler)
|
||||||
|
* Takes a todo application event and registers the handler
|
||||||
|
* - render(command, parameterObject)
|
||||||
|
* Renders the given command with the options
|
||||||
|
*/
|
||||||
|
function View(template) {
|
||||||
|
this.template = template;
|
||||||
|
|
||||||
|
this.ENTER_KEY = 13;
|
||||||
|
this.ESCAPE_KEY = 27;
|
||||||
|
|
||||||
|
this.$todoList = qs('.todo-list');
|
||||||
|
this.$todoItemCounter = qs('.todo-count');
|
||||||
|
this.$clearCompleted = qs('.clear-completed');
|
||||||
|
this.$main = qs('.main');
|
||||||
|
this.$footer = qs('.footer');
|
||||||
|
this.$toggleAll = qs('.toggle-all');
|
||||||
|
this.$newTodo = qs('.new-todo');
|
||||||
|
}
|
||||||
|
|
||||||
|
View.prototype._removeItem = function (id) {
|
||||||
|
var elem = qs('[data-id="' + id + '"]');
|
||||||
|
|
||||||
|
if (elem) {
|
||||||
|
this.$todoList.removeChild(elem);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
View.prototype._clearCompletedButton = function (completedCount, visible) {
|
||||||
|
this.$clearCompleted.innerHTML = this.template.clearCompletedButton(completedCount);
|
||||||
|
this.$clearCompleted.style.display = visible ? 'block' : 'none';
|
||||||
|
};
|
||||||
|
|
||||||
|
View.prototype._setFilter = function (currentPage) {
|
||||||
|
qs('.filters .selected').className = '';
|
||||||
|
qs('.filters [href="#/' + currentPage + '"]').className = 'selected';
|
||||||
|
};
|
||||||
|
|
||||||
|
View.prototype._elementComplete = function (id, completed) {
|
||||||
|
var listItem = qs('[data-id="' + id + '"]');
|
||||||
|
|
||||||
|
if (!listItem) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
listItem.className = completed ? 'completed' : '';
|
||||||
|
|
||||||
|
// In case it was toggled from an event and not by clicking the checkbox
|
||||||
|
qs('input', listItem).checked = completed;
|
||||||
|
};
|
||||||
|
|
||||||
|
View.prototype._editItem = function (id, title) {
|
||||||
|
var listItem = qs('[data-id="' + id + '"]');
|
||||||
|
|
||||||
|
if (!listItem) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
listItem.className = listItem.className + ' editing';
|
||||||
|
|
||||||
|
var input = document.createElement('input');
|
||||||
|
input.className = 'edit';
|
||||||
|
|
||||||
|
listItem.appendChild(input);
|
||||||
|
input.focus();
|
||||||
|
input.value = title;
|
||||||
|
};
|
||||||
|
|
||||||
|
View.prototype._editItemDone = function (id, title) {
|
||||||
|
var listItem = qs('[data-id="' + id + '"]');
|
||||||
|
|
||||||
|
if (!listItem) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var input = qs('input.edit', listItem);
|
||||||
|
listItem.removeChild(input);
|
||||||
|
|
||||||
|
listItem.className = listItem.className.replace('editing', '');
|
||||||
|
|
||||||
|
qsa('label', listItem).forEach(function (label) {
|
||||||
|
label.textContent = title;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
View.prototype.render = function (viewCmd, parameter) {
|
||||||
|
var self = this;
|
||||||
|
var viewCommands = {
|
||||||
|
showEntries: function () {
|
||||||
|
self.$todoList.innerHTML = self.template.show(parameter);
|
||||||
|
},
|
||||||
|
removeItem: function () {
|
||||||
|
self._removeItem(parameter);
|
||||||
|
},
|
||||||
|
updateElementCount: function () {
|
||||||
|
self.$todoItemCounter.innerHTML = self.template.itemCounter(parameter);
|
||||||
|
},
|
||||||
|
clearCompletedButton: function () {
|
||||||
|
self._clearCompletedButton(parameter.completed, parameter.visible);
|
||||||
|
},
|
||||||
|
contentBlockVisibility: function () {
|
||||||
|
self.$main.style.display = self.$footer.style.display = parameter.visible ? 'block' : 'none';
|
||||||
|
},
|
||||||
|
toggleAll: function () {
|
||||||
|
self.$toggleAll.checked = parameter.checked;
|
||||||
|
},
|
||||||
|
setFilter: function () {
|
||||||
|
self._setFilter(parameter);
|
||||||
|
},
|
||||||
|
clearNewTodo: function () {
|
||||||
|
self.$newTodo.value = '';
|
||||||
|
},
|
||||||
|
elementComplete: function () {
|
||||||
|
self._elementComplete(parameter.id, parameter.completed);
|
||||||
|
},
|
||||||
|
editItem: function () {
|
||||||
|
self._editItem(parameter.id, parameter.title);
|
||||||
|
},
|
||||||
|
editItemDone: function () {
|
||||||
|
self._editItemDone(parameter.id, parameter.title);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
viewCommands[viewCmd]();
|
||||||
|
};
|
||||||
|
|
||||||
|
View.prototype._itemId = function (element) {
|
||||||
|
var li = $parent(element, 'li');
|
||||||
|
return parseInt(li.dataset.id, 10);
|
||||||
|
};
|
||||||
|
|
||||||
|
View.prototype._bindItemEditDone = function (handler) {
|
||||||
|
var self = this;
|
||||||
|
$delegate(self.$todoList, 'li .edit', 'blur', function () {
|
||||||
|
if (!this.dataset.iscanceled) {
|
||||||
|
handler({
|
||||||
|
id: self._itemId(this),
|
||||||
|
title: this.value
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$delegate(self.$todoList, 'li .edit', 'keypress', function (event) {
|
||||||
|
if (event.keyCode === self.ENTER_KEY) {
|
||||||
|
// Remove the cursor from the input when you hit enter just like if it
|
||||||
|
// were a real form
|
||||||
|
this.blur();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
View.prototype._bindItemEditCancel = function (handler) {
|
||||||
|
var self = this;
|
||||||
|
$delegate(self.$todoList, 'li .edit', 'keyup', function (event) {
|
||||||
|
if (event.keyCode === self.ESCAPE_KEY) {
|
||||||
|
this.dataset.iscanceled = true;
|
||||||
|
this.blur();
|
||||||
|
|
||||||
|
handler({id: self._itemId(this)});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
View.prototype.bind = function (event, handler) {
|
||||||
|
var self = this;
|
||||||
|
if (event === 'newTodo') {
|
||||||
|
$on(self.$newTodo, 'change', function () {
|
||||||
|
handler(self.$newTodo.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
} else if (event === 'removeCompleted') {
|
||||||
|
$on(self.$clearCompleted, 'click', function () {
|
||||||
|
handler();
|
||||||
|
});
|
||||||
|
|
||||||
|
} else if (event === 'toggleAll') {
|
||||||
|
$on(self.$toggleAll, 'click', function () {
|
||||||
|
handler({completed: this.checked});
|
||||||
|
});
|
||||||
|
|
||||||
|
} else if (event === 'itemEdit') {
|
||||||
|
$delegate(self.$todoList, 'li label', 'dblclick', function () {
|
||||||
|
handler({id: self._itemId(this)});
|
||||||
|
});
|
||||||
|
|
||||||
|
} else if (event === 'itemRemove') {
|
||||||
|
$delegate(self.$todoList, '.destroy', 'click', function () {
|
||||||
|
handler({id: self._itemId(this)});
|
||||||
|
});
|
||||||
|
|
||||||
|
} else if (event === 'itemToggle') {
|
||||||
|
$delegate(self.$todoList, '.toggle', 'click', function () {
|
||||||
|
handler({
|
||||||
|
id: self._itemId(this),
|
||||||
|
completed: this.checked
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
} else if (event === 'itemEditDone') {
|
||||||
|
self._bindItemEditDone(handler);
|
||||||
|
|
||||||
|
} else if (event === 'itemEditCancel') {
|
||||||
|
self._bindItemEditCancel(handler);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Export to window
|
||||||
|
window.app = window.app || {};
|
||||||
|
window.app.View = View;
|
||||||
|
}(window));
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html class="cp pad">
|
||||||
|
<head>
|
||||||
|
<title>CryptPad</title>
|
||||||
|
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<script async data-bootload="/customize/template.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
|
||||||
|
<style>
|
||||||
|
html, body {
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
#pad-iframe {
|
||||||
|
position:fixed;
|
||||||
|
top:0px;
|
||||||
|
left:0px;
|
||||||
|
bottom:0px;
|
||||||
|
right:0px;
|
||||||
|
width:100%;
|
||||||
|
height:100%;
|
||||||
|
border:none;
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
overflow:hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<iframe id="pad-iframe"></iframe><script src="/common/noscriptfix.js"></script>
|
||||||
|
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
|
||||||
|
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
|
||||||
|
<script async data-bootload="/todo/inner.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
|
||||||
|
<style>.loading-hidden, .loading-hidden * {display: none !important;}</style>
|
||||||
|
</head>
|
||||||
|
<body class="loading-hidden">
|
||||||
|
<div id="toolbar" class="toolbar-container"></div>
|
||||||
|
<div id="container">
|
||||||
|
<div class="cp-create-form">
|
||||||
|
<input type="text" id="newTodoName" data-localization-placeholder="todo_newTodoNamePlaceholder" />
|
||||||
|
<button class="btn btn-success fa fa-plus" data-localization-title="todo_newTodoNameTitle"></button>
|
||||||
|
</div>
|
||||||
|
<div id="tasksList"></div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
define([
|
||||||
|
'jquery',
|
||||||
|
'less!/bower_components/components-font-awesome/css/font-awesome.min.css',
|
||||||
|
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
|
||||||
|
'less!/todo/todo.less',
|
||||||
|
//'less!/customize/src/less/cryptpad.less',
|
||||||
|
'less!/customize/src/less/toolbar.less',
|
||||||
|
], function ($) {
|
||||||
|
$('.loading-hidden').removeClass('loading-hidden');
|
||||||
|
// dirty hack to get rid the flash of the lock background
|
||||||
|
/*
|
||||||
|
setTimeout(function () {
|
||||||
|
$('#app').addClass('ready');
|
||||||
|
}, 100);*/
|
||||||
|
});
|
||||||
@ -0,0 +1,229 @@
|
|||||||
|
define([
|
||||||
|
'jquery',
|
||||||
|
'/bower_components/chainpad-crypto/crypto.js',
|
||||||
|
'/bower_components/chainpad-listmap/chainpad-listmap.js',
|
||||||
|
'/common/toolbar2.js',
|
||||||
|
'/common/cryptpad-common.js',
|
||||||
|
'/todo/todo.js',
|
||||||
|
|
||||||
|
//'/common/media-tag.js',
|
||||||
|
//'/bower_components/file-saver/FileSaver.min.js',
|
||||||
|
|
||||||
|
'less!/bower_components/components-font-awesome/css/font-awesome.min.css',
|
||||||
|
'less!/customize/src/less/cryptpad.less',
|
||||||
|
], function ($, Crypto, Listmap, Toolbar, Cryptpad, Todo) {
|
||||||
|
var Messages = Cryptpad.Messages;
|
||||||
|
|
||||||
|
var APP = window.APP = {};
|
||||||
|
$(function () {
|
||||||
|
|
||||||
|
var $iframe = $('#pad-iframe').contents();
|
||||||
|
var $body = $iframe.find('body');
|
||||||
|
var ifrw = $('#pad-iframe')[0].contentWindow;
|
||||||
|
var $list = $iframe.find('#tasksList');
|
||||||
|
|
||||||
|
var removeTips = function () {
|
||||||
|
Cryptpad.clearTooltips();
|
||||||
|
};
|
||||||
|
|
||||||
|
var onReady = function () {
|
||||||
|
|
||||||
|
var todo = Todo.init(APP.lm.proxy, Cryptpad);
|
||||||
|
|
||||||
|
var deleteTask = function(id) {
|
||||||
|
todo.remove(id);
|
||||||
|
|
||||||
|
var $els = $list.find('.cp-task').filter(function (i, el) {
|
||||||
|
return $(el).data('id') === id;
|
||||||
|
});
|
||||||
|
$els.fadeOut(null, function () {
|
||||||
|
$els.remove();
|
||||||
|
removeTips();
|
||||||
|
});
|
||||||
|
//APP.display();
|
||||||
|
};
|
||||||
|
|
||||||
|
// TODO make this actually work, and scroll to bottom...
|
||||||
|
var scrollTo = function (t) {
|
||||||
|
var $list = $iframe.find('#tasksList');
|
||||||
|
|
||||||
|
$list.animate({
|
||||||
|
scrollTop: t,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
scrollTo = scrollTo;
|
||||||
|
|
||||||
|
var makeCheckbox = function (id, cb) {
|
||||||
|
var entry = APP.lm.proxy.data[id];
|
||||||
|
var checked = entry.state === 1? 'cp-task-checkbox-checked fa-check-square-o': 'cp-task-checkbox-unchecked fa-square-o';
|
||||||
|
|
||||||
|
var title = entry.state === 1?
|
||||||
|
Messages.todo_markAsIncompleteTitle:
|
||||||
|
Messages.todo_markAsCompleteTitle;
|
||||||
|
title = title;
|
||||||
|
|
||||||
|
removeTips();
|
||||||
|
return $('<span>', {
|
||||||
|
'class': 'cp-task-checkbox fa ' + checked,
|
||||||
|
//title: title,
|
||||||
|
}).on('click', function () {
|
||||||
|
entry.state = (entry.state + 1) % 2;
|
||||||
|
if (typeof(cb) === 'function') {
|
||||||
|
cb(entry.state);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
var addTaskUI = function (el, animate) {
|
||||||
|
var $taskDiv = $('<div>', {
|
||||||
|
'class': 'cp-task'
|
||||||
|
});
|
||||||
|
if (animate) {
|
||||||
|
$taskDiv.prependTo($list);
|
||||||
|
} else {
|
||||||
|
$taskDiv.appendTo($list);
|
||||||
|
}
|
||||||
|
$taskDiv.data('id', el);
|
||||||
|
|
||||||
|
makeCheckbox(el, function (/*state*/) {
|
||||||
|
APP.display();
|
||||||
|
})
|
||||||
|
.appendTo($taskDiv);
|
||||||
|
|
||||||
|
var entry = APP.lm.proxy.data[el];
|
||||||
|
|
||||||
|
if (entry.state) {
|
||||||
|
$taskDiv.addClass('cp-task-complete');
|
||||||
|
}
|
||||||
|
|
||||||
|
$('<span>', { 'class': 'cp-task-text' })
|
||||||
|
.text(entry.task)
|
||||||
|
.appendTo($taskDiv);
|
||||||
|
/*$('<span>', { 'class': 'cp-task-date' })
|
||||||
|
.text(new Date(entry.ctime).toLocaleString())
|
||||||
|
.appendTo($taskDiv);*/
|
||||||
|
$('<button>', {
|
||||||
|
'class': 'fa fa-times cp-task-remove btn btn-danger',
|
||||||
|
title: Messages.todo_removeTaskTitle,
|
||||||
|
}).appendTo($taskDiv).on('click', function() {
|
||||||
|
deleteTask(el);
|
||||||
|
});
|
||||||
|
|
||||||
|
if (animate) {
|
||||||
|
$taskDiv.hide();
|
||||||
|
window.setTimeout(function () {
|
||||||
|
// ???
|
||||||
|
$taskDiv.fadeIn();
|
||||||
|
}, 0);
|
||||||
|
}
|
||||||
|
removeTips();
|
||||||
|
};
|
||||||
|
var display = APP.display = function () {
|
||||||
|
$list.empty();
|
||||||
|
removeTips();
|
||||||
|
APP.lm.proxy.order.forEach(function (el) {
|
||||||
|
addTaskUI(el);
|
||||||
|
});
|
||||||
|
//scrollTo('300px');
|
||||||
|
};
|
||||||
|
|
||||||
|
var addTask = function () {
|
||||||
|
var $input = $iframe.find('#newTodoName');
|
||||||
|
// if the input is empty after removing leading and trailing spaces
|
||||||
|
// don't create a new entry
|
||||||
|
if (!$input.val().trim()) { return; }
|
||||||
|
|
||||||
|
var obj = {
|
||||||
|
"state": 0,
|
||||||
|
"task": $input.val(),
|
||||||
|
"ctime": +new Date(),
|
||||||
|
"mtime": +new Date()
|
||||||
|
};
|
||||||
|
|
||||||
|
var id = Cryptpad.createChannelId();
|
||||||
|
todo.add(id, obj);
|
||||||
|
|
||||||
|
$input.val("");
|
||||||
|
addTaskUI(id, true);
|
||||||
|
//display();
|
||||||
|
};
|
||||||
|
|
||||||
|
var $formSubmit = $iframe.find('.cp-create-form button').on('click', addTask);
|
||||||
|
$iframe.find('#newTodoName').on('keypress', function (e) {
|
||||||
|
switch (e.which) {
|
||||||
|
case 13:
|
||||||
|
$formSubmit.click();
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
console.log(e.which);
|
||||||
|
}
|
||||||
|
}).focus();
|
||||||
|
|
||||||
|
var editTask = function () {
|
||||||
|
|
||||||
|
};
|
||||||
|
editTask = editTask;
|
||||||
|
|
||||||
|
display();
|
||||||
|
Cryptpad.removeLoadingScreen();
|
||||||
|
};
|
||||||
|
|
||||||
|
var onInit = function () {
|
||||||
|
Cryptpad.addLoadingScreen();
|
||||||
|
|
||||||
|
$body.on('dragover', function (e) { e.preventDefault(); });
|
||||||
|
$body.on('drop', function (e) { e.preventDefault(); });
|
||||||
|
|
||||||
|
var Title;
|
||||||
|
var $bar = $iframe.find('.toolbar-container');
|
||||||
|
|
||||||
|
Title = Cryptpad.createTitle({}, function(){}, Cryptpad);
|
||||||
|
|
||||||
|
var configTb = {
|
||||||
|
displayed: ['useradmin', 'newpad', 'limit', 'upgrade', 'pageTitle'],
|
||||||
|
ifrw: ifrw,
|
||||||
|
common: Cryptpad,
|
||||||
|
//hideDisplayName: true,
|
||||||
|
$container: $bar,
|
||||||
|
pageTitle: Messages.todo_title
|
||||||
|
};
|
||||||
|
|
||||||
|
APP.toolbar = Toolbar.create(configTb);
|
||||||
|
APP.toolbar.$rightside.html(''); // Remove the drawer if we don't use it to hide the toolbar
|
||||||
|
};
|
||||||
|
|
||||||
|
var createTodo = function() {
|
||||||
|
var obj = Cryptpad.getProxy();
|
||||||
|
var hash = Cryptpad.createRandomHash();
|
||||||
|
|
||||||
|
if(obj.todo) {
|
||||||
|
hash = obj.todo;
|
||||||
|
} else {
|
||||||
|
obj.todo = hash;
|
||||||
|
}
|
||||||
|
|
||||||
|
var secret = Cryptpad.getSecrets('todo', hash);
|
||||||
|
|
||||||
|
var listmapConfig = {
|
||||||
|
data: {},
|
||||||
|
websocketURL: Cryptpad.getWebsocketURL(),
|
||||||
|
channel: secret.channel,
|
||||||
|
validateKey: secret.keys.validateKey || undefined,
|
||||||
|
crypto: Crypto.createEncryptor(secret.keys),
|
||||||
|
userName: 'todo',
|
||||||
|
logLevel: 1,
|
||||||
|
};
|
||||||
|
|
||||||
|
var lm = APP.lm = Listmap.create(listmapConfig);
|
||||||
|
|
||||||
|
lm.proxy.on('create', onInit)
|
||||||
|
.on('ready', onReady);
|
||||||
|
};
|
||||||
|
|
||||||
|
Cryptpad.ready(function () {
|
||||||
|
createTodo();
|
||||||
|
Cryptpad.reportAppUsage();
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,83 @@
|
|||||||
|
define([
|
||||||
|
|
||||||
|
], function () {
|
||||||
|
var Todo = {};
|
||||||
|
var Cryptpad;
|
||||||
|
|
||||||
|
/* data model
|
||||||
|
{
|
||||||
|
"order": [
|
||||||
|
"123456789abcdef0",
|
||||||
|
"23456789abcdef01",
|
||||||
|
"0123456789abcedf"
|
||||||
|
],
|
||||||
|
"data": {
|
||||||
|
"0123456789abcedf": {
|
||||||
|
"state": 0, // used to sort completed elements
|
||||||
|
"task": "pewpewpew",
|
||||||
|
"ctime": +new Date(), // used to display chronologically
|
||||||
|
"mtime": +new Date(), // used to display recent actions
|
||||||
|
// "deadline": +new Date() + 1000 * 60 * 60 * 24 * 7
|
||||||
|
},
|
||||||
|
"123456789abcdef0": {},
|
||||||
|
"23456789abcdef01": {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
var val = function (proxy, id, k, v) {
|
||||||
|
var el = proxy.data[id];
|
||||||
|
if (!el) {
|
||||||
|
throw new Error('expected an element');
|
||||||
|
}
|
||||||
|
if (typeof(v) === 'function') { el[k] = v(el[k]); }
|
||||||
|
else { el[k] = v; }
|
||||||
|
return el[k];
|
||||||
|
};
|
||||||
|
|
||||||
|
var initialize = function (proxy) {
|
||||||
|
// run migration
|
||||||
|
if (typeof(proxy.data) !== 'object') { proxy.data = {}; }
|
||||||
|
if (!Array.isArray(proxy.order)) { proxy.order = []; }
|
||||||
|
if (typeof(proxy.type) !== 'string') { proxy.type = 'todo'; }
|
||||||
|
};
|
||||||
|
|
||||||
|
/* add (id, obj) push id to order, add object to data */
|
||||||
|
var add = function (proxy, id, obj) {
|
||||||
|
if (!Array.isArray(proxy.order)) {
|
||||||
|
throw new Error('expected an array');
|
||||||
|
}
|
||||||
|
proxy.order.unshift(id);
|
||||||
|
proxy.data[id] = obj;
|
||||||
|
};
|
||||||
|
|
||||||
|
/* delete (id) remove id from order, delete id from data */
|
||||||
|
var remove = function (proxy, id) {
|
||||||
|
if (Array.isArray(proxy.order)) {
|
||||||
|
var i = proxy.order.indexOf(id);
|
||||||
|
proxy.order.splice(i, 1);
|
||||||
|
}
|
||||||
|
if (proxy.data[id]) { delete proxy.data[id]; }
|
||||||
|
};
|
||||||
|
|
||||||
|
Todo.init = function (proxy, common) {
|
||||||
|
Cryptpad = common;
|
||||||
|
|
||||||
|
var api = {};
|
||||||
|
initialize(proxy);
|
||||||
|
|
||||||
|
api.val = function (id, k, v) {
|
||||||
|
return val(proxy, id, k, v);
|
||||||
|
};
|
||||||
|
api.add = function (id, obj) {
|
||||||
|
return add(proxy, id, obj);
|
||||||
|
};
|
||||||
|
api.remove = function (id) {
|
||||||
|
return remove(proxy, id);
|
||||||
|
};
|
||||||
|
|
||||||
|
return api;
|
||||||
|
};
|
||||||
|
|
||||||
|
return Todo;
|
||||||
|
});
|
||||||
@ -0,0 +1,130 @@
|
|||||||
|
@import (once) "../../customize/src/less2/include/browser.less";
|
||||||
|
@import (once) "../../customize/src/less2/include/toolbar.less";
|
||||||
|
@import (once) "../../customize/src/less2/include/markdown.less";
|
||||||
|
@import (once) '../../customize/src/less2/include/fileupload.less';
|
||||||
|
@import (once) '../../customize/src/less2/include/alertify.less';
|
||||||
|
//@import (once) '../../customize/src/less/mixins.less';
|
||||||
|
//@import (once) '../../customize/src/less/variables.less";
|
||||||
|
|
||||||
|
@import (once) '../../customize/src/less2/include/avatar.less';
|
||||||
|
|
||||||
|
|
||||||
|
.toolbar_main();
|
||||||
|
.fileupload_main();
|
||||||
|
.alertify_main();
|
||||||
|
|
||||||
|
// body
|
||||||
|
&.cp-app-todo {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
|
||||||
|
@button-border: 2px;
|
||||||
|
|
||||||
|
#cp-toolbar {
|
||||||
|
display: flex; // We need this to remove a 3px border at the bottom of the toolbar
|
||||||
|
}
|
||||||
|
|
||||||
|
.cp-cryptpad-toolbar {
|
||||||
|
padding: 0px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cp-app-todo-container {
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
flex-flow: column;
|
||||||
|
padding: 20px;
|
||||||
|
align-items: center;
|
||||||
|
background-color: lighten(@colortheme_todo-bg, 15%);
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@spacing: 15px;
|
||||||
|
|
||||||
|
#cp-app-todo-taskslist {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
overflow-y: auto;
|
||||||
|
min-width: 40%;
|
||||||
|
max-width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cp-app-todo-create-form {
|
||||||
|
margin: @spacing;
|
||||||
|
min-width: 40%;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
#cp-app-todo-newtodo {
|
||||||
|
flex: 1;
|
||||||
|
margin-right: 15px;
|
||||||
|
border-radius: 0;
|
||||||
|
border: 0;
|
||||||
|
background-color: darken(@colortheme_todo-bg, 10%);
|
||||||
|
color: #fff;
|
||||||
|
padding: 5px 10px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 0;
|
||||||
|
background-color: darken(@colortheme_todo-bg, 20%);
|
||||||
|
border:0;
|
||||||
|
&:hover {
|
||||||
|
background-color: darken(@colortheme_todo-bg, 25%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cp-app-todo-task {
|
||||||
|
border: 1px solid black;
|
||||||
|
padding: @spacing;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background-color: white;
|
||||||
|
|
||||||
|
&.cp-app-todo-task-complete {
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
color: #777;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cp-app-todo-task-text {
|
||||||
|
margin: @spacing;
|
||||||
|
flex: 1;
|
||||||
|
word-wrap: break-word;
|
||||||
|
min-width: 0;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.cp-app-todo-task-date {
|
||||||
|
margin: @spacing;
|
||||||
|
}
|
||||||
|
.cp-app-todo-task-remove {
|
||||||
|
margin: @spacing;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.cp-app-todo-task-checkbox {
|
||||||
|
font-size: 45px;
|
||||||
|
width: 45px;
|
||||||
|
cursor: pointer;
|
||||||
|
&:hover {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.cp-app-todo-task-checkbox-checked {
|
||||||
|
|
||||||
|
}
|
||||||
|
.cp-app-todo-task-checkbox-unchecked {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
border-radius: 0;
|
||||||
|
border:0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
@ -1,20 +1,20 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html class="cp-app-noscroll">
|
||||||
<head>
|
<head>
|
||||||
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
|
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
|
||||||
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
|
<script async data-bootload="/todo/inner.js" data-main="/common/sframe-boot.js?ver=1.4" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
|
||||||
<script async data-bootload="/todo/inner.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
|
<style>
|
||||||
<style>.loading-hidden, .loading-hidden * {display: none !important;}</style>
|
.loading-hidden { display: none; }
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body class="loading-hidden">
|
<body class="cp-app-todo">
|
||||||
<div id="toolbar" class="toolbar-container"></div>
|
<div id="cp-toolbar" class="cp-toolbar-container"></div>
|
||||||
<div id="container">
|
<div id="cp-app-todo-container">
|
||||||
<div class="cp-create-form">
|
<div class="cp-app-todo-create-form">
|
||||||
<input type="text" id="newTodoName" data-localization-placeholder="todo_newTodoNamePlaceholder" />
|
<input type="text" id="cp-app-todo-newtodo" data-localization-placeholder="todo_newTodoNamePlaceholder" />
|
||||||
<button class="btn btn-success fa fa-plus" data-localization-title="todo_newTodoNameTitle"></button>
|
<button class="btn btn-success fa fa-plus" data-localization-title="todo_newTodoNameTitle"></button>
|
||||||
</div>
|
</div>
|
||||||
<div id="tasksList"></div>
|
<div id="cp-app-todo-taskslist"></div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
|
||||||
|
|
||||||
|
|||||||
@ -1,15 +1,229 @@
|
|||||||
define([
|
define([
|
||||||
'jquery',
|
'jquery',
|
||||||
'less!/bower_components/components-font-awesome/css/font-awesome.min.css',
|
'/bower_components/chainpad-crypto/crypto.js',
|
||||||
|
'/common/sframe-chainpad-listmap.js',
|
||||||
|
'/common/toolbar3.js',
|
||||||
|
'/common/cryptpad-common.js',
|
||||||
|
'/bower_components/nthen/index.js',
|
||||||
|
'/common/sframe-common.js',
|
||||||
|
'/todo/todo.js',
|
||||||
|
|
||||||
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
|
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
|
||||||
'less!/todo/todo.less',
|
'less!/bower_components/components-font-awesome/css/font-awesome.min.css',
|
||||||
//'less!/customize/src/less/cryptpad.less',
|
'less!/customize/src/less2/main.less',
|
||||||
'less!/customize/src/less/toolbar.less',
|
], function (
|
||||||
], function ($) {
|
$,
|
||||||
$('.loading-hidden').removeClass('loading-hidden');
|
Crypto,
|
||||||
// dirty hack to get rid the flash of the lock background
|
Listmap,
|
||||||
/*
|
Toolbar,
|
||||||
setTimeout(function () {
|
Cryptpad,
|
||||||
$('#app').addClass('ready');
|
nThen,
|
||||||
}, 100);*/
|
SFCommon,
|
||||||
|
Todo
|
||||||
|
)
|
||||||
|
{
|
||||||
|
var Messages = Cryptpad.Messages;
|
||||||
|
var APP = window.APP = {};
|
||||||
|
var onConnectError = function () {
|
||||||
|
Cryptpad.errorLoadingScreen(Messages.websocketError);
|
||||||
|
};
|
||||||
|
|
||||||
|
var common;
|
||||||
|
var sFrameChan;
|
||||||
|
nThen(function (waitFor) {
|
||||||
|
$(waitFor(Cryptpad.addLoadingScreen));
|
||||||
|
SFCommon.create(waitFor(function (c) { APP.common = common = c; }));
|
||||||
|
}).nThen(function (waitFor) {
|
||||||
|
sFrameChan = common.getSframeChannel();
|
||||||
|
sFrameChan.onReady(waitFor());
|
||||||
|
}).nThen(function (/*waitFor*/) {
|
||||||
|
Cryptpad.onError(function (info) {
|
||||||
|
if (info && info.type === "store") {
|
||||||
|
onConnectError();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var $body = $('body');
|
||||||
|
var $list = $('#cp-app-todo-taskslist');
|
||||||
|
|
||||||
|
var removeTips = function () {
|
||||||
|
Cryptpad.clearTooltips();
|
||||||
|
};
|
||||||
|
|
||||||
|
var onReady = function () {
|
||||||
|
var todo = Todo.init(APP.lm.proxy);
|
||||||
|
|
||||||
|
var deleteTask = function(id) {
|
||||||
|
todo.remove(id);
|
||||||
|
|
||||||
|
var $els = $list.find('.cp-app-todo-task').filter(function (i, el) {
|
||||||
|
return $(el).data('id') === id;
|
||||||
|
});
|
||||||
|
$els.fadeOut(null, function () {
|
||||||
|
$els.remove();
|
||||||
|
removeTips();
|
||||||
|
});
|
||||||
|
//APP.display();
|
||||||
|
};
|
||||||
|
|
||||||
|
// TODO make this actually work, and scroll to bottom...
|
||||||
|
var scrollTo = function (t) {
|
||||||
|
$list.animate({
|
||||||
|
scrollTop: t,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
scrollTo = scrollTo;
|
||||||
|
|
||||||
|
var makeCheckbox = function (id, cb) {
|
||||||
|
var entry = APP.lm.proxy.data[id];
|
||||||
|
var checked = entry.state === 1 ?
|
||||||
|
'cp-app-todo-task-checkbox-checked fa-check-square-o':
|
||||||
|
'cp-app-todo-task-checkbox-unchecked fa-square-o';
|
||||||
|
|
||||||
|
var title = entry.state === 1?
|
||||||
|
Messages.todo_markAsIncompleteTitle:
|
||||||
|
Messages.todo_markAsCompleteTitle;
|
||||||
|
title = title;
|
||||||
|
|
||||||
|
removeTips();
|
||||||
|
return $('<span>', {
|
||||||
|
'class': 'cp-app-todo-task-checkbox fa ' + checked,
|
||||||
|
//title: title,
|
||||||
|
}).on('click', function () {
|
||||||
|
entry.state = (entry.state + 1) % 2;
|
||||||
|
if (typeof(cb) === 'function') {
|
||||||
|
cb(entry.state);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
var addTaskUI = function (el, animate) {
|
||||||
|
var $taskDiv = $('<div>', {
|
||||||
|
'class': 'cp-app-todo-task'
|
||||||
|
});
|
||||||
|
if (animate) {
|
||||||
|
$taskDiv.prependTo($list);
|
||||||
|
} else {
|
||||||
|
$taskDiv.appendTo($list);
|
||||||
|
}
|
||||||
|
$taskDiv.data('id', el);
|
||||||
|
|
||||||
|
makeCheckbox(el, function (/*state*/) {
|
||||||
|
APP.display();
|
||||||
|
})
|
||||||
|
.appendTo($taskDiv);
|
||||||
|
|
||||||
|
var entry = APP.lm.proxy.data[el];
|
||||||
|
|
||||||
|
if (entry.state) {
|
||||||
|
$taskDiv.addClass('cp-app-todo-task-complete');
|
||||||
|
}
|
||||||
|
|
||||||
|
$('<span>', { 'class': 'cp-app-todo-task-text' })
|
||||||
|
.text(entry.task)
|
||||||
|
.appendTo($taskDiv);
|
||||||
|
/*$('<span>', { 'class': 'cp-app-todo-task-date' })
|
||||||
|
.text(new Date(entry.ctime).toLocaleString())
|
||||||
|
.appendTo($taskDiv);*/
|
||||||
|
$('<button>', {
|
||||||
|
'class': 'fa fa-times cp-app-todo-task-remove btn btn-danger',
|
||||||
|
title: Messages.todo_removeTaskTitle,
|
||||||
|
}).appendTo($taskDiv).on('click', function() {
|
||||||
|
deleteTask(el);
|
||||||
|
});
|
||||||
|
|
||||||
|
if (animate) {
|
||||||
|
$taskDiv.hide();
|
||||||
|
window.setTimeout(function () {
|
||||||
|
// ???
|
||||||
|
$taskDiv.fadeIn();
|
||||||
|
}, 0);
|
||||||
|
}
|
||||||
|
removeTips();
|
||||||
|
};
|
||||||
|
var display = APP.display = function () {
|
||||||
|
$list.empty();
|
||||||
|
removeTips();
|
||||||
|
APP.lm.proxy.order.forEach(function (el) {
|
||||||
|
addTaskUI(el);
|
||||||
|
});
|
||||||
|
//scrollTo('300px');
|
||||||
|
};
|
||||||
|
|
||||||
|
var addTask = function () {
|
||||||
|
var $input = $('#cp-app-todo-newtodo');
|
||||||
|
// if the input is empty after removing leading and trailing spaces
|
||||||
|
// don't create a new entry
|
||||||
|
if (!$input.val().trim()) { return; }
|
||||||
|
|
||||||
|
var obj = {
|
||||||
|
"state": 0,
|
||||||
|
"task": $input.val(),
|
||||||
|
"ctime": +new Date(),
|
||||||
|
"mtime": +new Date()
|
||||||
|
};
|
||||||
|
|
||||||
|
var id = Cryptpad.createChannelId();
|
||||||
|
todo.add(id, obj);
|
||||||
|
|
||||||
|
$input.val("");
|
||||||
|
addTaskUI(id, true);
|
||||||
|
//display();
|
||||||
|
};
|
||||||
|
|
||||||
|
var $formSubmit = $('.cp-app-todo-create-form button').on('click', addTask);
|
||||||
|
$('#cp-app-todo-newtodo').on('keypress', function (e) {
|
||||||
|
switch (e.which) {
|
||||||
|
case 13:
|
||||||
|
$formSubmit.click();
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
//console.log(e.which);
|
||||||
|
}
|
||||||
|
}).focus();
|
||||||
|
|
||||||
|
var editTask = function () {
|
||||||
|
|
||||||
|
};
|
||||||
|
editTask = editTask;
|
||||||
|
|
||||||
|
display();
|
||||||
|
Cryptpad.removeLoadingScreen();
|
||||||
|
};
|
||||||
|
|
||||||
|
var onInit = function () {
|
||||||
|
Cryptpad.addLoadingScreen();
|
||||||
|
|
||||||
|
$body.on('dragover', function (e) { e.preventDefault(); });
|
||||||
|
$body.on('drop', function (e) { e.preventDefault(); });
|
||||||
|
|
||||||
|
var $bar = $('.cp-toolbar-container');
|
||||||
|
|
||||||
|
var displayed = ['useradmin', 'newpad', 'limit', 'pageTitle'];
|
||||||
|
var configTb = {
|
||||||
|
displayed: displayed,
|
||||||
|
common: Cryptpad,
|
||||||
|
sfCommon: common,
|
||||||
|
$container: $bar,
|
||||||
|
pageTitle: Messages.todo_title,
|
||||||
|
metadataMgr: common.getMetadataMgr(),
|
||||||
|
};
|
||||||
|
APP.toolbar = Toolbar.create(configTb);
|
||||||
|
APP.toolbar.$rightside.hide();
|
||||||
|
};
|
||||||
|
var createTodo = function() {
|
||||||
|
var listmapConfig = {
|
||||||
|
data: {},
|
||||||
|
common: common,
|
||||||
|
userName: 'todo',
|
||||||
|
logLevel: 1
|
||||||
|
};
|
||||||
|
|
||||||
|
var lm = APP.lm = Listmap.create(listmapConfig);
|
||||||
|
|
||||||
|
lm.proxy.on('create', onInit)
|
||||||
|
.on('ready', onReady);
|
||||||
|
};
|
||||||
|
createTodo();
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@ -1,229 +1,49 @@
|
|||||||
|
// Load #1, load as little as possible because we are in a race to get the loading screen up.
|
||||||
define([
|
define([
|
||||||
|
'/bower_components/nthen/index.js',
|
||||||
|
'/api/config',
|
||||||
'jquery',
|
'jquery',
|
||||||
'/bower_components/chainpad-crypto/crypto.js',
|
'/common/requireconfig.js',
|
||||||
'/bower_components/chainpad-listmap/chainpad-listmap.js',
|
'/common/sframe-common-outer.js'
|
||||||
'/common/toolbar2.js',
|
], function (nThen, ApiConfig, $, RequireConfig, SFCommonO) {
|
||||||
'/common/cryptpad-common.js',
|
var requireConfig = RequireConfig();
|
||||||
'/todo/todo.js',
|
|
||||||
|
// Loaded in load #2
|
||||||
//'/common/media-tag.js',
|
nThen(function (waitFor) {
|
||||||
//'/bower_components/file-saver/FileSaver.min.js',
|
$(waitFor());
|
||||||
|
}).nThen(function (waitFor) {
|
||||||
'less!/bower_components/components-font-awesome/css/font-awesome.min.css',
|
var req = {
|
||||||
'less!/customize/src/less/cryptpad.less',
|
cfg: requireConfig,
|
||||||
], function ($, Crypto, Listmap, Toolbar, Cryptpad, Todo) {
|
req: [ '/common/loading.js' ],
|
||||||
var Messages = Cryptpad.Messages;
|
pfx: window.location.origin
|
||||||
|
};
|
||||||
var APP = window.APP = {};
|
window.rc = requireConfig;
|
||||||
$(function () {
|
window.apiconf = ApiConfig;
|
||||||
|
$('#sbox-iframe').attr('src',
|
||||||
var $iframe = $('#pad-iframe').contents();
|
ApiConfig.httpSafeOrigin + '/todo/inner.html?' + requireConfig.urlArgs +
|
||||||
var $body = $iframe.find('body');
|
'#' + encodeURIComponent(JSON.stringify(req)));
|
||||||
var ifrw = $('#pad-iframe')[0].contentWindow;
|
|
||||||
var $list = $iframe.find('#tasksList');
|
// This is a cheap trick to avoid loading sframe-channel in parallel with the
|
||||||
|
// loading screen setup.
|
||||||
var removeTips = function () {
|
var done = waitFor();
|
||||||
Cryptpad.clearTooltips();
|
var onMsg = function (msg) {
|
||||||
};
|
var data = JSON.parse(msg.data);
|
||||||
|
if (data.q !== 'READY') { return; }
|
||||||
var onReady = function () {
|
window.removeEventListener('message', onMsg);
|
||||||
|
var _done = done;
|
||||||
var todo = Todo.init(APP.lm.proxy, Cryptpad);
|
done = function () { };
|
||||||
|
_done();
|
||||||
var deleteTask = function(id) {
|
};
|
||||||
todo.remove(id);
|
window.addEventListener('message', onMsg);
|
||||||
|
}).nThen(function (/*waitFor*/) {
|
||||||
var $els = $list.find('.cp-task').filter(function (i, el) {
|
var getSecrets = function (Cryptpad) {
|
||||||
return $(el).data('id') === id;
|
var proxy = Cryptpad.getProxy();
|
||||||
});
|
var hash = proxy.todo || Cryptpad.createRandomHash();
|
||||||
$els.fadeOut(null, function () {
|
return Cryptpad.getSecrets('todo', hash);
|
||||||
$els.remove();
|
};
|
||||||
removeTips();
|
SFCommonO.start({
|
||||||
});
|
getSecrets: getSecrets,
|
||||||
//APP.display();
|
noHash: true,
|
||||||
};
|
});
|
||||||
|
|
||||||
// TODO make this actually work, and scroll to bottom...
|
|
||||||
var scrollTo = function (t) {
|
|
||||||
var $list = $iframe.find('#tasksList');
|
|
||||||
|
|
||||||
$list.animate({
|
|
||||||
scrollTop: t,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
scrollTo = scrollTo;
|
|
||||||
|
|
||||||
var makeCheckbox = function (id, cb) {
|
|
||||||
var entry = APP.lm.proxy.data[id];
|
|
||||||
var checked = entry.state === 1? 'cp-task-checkbox-checked fa-check-square-o': 'cp-task-checkbox-unchecked fa-square-o';
|
|
||||||
|
|
||||||
var title = entry.state === 1?
|
|
||||||
Messages.todo_markAsIncompleteTitle:
|
|
||||||
Messages.todo_markAsCompleteTitle;
|
|
||||||
title = title;
|
|
||||||
|
|
||||||
removeTips();
|
|
||||||
return $('<span>', {
|
|
||||||
'class': 'cp-task-checkbox fa ' + checked,
|
|
||||||
//title: title,
|
|
||||||
}).on('click', function () {
|
|
||||||
entry.state = (entry.state + 1) % 2;
|
|
||||||
if (typeof(cb) === 'function') {
|
|
||||||
cb(entry.state);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
var addTaskUI = function (el, animate) {
|
|
||||||
var $taskDiv = $('<div>', {
|
|
||||||
'class': 'cp-task'
|
|
||||||
});
|
|
||||||
if (animate) {
|
|
||||||
$taskDiv.prependTo($list);
|
|
||||||
} else {
|
|
||||||
$taskDiv.appendTo($list);
|
|
||||||
}
|
|
||||||
$taskDiv.data('id', el);
|
|
||||||
|
|
||||||
makeCheckbox(el, function (/*state*/) {
|
|
||||||
APP.display();
|
|
||||||
})
|
|
||||||
.appendTo($taskDiv);
|
|
||||||
|
|
||||||
var entry = APP.lm.proxy.data[el];
|
|
||||||
|
|
||||||
if (entry.state) {
|
|
||||||
$taskDiv.addClass('cp-task-complete');
|
|
||||||
}
|
|
||||||
|
|
||||||
$('<span>', { 'class': 'cp-task-text' })
|
|
||||||
.text(entry.task)
|
|
||||||
.appendTo($taskDiv);
|
|
||||||
/*$('<span>', { 'class': 'cp-task-date' })
|
|
||||||
.text(new Date(entry.ctime).toLocaleString())
|
|
||||||
.appendTo($taskDiv);*/
|
|
||||||
$('<button>', {
|
|
||||||
'class': 'fa fa-times cp-task-remove btn btn-danger',
|
|
||||||
title: Messages.todo_removeTaskTitle,
|
|
||||||
}).appendTo($taskDiv).on('click', function() {
|
|
||||||
deleteTask(el);
|
|
||||||
});
|
|
||||||
|
|
||||||
if (animate) {
|
|
||||||
$taskDiv.hide();
|
|
||||||
window.setTimeout(function () {
|
|
||||||
// ???
|
|
||||||
$taskDiv.fadeIn();
|
|
||||||
}, 0);
|
|
||||||
}
|
|
||||||
removeTips();
|
|
||||||
};
|
|
||||||
var display = APP.display = function () {
|
|
||||||
$list.empty();
|
|
||||||
removeTips();
|
|
||||||
APP.lm.proxy.order.forEach(function (el) {
|
|
||||||
addTaskUI(el);
|
|
||||||
});
|
|
||||||
//scrollTo('300px');
|
|
||||||
};
|
|
||||||
|
|
||||||
var addTask = function () {
|
|
||||||
var $input = $iframe.find('#newTodoName');
|
|
||||||
// if the input is empty after removing leading and trailing spaces
|
|
||||||
// don't create a new entry
|
|
||||||
if (!$input.val().trim()) { return; }
|
|
||||||
|
|
||||||
var obj = {
|
|
||||||
"state": 0,
|
|
||||||
"task": $input.val(),
|
|
||||||
"ctime": +new Date(),
|
|
||||||
"mtime": +new Date()
|
|
||||||
};
|
|
||||||
|
|
||||||
var id = Cryptpad.createChannelId();
|
|
||||||
todo.add(id, obj);
|
|
||||||
|
|
||||||
$input.val("");
|
|
||||||
addTaskUI(id, true);
|
|
||||||
//display();
|
|
||||||
};
|
|
||||||
|
|
||||||
var $formSubmit = $iframe.find('.cp-create-form button').on('click', addTask);
|
|
||||||
$iframe.find('#newTodoName').on('keypress', function (e) {
|
|
||||||
switch (e.which) {
|
|
||||||
case 13:
|
|
||||||
$formSubmit.click();
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
console.log(e.which);
|
|
||||||
}
|
|
||||||
}).focus();
|
|
||||||
|
|
||||||
var editTask = function () {
|
|
||||||
|
|
||||||
};
|
|
||||||
editTask = editTask;
|
|
||||||
|
|
||||||
display();
|
|
||||||
Cryptpad.removeLoadingScreen();
|
|
||||||
};
|
|
||||||
|
|
||||||
var onInit = function () {
|
|
||||||
Cryptpad.addLoadingScreen();
|
|
||||||
|
|
||||||
$body.on('dragover', function (e) { e.preventDefault(); });
|
|
||||||
$body.on('drop', function (e) { e.preventDefault(); });
|
|
||||||
|
|
||||||
var Title;
|
|
||||||
var $bar = $iframe.find('.toolbar-container');
|
|
||||||
|
|
||||||
Title = Cryptpad.createTitle({}, function(){}, Cryptpad);
|
|
||||||
|
|
||||||
var configTb = {
|
|
||||||
displayed: ['useradmin', 'newpad', 'limit', 'upgrade', 'pageTitle'],
|
|
||||||
ifrw: ifrw,
|
|
||||||
common: Cryptpad,
|
|
||||||
//hideDisplayName: true,
|
|
||||||
$container: $bar,
|
|
||||||
pageTitle: Messages.todo_title
|
|
||||||
};
|
|
||||||
|
|
||||||
APP.toolbar = Toolbar.create(configTb);
|
|
||||||
APP.toolbar.$rightside.html(''); // Remove the drawer if we don't use it to hide the toolbar
|
|
||||||
};
|
|
||||||
|
|
||||||
var createTodo = function() {
|
|
||||||
var obj = Cryptpad.getProxy();
|
|
||||||
var hash = Cryptpad.createRandomHash();
|
|
||||||
|
|
||||||
if(obj.todo) {
|
|
||||||
hash = obj.todo;
|
|
||||||
} else {
|
|
||||||
obj.todo = hash;
|
|
||||||
}
|
|
||||||
|
|
||||||
var secret = Cryptpad.getSecrets('todo', hash);
|
|
||||||
|
|
||||||
var listmapConfig = {
|
|
||||||
data: {},
|
|
||||||
websocketURL: Cryptpad.getWebsocketURL(),
|
|
||||||
channel: secret.channel,
|
|
||||||
validateKey: secret.keys.validateKey || undefined,
|
|
||||||
crypto: Crypto.createEncryptor(secret.keys),
|
|
||||||
userName: 'todo',
|
|
||||||
logLevel: 1,
|
|
||||||
};
|
|
||||||
|
|
||||||
var lm = APP.lm = Listmap.create(listmapConfig);
|
|
||||||
|
|
||||||
lm.proxy.on('create', onInit)
|
|
||||||
.on('ready', onReady);
|
|
||||||
};
|
|
||||||
|
|
||||||
Cryptpad.ready(function () {
|
|
||||||
createTodo();
|
|
||||||
Cryptpad.reportAppUsage();
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
Loading…
Reference in New Issue