Big manual merge
This commit is contained in:
Caleb James DeLisle
@@ -1,5 +1,7 @@
|
||||
@import "/customize/src/less/variables.less";
|
||||
@import "/customize/src/less/mixins.less";
|
||||
@import "/common/markdown.less";
|
||||
@import "/common/file-dialog.less";
|
||||
|
||||
html, body{
|
||||
height: 100%;
|
||||
@@ -66,15 +68,8 @@ body {
|
||||
max-width: 40vw;
|
||||
margin: auto;
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
tr {
|
||||
th {
|
||||
border: 3px solid black;
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.markdown_preformatted-code;
|
||||
.markdown_gfm-table(black);
|
||||
}
|
||||
|
||||
@media (max-width: @media-medium-screen) {
|
||||
|
||||
@@ -147,6 +147,17 @@ define([
|
||||
}
|
||||
};
|
||||
|
||||
var mediaTagModes = [
|
||||
'markdown',
|
||||
'html',
|
||||
'htmlembedded',
|
||||
'htmlmixed',
|
||||
'index.html',
|
||||
'php',
|
||||
'velocity',
|
||||
'xml',
|
||||
];
|
||||
|
||||
var onModeChanged = function (mode) {
|
||||
var $codeMirror = $iframe.find('.CodeMirror');
|
||||
window.clearTimeout(APP.previewTo);
|
||||
@@ -154,6 +165,10 @@ define([
|
||||
APP.previewTo = window.setTimeout(function () {
|
||||
$codeMirror.removeClass('transition');
|
||||
}, 500);
|
||||
if (mediaTagModes.indexOf(mode) !== -1) {
|
||||
APP.$mediaTagButton.show();
|
||||
} else { APP.$mediaTagButton.hide(); }
|
||||
|
||||
if (mode === "markdown") {
|
||||
APP.$previewButton.show();
|
||||
Cryptpad.getPadAttribute('previewMode', function (e, data) {
|
||||
@@ -253,6 +268,25 @@ define([
|
||||
var $forgetPad = Cryptpad.createButton('forget', true, {}, forgetCb);
|
||||
$rightside.append($forgetPad);
|
||||
|
||||
var fileDialogCfg = {
|
||||
$body: $iframe.find('body'),
|
||||
onSelect: function (href) {
|
||||
var parsed = Cryptpad.parsePadUrl(href);
|
||||
var hexFileName = Cryptpad.base64ToHex(parsed.hashData.channel);
|
||||
var src = '/blob/' + hexFileName.slice(0,2) + '/' + hexFileName;
|
||||
var mt = '<media-tag src="' + src + '" data-crypto-key="cryptpad:' + parsed.hashData.key + '"></media-tag>';
|
||||
editor.replaceSelection(mt);
|
||||
},
|
||||
data: APP
|
||||
};
|
||||
APP.$mediaTagButton = $('<button>', {
|
||||
title: Messages.filePickerButton,
|
||||
'class': 'rightside-button fa fa-picture-o',
|
||||
style: 'font-size: 17px'
|
||||
}).click(function () {
|
||||
Cryptpad.createFileDialog(fileDialogCfg);
|
||||
}).appendTo($rightside);
|
||||
|
||||
var $previewButton = APP.$previewButton = Cryptpad.createButton(null, true);
|
||||
$previewButton.removeClass('fa-question').addClass('fa-eye');
|
||||
$previewButton.attr('title', Messages.previewButtonTitle);
|
||||
|
||||
@@ -254,6 +254,7 @@ define([
|
||||
var createAreaHandlers = File.createDropArea = function ($area, $hoverArea) {
|
||||
var counter = 0;
|
||||
if (!$hoverArea) { $hoverArea = $area; }
|
||||
if (!$area) { return; }
|
||||
$hoverArea
|
||||
.on('dragenter', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
@@ -276,6 +276,7 @@ define([
|
||||
var $slideIcon = $('<span>', {"class": "fa fa-file-powerpoint-o file icon slideColor"});
|
||||
var $pollIcon = $('<span>', {"class": "fa fa-calendar file icon pollColor"});
|
||||
var $whiteboardIcon = $('<span>', {"class": "fa fa-paint-brush whiteboardColor"});
|
||||
var $todoIcon = $('<span>', {"class": "fa fa-tasks todoColor"});
|
||||
var $contactsIcon = $('<span>', {"class": "fa fa-users friendsColor"});
|
||||
UI.getIcon = function (type) {
|
||||
var $icon;
|
||||
@@ -287,6 +288,7 @@ define([
|
||||
case 'slide': $icon = $slideIcon.clone(); break;
|
||||
case 'poll': $icon = $pollIcon.clone(); break;
|
||||
case 'whiteboard': $icon = $whiteboardIcon.clone(); break;
|
||||
case 'todo': $icon = $todoIcon.clone(); break;
|
||||
case 'contacts': $icon = $contactsIcon.clone(); break;
|
||||
default: $icon = $fileIcon.clone();
|
||||
}
|
||||
@@ -295,16 +297,21 @@ define([
|
||||
};
|
||||
|
||||
// Tooltips
|
||||
|
||||
UI.clearTooltips = function () {
|
||||
$('.tippy-popper').remove();
|
||||
};
|
||||
|
||||
UI.addTooltips = function () {
|
||||
var MutationObserver = window.MutationObserver;
|
||||
var addTippy = function (el) {
|
||||
if (el.nodeName === 'IFRAME') { return; }
|
||||
console.log(el);
|
||||
var delay = typeof(AppConfig.tooltipDelay) === "number" ? AppConfig.tooltipDelay : 500;
|
||||
Tippy(el, {
|
||||
position: 'bottom',
|
||||
distance: 0,
|
||||
performance: true,
|
||||
delay: [500, 0]
|
||||
delay: [delay, 0]
|
||||
});
|
||||
};
|
||||
var $body = $('body');
|
||||
|
||||
@@ -4,7 +4,27 @@ define([
|
||||
'/common/curve.js',
|
||||
'/bower_components/marked/marked.min.js',
|
||||
], function ($, Crypto, Curve, Marked) {
|
||||
var Msg = {};
|
||||
var Msg = {
|
||||
inputs: [],
|
||||
};
|
||||
|
||||
var Messages;
|
||||
Msg.setEditable = function (bool) {
|
||||
bool = !bool;
|
||||
Msg.inputs.forEach(function (input) {
|
||||
if (bool) {
|
||||
input.setAttribute('disabled', bool);
|
||||
} else {
|
||||
input.removeAttribute('disabled');
|
||||
}
|
||||
|
||||
if (Messages) {
|
||||
// set placeholder
|
||||
var placeholder = bool? Messages.disconnected: Messages.contacts_typeHere;
|
||||
input.setAttribute('placeholder', placeholder);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var Types = {
|
||||
message: 'MSG',
|
||||
@@ -227,7 +247,6 @@ define([
|
||||
if (!isId) { return; }
|
||||
|
||||
var decryptedMsg = channel.encryptor.decrypt(msg);
|
||||
console.log(decryptedMsg);
|
||||
var parsed = JSON.parse(decryptedMsg);
|
||||
if (parsed[0] !== Types.mapId && parsed[0] !== Types.mapIdAck) { return; }
|
||||
if (parsed[2] !== sender || !parsed[1]) { return; }
|
||||
@@ -267,6 +286,7 @@ define([
|
||||
var chan = parsed[3];
|
||||
if (!chan || !channels[chan]) { return; }
|
||||
pushMsg(common, channels[chan], parsed[4]);
|
||||
channels[chan].refresh();
|
||||
};
|
||||
var onMessage = function (common, msg, sender, chan) {
|
||||
if (!channels[chan.id]) { return; }
|
||||
@@ -284,32 +304,50 @@ define([
|
||||
var data = getFriend(common, curvePublic);
|
||||
var proxy = common.getProxy();
|
||||
|
||||
var $header = $('<div>', {'class': 'header avatar'}).appendTo($container);
|
||||
/*
|
||||
var $removeHistory = $('<button>', {
|
||||
'class': 'remove-history'
|
||||
}).text('remove chat history').click(function () {
|
||||
Cryptpad.confirm('are you sure?', function (yes) {
|
||||
// Input
|
||||
var channel = channels[data.channel];
|
||||
|
||||
var $header = $('<div>', {
|
||||
'class': 'header',
|
||||
}).appendTo($container);
|
||||
|
||||
var $avatar = $('<div>', {'class': 'avatar'}).appendTo($header);
|
||||
|
||||
// more history...
|
||||
$('<span>', {
|
||||
'class': 'more-history',
|
||||
})
|
||||
.text('get more history')
|
||||
.click(function () {
|
||||
console.log("GETTING HISTORY");
|
||||
channel.getPreviousMessages();
|
||||
})
|
||||
.appendTo($header);
|
||||
|
||||
var $removeHistory = $('<span>', {
|
||||
'class': 'remove-history fa fa-eraser',
|
||||
title: common.Messages.contacts_removeHistoryTitle
|
||||
})
|
||||
.click(function () {
|
||||
common.confirm(common.Messages.contacts_confirmRemoveHistory, function (yes) {
|
||||
if (!yes) { return; }
|
||||
Cryptpad.clearOwnedChannel(data.channel, function (e) {
|
||||
common.clearOwnedChannel(data.channel, function (e) {
|
||||
if (e) {
|
||||
console.error(e);
|
||||
Cryptpad.alert("Something went wrong");
|
||||
common.alert(common.Messages.contacts_removeHistoryServerError);
|
||||
return;
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
$removeHistory.appendTo($header); //rightCol);
|
||||
*/
|
||||
$removeHistory.appendTo($header);
|
||||
|
||||
$('<div>', {'class': 'messages'}).appendTo($container);
|
||||
var $inputBlock = $('<div>', {'class': 'input'}).appendTo($container);
|
||||
|
||||
// Input
|
||||
var channel = channels[data.channel];
|
||||
var $input = $('<textarea>').appendTo($inputBlock);
|
||||
$input.attr('placeholder', common.Messages.contacts_typeHere);
|
||||
Msg.inputs.push($input[0]);
|
||||
|
||||
var sending = false;
|
||||
var send = function () {
|
||||
@@ -338,7 +376,7 @@ define([
|
||||
});*/
|
||||
var onKeyDown = function (e) {
|
||||
if (e.keyCode === 13) {
|
||||
if (e.ctrlKey) {
|
||||
if (e.ctrlKey || e.shiftKey) {
|
||||
var val = this.value;
|
||||
if (typeof this.selectionStart === "number" && typeof this.selectionEnd === "number") {
|
||||
var start = this.selectionStart;
|
||||
@@ -363,24 +401,35 @@ define([
|
||||
var $rightCol = $('<span>', {'class': 'right-col'});
|
||||
$('<span>', {'class': 'name'}).text(data.displayName).appendTo($rightCol);
|
||||
if (data.avatar && avatars[data.avatar]) {
|
||||
$header.append(avatars[data.avatar]);
|
||||
$header.append($rightCol);
|
||||
$avatar.append(avatars[data.avatar]);
|
||||
$avatar.append($rightCol);
|
||||
} else {
|
||||
common.displayAvatar($header, data.avatar, data.displayName, function ($img) {
|
||||
common.displayAvatar($avatar, data.avatar, data.displayName, function ($img) {
|
||||
if (data.avatar && $img) {
|
||||
avatars[data.avatar] = $img[0].outerHTML;
|
||||
}
|
||||
$header.append($rightCol);
|
||||
$avatar.append($rightCol);
|
||||
});
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
Msg.getLatestMessages = function () {
|
||||
Object.keys(channels).forEach(function (id) {
|
||||
if (id === 'me') { return; }
|
||||
var friend = channels[id];
|
||||
friend.getMessagesSinceDisconnect();
|
||||
friend.refresh();
|
||||
});
|
||||
};
|
||||
|
||||
Msg.init = function (common, $listContainer, $msgContainer) {
|
||||
var network = common.getNetwork();
|
||||
var proxy = common.getProxy();
|
||||
Msg.hk = network.historyKeeper;
|
||||
var friends = getFriendList(common);
|
||||
Messages = Messages || common.Messages;
|
||||
|
||||
network.on('message', function(msg, sender) {
|
||||
onDirectMessage(common, msg, sender);
|
||||
});
|
||||
@@ -450,6 +499,7 @@ define([
|
||||
$chat.show();
|
||||
|
||||
Msg.active = curvePublic;
|
||||
// TODO don't mark messages as read unless you have displayed them
|
||||
|
||||
refresh(curvePublic);
|
||||
};
|
||||
@@ -539,6 +589,37 @@ define([
|
||||
var statusText = status ? 'online' : 'offline';
|
||||
$friend.find('.status').attr('class', 'status '+statusText);
|
||||
};
|
||||
var getMoreHistory = function (network, chan, hash, count) {
|
||||
var msg = [
|
||||
'GET_HISTORY_RANGE',
|
||||
chan.id,
|
||||
{
|
||||
from: hash,
|
||||
count: count,
|
||||
}
|
||||
];
|
||||
|
||||
console.log(msg);
|
||||
|
||||
network.sendto(network.historyKeeper, JSON.stringify(msg)).then(function (a, b, c) {
|
||||
console.log(a, b, c);
|
||||
}, function (err) {
|
||||
throw new Error(err);
|
||||
});
|
||||
};
|
||||
|
||||
var getChannelMessagesSince = function (network, chan, data, keys) {
|
||||
var cfg = {
|
||||
validateKey: keys.validateKey,
|
||||
owners: [proxy.edPublic, data.edPublic],
|
||||
lastKnownHash: data.lastKnownHash
|
||||
};
|
||||
var msg = ['GET_HISTORY', chan.id, cfg];
|
||||
network.sendto(network.historyKeeper, JSON.stringify(msg))
|
||||
.then($.noop, function (err) {
|
||||
throw new Error(err);
|
||||
});
|
||||
};
|
||||
|
||||
// Open the channels
|
||||
var openFriendChannel = function (f) {
|
||||
@@ -558,9 +639,18 @@ define([
|
||||
removeUI: function () { removeUI(data.curvePublic); },
|
||||
updateUI: function (types) { updateUI(data.curvePublic, types); },
|
||||
updateStatus: function () { updateStatus(data.curvePublic); },
|
||||
getMessagesSinceDisconnect: function () {
|
||||
getChannelMessagesSince(network, chan, data, keys);
|
||||
},
|
||||
wc: chan,
|
||||
userList: [],
|
||||
mapId: {}
|
||||
mapId: {},
|
||||
getPreviousMessages: function () {
|
||||
var oldestMessages = channel.messages[0];
|
||||
var oldestHash = oldestMessages[0];
|
||||
|
||||
getMoreHistory(network, chan, oldestHash, 10);
|
||||
},
|
||||
};
|
||||
chan.on('message', function (msg, sender) {
|
||||
onMessage(common, msg, sender, chan);
|
||||
@@ -589,20 +679,13 @@ define([
|
||||
}
|
||||
channel.updateStatus();
|
||||
});
|
||||
var cfg = {
|
||||
validateKey: keys.validateKey,
|
||||
owners: [proxy.edPublic, data.edPublic],
|
||||
lastKnownHash: data.lastKnownHash
|
||||
};
|
||||
var msg = ['GET_HISTORY', chan.id, cfg];
|
||||
network.sendto(network.historyKeeper, JSON.stringify(msg))
|
||||
.then($.noop, function (err) {
|
||||
throw new Error(err);
|
||||
});
|
||||
|
||||
getChannelMessagesSince(network, chan, data, keys);
|
||||
}, function (err) {
|
||||
console.error(err);
|
||||
});
|
||||
};
|
||||
|
||||
Object.keys(friends).forEach(openFriendChannel);
|
||||
|
||||
var checkNewFriends = function () {
|
||||
|
||||
@@ -51,7 +51,7 @@ define([
|
||||
common.displayNameKey = 'cryptpad.username';
|
||||
var newPadNameKey = common.newPadNameKey = "newPadName";
|
||||
var newPadPathKey = common.newPadPathKey = "newPadPath";
|
||||
var oldStorageKey = common.oldStorageKey = 'CryptPad_RECENTPADS';
|
||||
common.oldStorageKey = 'CryptPad_RECENTPADS';
|
||||
common.storageKey = 'filesData';
|
||||
var PINNING_ENABLED = AppConfig.enablePinning;
|
||||
|
||||
@@ -77,6 +77,7 @@ define([
|
||||
common.unnotify = UI.unnotify;
|
||||
common.getIcon = UI.getIcon;
|
||||
common.addTooltips = UI.addTooltips;
|
||||
common.clearTooltips = UI.clearTooltips;
|
||||
|
||||
// import common utilities for export
|
||||
common.find = Util.find;
|
||||
@@ -127,6 +128,8 @@ define([
|
||||
common.getFriendListUI = Messaging.getFriendListUI;
|
||||
common.createData = Messaging.createData;
|
||||
common.getPendingInvites = Messaging.getPending;
|
||||
common.enableMessaging = Messaging.setEditable;
|
||||
common.getLatestMessages = Messaging.getLatestMessages;
|
||||
|
||||
// Userlist
|
||||
common.createUserList = UserList.create;
|
||||
@@ -244,6 +247,8 @@ define([
|
||||
};
|
||||
|
||||
common.infiniteSpinnerDetected = false;
|
||||
var BAD_STATE_TIMEOUT = typeof(AppConfig.badStateTimeout) === 'number'?
|
||||
AppConfig.badStateTimeout: 30000;
|
||||
var whenRealtimeSyncs = common.whenRealtimeSyncs = function (realtime, cb) {
|
||||
realtime.sync();
|
||||
|
||||
@@ -263,7 +268,7 @@ define([
|
||||
window.location.reload();
|
||||
});
|
||||
common.infiniteSpinnerDetected = true;
|
||||
}, 30000);
|
||||
}, BAD_STATE_TIMEOUT);
|
||||
realtime.onSettle(function () {
|
||||
clearTimeout(to);
|
||||
cb();
|
||||
@@ -409,7 +414,7 @@ define([
|
||||
return parsed.hashData;
|
||||
};
|
||||
// Migrate from legacy store (localStorage)
|
||||
var migrateRecentPads = common.migrateRecentPads = function (pads) {
|
||||
common.migrateRecentPads = function (pads) {
|
||||
return pads.map(function (pad) {
|
||||
var parsedHash;
|
||||
if (Array.isArray(pad)) { // TODO DEPRECATE_F
|
||||
@@ -448,24 +453,6 @@ define([
|
||||
});
|
||||
};
|
||||
|
||||
// Get the pads from localStorage to migrate them to the object store
|
||||
common.getLegacyPads = function (cb) {
|
||||
require(['/customize/store.js'], function(Legacy) { // TODO DEPRECATE_F
|
||||
Legacy.ready(function (err, legacy) {
|
||||
if (err) { cb(err, null); return; }
|
||||
legacy.get(oldStorageKey, function (err2, recentPads) {
|
||||
if (err2) { cb(err2, null); return; }
|
||||
if (Array.isArray(recentPads)) {
|
||||
feedback('MIGRATE_LEGACY_STORE');
|
||||
cb(void 0, migrateRecentPads(recentPads));
|
||||
return;
|
||||
}
|
||||
cb(void 0, []);
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// Create untitled documents when no name is given
|
||||
var getLocaleDate = common.getLocaleDate = function () {
|
||||
if (window.Intl && window.Intl.DateTimeFormat) {
|
||||
@@ -1098,6 +1085,7 @@ define([
|
||||
}
|
||||
break;
|
||||
case 'upload':
|
||||
console.log('UPLOAD');
|
||||
button = $('<button>', {
|
||||
'class': 'btn btn-primary new',
|
||||
title: Messages.uploadButtonTitle,
|
||||
@@ -1257,6 +1245,13 @@ define([
|
||||
style: 'font:'+size+' FontAwesome'
|
||||
});
|
||||
break;
|
||||
case 'savetodrive':
|
||||
button = $('<button>', {
|
||||
'class': 'fa fa-cloud-upload',
|
||||
title: Messages.canvas_saveToDrive,
|
||||
})
|
||||
.click(prepareFeedback(type));
|
||||
break;
|
||||
default:
|
||||
button = $('<button>', {
|
||||
'class': "fa fa-question",
|
||||
@@ -1403,6 +1398,67 @@ define([
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
common.createFileDialog = function (cfg) {
|
||||
var $body = cfg.$body || $('body');
|
||||
var $block = $body.find('#fileDialog');
|
||||
if (!$block.length) {
|
||||
$block = $('<div>', {id: "fileDialog"}).appendTo($body);
|
||||
}
|
||||
$block.html('');
|
||||
$('<span>', {
|
||||
'class': 'close fa fa-times',
|
||||
'title': Messages.filePicker_close
|
||||
}).click(function () {
|
||||
$block.hide();
|
||||
}).appendTo($block);
|
||||
var $description = $('<p>').text(Messages.filePicker_description);
|
||||
$block.append($description);
|
||||
var $filter = $('<p>').appendTo($block);
|
||||
var $container = $('<span>', {'class': 'fileContainer'}).appendTo($block);
|
||||
var updateContainer = function () {
|
||||
$container.html('');
|
||||
var filter = $filter.find('.filter').val().trim();
|
||||
var list = common.getUserFilesList();
|
||||
var fo = common.getFO();
|
||||
list.forEach(function (id) {
|
||||
var data = fo.getFileData(id);
|
||||
var name = fo.getTitle(id);
|
||||
if (filter && name.toLowerCase().indexOf(filter.toLowerCase()) === -1) {
|
||||
return;
|
||||
}
|
||||
var $span = $('<span>', {'class': 'element'}).appendTo($container);
|
||||
var $inner = $('<span>').text(name);
|
||||
$span.append($inner).click(function () {
|
||||
if (typeof cfg.onSelect === "function") { cfg.onSelect(data.href); }
|
||||
$block.hide();
|
||||
});
|
||||
});
|
||||
};
|
||||
var to;
|
||||
$('<input>', {
|
||||
type: 'text',
|
||||
'class': 'filter',
|
||||
'placeholder': Messages.filePicker_filter
|
||||
}).appendTo($filter).on('keypress', function () {
|
||||
if (to) { window.clearTimeout(to); }
|
||||
to = window.setTimeout(updateContainer, 300);
|
||||
});
|
||||
//$filter.append(' '+Messages.or+' ');
|
||||
var data = {FM: cfg.data.FM};
|
||||
$filter.append(common.createButton('upload', false, data, function () {
|
||||
$block.hide();
|
||||
}));
|
||||
updateContainer();
|
||||
$body.keydown(function (e) {
|
||||
if (e.which === 27) { $block.hide(); }
|
||||
});
|
||||
$block.show();
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
// Create a button with a dropdown menu
|
||||
// input is a config object with parameters:
|
||||
// - container (optional): the dropdown container (span)
|
||||
@@ -1779,6 +1835,7 @@ define([
|
||||
initialized = true;
|
||||
|
||||
updateLocalVersion();
|
||||
common.addTooltips();
|
||||
f(void 0, env);
|
||||
if (typeof(window.onhashchange) === 'function') { window.onhashchange(); }
|
||||
}
|
||||
@@ -1797,7 +1854,6 @@ define([
|
||||
store = common.store = env.store = storeObj;
|
||||
|
||||
common.addDirectMessageHandler(common);
|
||||
common.addTooltips();
|
||||
|
||||
var proxy = getProxy();
|
||||
var network = getNetwork();
|
||||
|
||||
@@ -164,7 +164,6 @@ define([
|
||||
var $mts = $content.find('media-tag:not(:has(*))');
|
||||
$mts.each(function (i, el) {
|
||||
MediaTag(el);
|
||||
console.log(el.outerHTML);
|
||||
var observer = new MutationObserver(function(mutations) {
|
||||
mutations.forEach(function(mutation) {
|
||||
if (mutation.type === 'childList') {
|
||||
|
||||
39
www/common/file-dialog.less
Normal file
39
www/common/file-dialog.less
Normal file
@@ -0,0 +1,39 @@
|
||||
#fileDialog {
|
||||
position: absolute;
|
||||
background-color: rgba(200, 200, 200, 0.8);
|
||||
top: 15vh; bottom: 15vh;
|
||||
left: 10vw; right: 10vw;
|
||||
border: 1px solid black;
|
||||
z-index: 100000;
|
||||
overflow: auto;
|
||||
display: none;
|
||||
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.element {
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 5px;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
background-color: white;
|
||||
padding: 5px;
|
||||
align-items: center;
|
||||
span {
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -294,10 +294,8 @@ define([
|
||||
// Creating a new anon drive: import anon pads from localStorage
|
||||
if ((!drive[Cryptpad.oldStorageKey] || !Cryptpad.isArray(drive[Cryptpad.oldStorageKey]))
|
||||
&& !drive['filesData']) {
|
||||
Cryptpad.getLegacyPads(function (err, data) {
|
||||
drive[Cryptpad.oldStorageKey] = data;
|
||||
onReady(f, rt.proxy, Cryptpad, exp);
|
||||
});
|
||||
drive[Cryptpad.oldStorageKey] = [];
|
||||
onReady(f, rt.proxy, Cryptpad, exp);
|
||||
return;
|
||||
}
|
||||
// Drive already exist: return the existing drive, don't load data from legacy store
|
||||
|
||||
27
www/common/markdown.less
Normal file
27
www/common/markdown.less
Normal file
@@ -0,0 +1,27 @@
|
||||
.markdown_preformatted-code (@color: #333) {
|
||||
pre > code {
|
||||
display: block;
|
||||
position: relative;
|
||||
border: 1px solid @color;
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
padding-left: .25vw;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.markdown_gfm-table (@color: black) {
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
tr {
|
||||
th {
|
||||
border: 3px solid @color;
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// todo ul, ol
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 403 B After Width: | Height: | Size: 402 B |
Binary file not shown.
|
Before Width: | Height: | Size: 461 B After Width: | Height: | Size: 337 B |
Binary file not shown.
|
Before Width: | Height: | Size: 143 B After Width: | Height: | Size: 135 B |
@@ -142,7 +142,11 @@ define([
|
||||
}
|
||||
rpc.send('CLEAR_OWNED_CHANNEL', channel, function (e, response) {
|
||||
if (e) { return cb(e); }
|
||||
cb(response);
|
||||
if (response && response.length) {
|
||||
cb(void 0, response[0]);
|
||||
} else {
|
||||
cb();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@@ -63,7 +63,7 @@ types of messages:
|
||||
// RPC responses are arrays. this message isn't meant for us.
|
||||
return;
|
||||
}
|
||||
if (/FULL_HISTORY/.test(parsed[0])) { return; }
|
||||
if (/(FULL_HISTORY|HISTORY_RANGE)/.test(parsed[0])) { return; }
|
||||
|
||||
var response = parsed.slice(2);
|
||||
|
||||
|
||||
2
www/common/tippy.min.js
vendored
2
www/common/tippy.min.js
vendored
File diff suppressed because one or more lines are too long
@@ -199,6 +199,7 @@ define([
|
||||
|
||||
// Update the userlist
|
||||
var $editUsers = $userlistContent.find('.' + USERLIST_CLS).html('');
|
||||
Cryptpad.clearTooltips();
|
||||
|
||||
var $editUsersList = $('<div>', {'class': 'userlist-others'});
|
||||
|
||||
@@ -689,6 +690,14 @@ define([
|
||||
config.realtime.onPatch(ks(toolbar, config));
|
||||
config.realtime.onMessage(ks(toolbar, config, true));
|
||||
}
|
||||
// without this, users in read-only mode say 'synchronizing' until they
|
||||
// receive a patch.
|
||||
if (Cryptpad) {
|
||||
typing = 0;
|
||||
Cryptpad.whenRealtimeSyncs(config.realtime, function () {
|
||||
kickSpinner(toolbar, config);
|
||||
});
|
||||
}
|
||||
return $spin;
|
||||
};
|
||||
|
||||
@@ -990,13 +999,18 @@ define([
|
||||
|
||||
var failed = toolbar.failed = function () {
|
||||
toolbar.connected = false;
|
||||
toolbar.spinner.text(Messages.disconnected);
|
||||
|
||||
if (toolbar.spinner) {
|
||||
toolbar.spinner.text(Messages.disconnected);
|
||||
}
|
||||
//checkLag(toolbar, config);
|
||||
};
|
||||
toolbar.reconnecting = function (userId) {
|
||||
if (config.userList) { config.userList.userNetfluxId = userId; }
|
||||
toolbar.connected = false;
|
||||
toolbar.spinner.text(Messages.reconnecting);
|
||||
if (toolbar.spinner) {
|
||||
toolbar.spinner.text(Messages.reconnecting);
|
||||
}
|
||||
//checkLag(toolbar, config);
|
||||
};
|
||||
|
||||
|
||||
@@ -39,12 +39,13 @@ define([
|
||||
toolbar.$rightside.html(''); // Remove the drawer if we don't use it to hide the toolbar
|
||||
|
||||
Cryptpad.getProxy().on('disconnect', function () {
|
||||
// TODO readonly
|
||||
Cryptpad.alert(Messages.common_connectionLost, undefined, true);
|
||||
Cryptpad.enableMessaging(false);
|
||||
});
|
||||
Cryptpad.getProxy().on('reconnect', function () {
|
||||
// TODO cancel readonly
|
||||
Cryptpad.findOKButton().click();
|
||||
Cryptpad.enableMessaging(true);
|
||||
Cryptpad.getLatestMessages();
|
||||
});
|
||||
|
||||
Cryptpad.initMessaging(Cryptpad, $list, $messages);
|
||||
|
||||
@@ -66,7 +66,7 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
#friendList .friend, #messaging .header {
|
||||
#friendList .friend, #messaging .avatar {
|
||||
.avatar(30px);
|
||||
&.avatar {
|
||||
display: flex;
|
||||
@@ -112,17 +112,65 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
.placeholder (@color: #bbb) {
|
||||
&::-webkit-input-placeholder { /* WebKit, Blink, Edge */
|
||||
color: @color;
|
||||
}
|
||||
&:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
|
||||
color: @color;
|
||||
opacity: 1;
|
||||
}
|
||||
&::-moz-placeholder { /* Mozilla Firefox 19+ */
|
||||
color: @color;
|
||||
opacity: 1;
|
||||
}
|
||||
&:-ms-input-placeholder { /* Internet Explorer 10-11 */
|
||||
color: @color;
|
||||
}
|
||||
&::-ms-input-placeholder { /* Microsoft Edge */
|
||||
color: @color;
|
||||
}
|
||||
}
|
||||
|
||||
#messaging {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
background-color: lighten(@bg-color, 20%);
|
||||
min-width: 0;
|
||||
|
||||
.info {
|
||||
padding: 20px;
|
||||
}
|
||||
.header {
|
||||
background-color: lighten(@bg-color, 15%);
|
||||
padding: 10px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
|
||||
.hover () {
|
||||
height: 100%;
|
||||
line-height: 30px;
|
||||
padding: 10px;
|
||||
&:hover {
|
||||
background-color: rgba(50,50,50,0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.avatar,
|
||||
.right-col {
|
||||
flex:1 1 auto;
|
||||
}
|
||||
.remove-history {
|
||||
.hover;
|
||||
}
|
||||
.avatar {
|
||||
margin: 10px;
|
||||
}
|
||||
.more-history {
|
||||
.hover;
|
||||
}
|
||||
}
|
||||
.chat {
|
||||
height: 100%;
|
||||
@@ -173,6 +221,12 @@ body {
|
||||
background-color: darken(@bg-color, 10%);
|
||||
color: @color;
|
||||
resize: none;
|
||||
line-height: 50px;
|
||||
overflow-y: auto;
|
||||
.placeholder(#bbb);
|
||||
&[disabled=true] {
|
||||
.placeholder(#999);
|
||||
}
|
||||
&:placeholder-shown { line-height: 50px; }
|
||||
}
|
||||
button {
|
||||
|
||||
@@ -468,62 +468,15 @@ span {
|
||||
}
|
||||
div.grid {
|
||||
padding: 20px;
|
||||
.fileIcon;
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 10px 10px;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
|
||||
&:not(.selected):not(.selectedTmp) {
|
||||
border: 1px solid #CCC;
|
||||
}
|
||||
.name {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
margin: 8px 0;
|
||||
display: inline-block;
|
||||
//align-items: center;
|
||||
//justify-content: center;
|
||||
overflow: hidden;
|
||||
//text-overflow: ellipsis;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
&.element {
|
||||
position: relative;
|
||||
}
|
||||
.truncated {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0; right: 0;
|
||||
text-align: center;
|
||||
}
|
||||
input {
|
||||
width: 100%;
|
||||
margin-top: 5px;
|
||||
}
|
||||
img.icon {
|
||||
height: 48px;
|
||||
max-height: none;
|
||||
max-width: none;
|
||||
margin: 8px 0;
|
||||
}
|
||||
.fa {
|
||||
display: block;
|
||||
margin: auto;
|
||||
font-size: 48px;
|
||||
margin: 8px 0;
|
||||
text-align: center;
|
||||
&.listonly {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.listElement {
|
||||
display: none;
|
||||
|
||||
@@ -299,6 +299,13 @@ define([
|
||||
|
||||
var DD = new DiffDom(diffOptions);
|
||||
|
||||
var openLink = function (e) {
|
||||
var el = e.currentTarget;
|
||||
if (!el || el.nodeName !== 'A') { return; }
|
||||
var href = el.getAttribute('href');
|
||||
if (href) { window.open(href, '_blank'); }
|
||||
};
|
||||
|
||||
// apply patches, and try not to lose the cursor in the process!
|
||||
var applyHjson = function (shjson) {
|
||||
var userDocStateDom = hjsonToDom(JSON.parse(shjson));
|
||||
@@ -308,6 +315,11 @@ define([
|
||||
}
|
||||
var patch = (DD).diff(inner, userDocStateDom);
|
||||
(DD).apply(inner, patch);
|
||||
if (readOnly) {
|
||||
var $links = $(inner).find('a');
|
||||
// off so that we don't end up with multiple identical handlers
|
||||
$links.off('click', openLink).on('click', openLink);
|
||||
}
|
||||
};
|
||||
|
||||
var stringifyDOM = module.stringifyDOM = function (dom) {
|
||||
@@ -549,7 +561,7 @@ define([
|
||||
var $templateButton = Cryptpad.createButton('template', true, templateObj);
|
||||
$rightside.append($templateButton);
|
||||
}
|
||||
console.log('init');
|
||||
|
||||
/* add an export button */
|
||||
var $export = Cryptpad.createButton('export', true, {}, exportFile);
|
||||
$drawer.append($export);
|
||||
|
||||
@@ -525,10 +525,9 @@ define([
|
||||
APP.$rightside.append($p);
|
||||
return;
|
||||
}
|
||||
var $create = $('<div>', {id: CREATE_ID});
|
||||
var $button = $('<button>', {'class': 'btn btn-success'});
|
||||
$button.text(Messages.profile_create).click(todo).appendTo($create);
|
||||
APP.$rightside.append($create);
|
||||
|
||||
// make an empty profile for the user on their first visit
|
||||
todo();
|
||||
};
|
||||
|
||||
var onCryptpadReady = function () {
|
||||
|
||||
@@ -95,7 +95,7 @@ define([
|
||||
}
|
||||
});
|
||||
|
||||
Slide.setModal(APP, $modal, $content, $pad, ifrw, slideOptions, initialState);
|
||||
Slide.setModal($modal, $content, $pad, ifrw, slideOptions, initialState);
|
||||
|
||||
var enterPresentationMode = function (shouldLog) {
|
||||
Slide.show(true, editor.getValue());
|
||||
@@ -199,70 +199,6 @@ define([
|
||||
}
|
||||
};
|
||||
|
||||
var createFileDialog = function () {
|
||||
var $body = $iframe.find('body');
|
||||
var $block = $body.find('#fileDialog');
|
||||
if (!$block.length) {
|
||||
$block = $('<div>', {id: "fileDialog"}).appendTo($body);
|
||||
}
|
||||
$block.html('');
|
||||
$('<span>', {
|
||||
'class': 'close fa fa-times',
|
||||
'title': Messages.filePicker_close
|
||||
}).click(function () {
|
||||
$block.hide();
|
||||
}).appendTo($block);
|
||||
var $description = $('<p>').text(Messages.filePicker_description);
|
||||
$block.append($description);
|
||||
var $filter = $('<p>').appendTo($block);
|
||||
var $container = $('<span>', {'class': 'fileContainer'}).appendTo($block);
|
||||
var updateContainer = function () {
|
||||
$container.html('');
|
||||
var filter = $filter.find('.filter').val().trim();
|
||||
var list = Cryptpad.getUserFilesList();
|
||||
var fo = Cryptpad.getFO();
|
||||
list.forEach(function (id) {
|
||||
var data = fo.getFileData(id);
|
||||
var name = fo.getTitle(id);
|
||||
if (filter && name.toLowerCase().indexOf(filter.toLowerCase()) === -1) {
|
||||
return;
|
||||
}
|
||||
var $span = $('<span>', {'class': 'element'}).appendTo($container);
|
||||
var $inner = $('<span>').text(name);
|
||||
$span.append($inner).click(function () {
|
||||
var parsed = Cryptpad.parsePadUrl(data.href);
|
||||
var hexFileName = Cryptpad.base64ToHex(parsed.hashData.channel);
|
||||
var src = '/blob/' + hexFileName.slice(0,2) + '/' + hexFileName;
|
||||
var mt = '<media-tag src="' + src + '" data-crypto-key="cryptpad:' + parsed.hashData.key + '"></media-tag>';
|
||||
editor.replaceSelection(mt);
|
||||
//var cleanName = name.replace(/[\[\]]/g, '');
|
||||
//var text = '';
|
||||
//editor.replaceSelection(text);
|
||||
$block.hide();
|
||||
});
|
||||
});
|
||||
};
|
||||
var to;
|
||||
$('<input>', {
|
||||
type: 'text',
|
||||
'class': 'filter',
|
||||
'placeholder': Messages.filePicker_filter
|
||||
}).appendTo($filter).on('keypress', function () {
|
||||
if (to) { window.clearTimeout(to); }
|
||||
to = window.setTimeout(updateContainer, 300);
|
||||
});
|
||||
$filter.append(' '+Messages.or+' ');
|
||||
var data = {FM: APP.FM};
|
||||
$filter.append(Cryptpad.createButton('upload', false, data, function () {
|
||||
$block.hide();
|
||||
}));
|
||||
updateContainer();
|
||||
$body.keydown(function (e) {
|
||||
if (e.which === 27) { $block.hide(); }
|
||||
});
|
||||
$block.show();
|
||||
};
|
||||
|
||||
var createPrintDialog = function () {
|
||||
var slideOptionsTmp = {
|
||||
title: false,
|
||||
@@ -282,7 +218,6 @@ define([
|
||||
// Slide number
|
||||
$('<input>', {type: 'checkbox', id: 'checkNumber', checked: slideOptionsTmp.slide}).on('change', function () {
|
||||
var c = this.checked;
|
||||
console.log(c);
|
||||
slideOptionsTmp.slide = c;
|
||||
}).appendTo($p).css('width', 'auto');
|
||||
$('<label>', {'for': 'checkNumber'}).text(Messages.printSlideNumber).appendTo($p);
|
||||
@@ -350,6 +285,8 @@ define([
|
||||
};
|
||||
Title = Cryptpad.createTitle(titleCfg, config.onLocal, Cryptpad);
|
||||
|
||||
Slide.setTitle(Title);
|
||||
|
||||
Metadata = Cryptpad.createMetadata(UserList, Title, metadataCfg, Cryptpad);
|
||||
|
||||
var configTb = {
|
||||
@@ -426,12 +363,23 @@ define([
|
||||
var $forgetPad = Cryptpad.createButton('forget', true, {}, forgetCb);
|
||||
$rightside.append($forgetPad);
|
||||
|
||||
var fileDialogCfg = {
|
||||
$body: $iframe.find('body'),
|
||||
onSelect: function (href) {
|
||||
var parsed = Cryptpad.parsePadUrl(href);
|
||||
var hexFileName = Cryptpad.base64ToHex(parsed.hashData.channel);
|
||||
var src = '/blob/' + hexFileName.slice(0,2) + '/' + hexFileName;
|
||||
var mt = '<media-tag src="' + src + '" data-crypto-key="cryptpad:' + parsed.hashData.key + '"></media-tag>';
|
||||
editor.replaceSelection(mt);
|
||||
},
|
||||
data: APP
|
||||
};
|
||||
$('<button>', {
|
||||
title: Messages.filePickerButton,
|
||||
'class': 'rightside-button fa fa-picture-o',
|
||||
style: 'font-size: 17px'
|
||||
}).click(function () {
|
||||
$('body').append(createFileDialog());
|
||||
Cryptpad.createFileDialog(fileDialogCfg);
|
||||
}).appendTo($rightside);
|
||||
|
||||
var $previewButton = APP.$previewButton = Cryptpad.createButton(null, true);
|
||||
@@ -472,9 +420,7 @@ define([
|
||||
//$('body').append(createPrintDialog());
|
||||
}).append($('<span>', {'class': 'drawer'}).text(Messages.printText));
|
||||
|
||||
// TODO reenable this when it is working again
|
||||
$printButton = $printButton;
|
||||
//$drawer.append($printButton);
|
||||
$drawer.append($printButton);
|
||||
|
||||
var $slideOptions = $('<button>', {
|
||||
title: Messages.slideOptionsTitle,
|
||||
@@ -689,7 +635,9 @@ define([
|
||||
toolbar.reconnecting(info.myId);
|
||||
Cryptpad.findOKButton().click();
|
||||
} else {
|
||||
Cryptpad.alert(Messages.common_connectionLost, undefined, true);
|
||||
if (!Slide.isPresentURL()) {
|
||||
Cryptpad.alert(Messages.common_connectionLost, undefined, true);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -9,7 +9,6 @@ define([
|
||||
content: [],
|
||||
changeHandlers: [],
|
||||
};
|
||||
var APP;
|
||||
var ifrw;
|
||||
var $modal;
|
||||
var $content;
|
||||
@@ -19,6 +18,7 @@ define([
|
||||
var separator = '<hr data-pewpew="pezpez">';
|
||||
var separatorReg = /<hr data\-pewpew="pezpez">/g;
|
||||
var slideClass = 'slide-frame';
|
||||
var Title;
|
||||
|
||||
Slide.onChange = function (f) {
|
||||
if (typeof(f) === 'function') {
|
||||
@@ -98,7 +98,7 @@ define([
|
||||
$('<div>', {'class': 'slideDate'}).text(new Date().toLocaleDateString()).appendTo($(el));
|
||||
}
|
||||
if (options.title) {
|
||||
$('<div>', {'class': 'slideTitle'}).text(APP.title).appendTo($(el));
|
||||
$('<div>', {'class': 'slideTitle'}).text(Title.title).appendTo($(el));
|
||||
}
|
||||
});
|
||||
$content.removeClass('transition');
|
||||
@@ -304,17 +304,20 @@ define([
|
||||
};
|
||||
|
||||
|
||||
Slide.setModal = function (appObj, $m, $c, $p, iframe, opt, ph) {
|
||||
Slide.setModal = function ($m, $c, $p, iframe, opt, ph) {
|
||||
$modal = Slide.$modal = $m;
|
||||
$content = Slide.$content = $c;
|
||||
$pad = Slide.$pad = $p;
|
||||
ifrw = Slide.ifrw = iframe;
|
||||
placeholder = Slide.placeholder = ph;
|
||||
options = Slide.options = opt;
|
||||
APP = appObj;
|
||||
addEvent();
|
||||
addSwipeEvents();
|
||||
};
|
||||
|
||||
Slide.setTitle = function (titleObj) {
|
||||
Title = titleObj;
|
||||
};
|
||||
|
||||
return Slide;
|
||||
});
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
@import "/customize/src/less/variables.less";
|
||||
@import "/customize/src/less/mixins.less";
|
||||
@import "/common/markdown.less";
|
||||
|
||||
// used for slides
|
||||
.viewportRatio (@x, @y, @p: 100) {
|
||||
@@ -63,6 +64,7 @@ body {
|
||||
display:block;
|
||||
}
|
||||
html, body {
|
||||
height: auto;
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
}
|
||||
@@ -74,6 +76,20 @@ body {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
.cp #modal {
|
||||
display: none !important;
|
||||
}
|
||||
.cp {
|
||||
flex: 1 !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
.userlist-drawer {
|
||||
display: none !important;
|
||||
}
|
||||
#editorContainer {
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -98,30 +114,37 @@ body {
|
||||
}
|
||||
}
|
||||
}
|
||||
.preview .cp {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
div#modal:not(.shown) {
|
||||
position: relative;
|
||||
top: auto;
|
||||
left: auto;
|
||||
width: auto;
|
||||
display: block;
|
||||
height: 100%;
|
||||
#content {
|
||||
.slide-container {
|
||||
width: 100%;
|
||||
.preview {
|
||||
.cp {
|
||||
width: 50vw;
|
||||
overflow: hidden;
|
||||
div#modal:not(.shown) {
|
||||
position: relative;
|
||||
top: auto;
|
||||
left: auto;
|
||||
width: auto;
|
||||
display: block;
|
||||
height: 100%;
|
||||
#content {
|
||||
.slide-container {
|
||||
width: 100%;
|
||||
}
|
||||
.slide-frame {
|
||||
width: 50vw;
|
||||
height: 28.125vw; // height:width ratio = 9/16 = .5625
|
||||
max-height: ~"calc(100vh - 96px)";
|
||||
max-width: ~"calc(16 / 9 * (100vh - 96px))";
|
||||
//max-height: 100vh;
|
||||
//max-width: 177.78vh; // 16/9 = 1.778
|
||||
}
|
||||
}
|
||||
.slide-frame {
|
||||
width: 50vw;
|
||||
height: 28.125vw; // height:width ratio = 9/16 = .5625
|
||||
max-height: 100vh;
|
||||
max-width: 177.78vh; // 16/9 = 1.778
|
||||
#button_exit {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
#button_exit {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
.CodeMirror {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.cp {
|
||||
@@ -156,7 +179,7 @@ body {
|
||||
.slide-container {
|
||||
width: 90vw;
|
||||
height: 100vh;
|
||||
margin: 0vh 5vw;
|
||||
margin: 0vh 5vw !important;
|
||||
display: flex;
|
||||
&:last-child {
|
||||
height: ~"calc(100vh - 2px)";
|
||||
@@ -303,16 +326,7 @@ div#modal #content, #print {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
display: block;
|
||||
position: relative;
|
||||
border: 1px solid #333;
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
padding-left: .25vw;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.markdown_preformatted-code;
|
||||
|
||||
ul, ol {
|
||||
min-width: 50%;
|
||||
@@ -352,43 +366,7 @@ div#modal #content, #print {
|
||||
}
|
||||
}
|
||||
|
||||
#fileDialog {
|
||||
position: absolute;
|
||||
background-color: rgba(200, 200, 200, 0.8);
|
||||
top: 15vh; bottom: 15vh;
|
||||
left: 10vw; right: 10vw;
|
||||
border: 1px solid black;
|
||||
z-index: 100000;
|
||||
overflow: auto;
|
||||
display: none;
|
||||
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.element {
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 5px;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
background-color: white;
|
||||
padding: 5px;
|
||||
align-items: center;
|
||||
span {
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
@import "/common/file-dialog.less";
|
||||
|
||||
.slide-frame * {
|
||||
max-width: 100%;
|
||||
|
||||
378
www/todo/example/assets/todomvc-app-css/index.css
Normal file
378
www/todo/example/assets/todomvc-app-css/index.css
Normal file
@@ -0,0 +1,378 @@
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
color: inherit;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-font-smoothing: antialiased;
|
||||
font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
body {
|
||||
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
line-height: 1.4em;
|
||||
background: #f5f5f5;
|
||||
color: #4d4d4d;
|
||||
min-width: 230px;
|
||||
max-width: 550px;
|
||||
margin: 0 auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-font-smoothing: antialiased;
|
||||
font-smoothing: antialiased;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type="checkbox"] {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.todoapp {
|
||||
background: #fff;
|
||||
margin: 130px 0 40px 0;
|
||||
position: relative;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
|
||||
0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.todoapp input::-webkit-input-placeholder {
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
color: #e6e6e6;
|
||||
}
|
||||
|
||||
.todoapp input::-moz-placeholder {
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
color: #e6e6e6;
|
||||
}
|
||||
|
||||
.todoapp input::input-placeholder {
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
color: #e6e6e6;
|
||||
}
|
||||
|
||||
.todoapp h1 {
|
||||
position: absolute;
|
||||
top: -155px;
|
||||
width: 100%;
|
||||
font-size: 100px;
|
||||
font-weight: 100;
|
||||
text-align: center;
|
||||
color: rgba(175, 47, 47, 0.15);
|
||||
-webkit-text-rendering: optimizeLegibility;
|
||||
-moz-text-rendering: optimizeLegibility;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
.new-todo,
|
||||
.edit {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
font-size: 24px;
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: 1.4em;
|
||||
border: 0;
|
||||
outline: none;
|
||||
color: inherit;
|
||||
padding: 6px;
|
||||
border: 1px solid #999;
|
||||
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-font-smoothing: antialiased;
|
||||
font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.new-todo {
|
||||
padding: 16px 16px 16px 60px;
|
||||
border: none;
|
||||
background: rgba(0, 0, 0, 0.003);
|
||||
box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
|
||||
}
|
||||
|
||||
.main {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
border-top: 1px solid #e6e6e6;
|
||||
}
|
||||
|
||||
label[for='toggle-all'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggle-all {
|
||||
position: absolute;
|
||||
top: -55px;
|
||||
left: -12px;
|
||||
width: 60px;
|
||||
height: 34px;
|
||||
text-align: center;
|
||||
border: none; /* Mobile Safari */
|
||||
}
|
||||
|
||||
.toggle-all:before {
|
||||
content: '❯';
|
||||
font-size: 22px;
|
||||
color: #e6e6e6;
|
||||
padding: 10px 27px 10px 27px;
|
||||
}
|
||||
|
||||
.toggle-all:checked:before {
|
||||
color: #737373;
|
||||
}
|
||||
|
||||
.todo-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.todo-list li {
|
||||
position: relative;
|
||||
font-size: 24px;
|
||||
border-bottom: 1px solid #ededed;
|
||||
}
|
||||
|
||||
.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;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.todo-list li .toggle:after {
|
||||
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>');
|
||||
}
|
||||
|
||||
.todo-list li .toggle:checked:after {
|
||||
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
|
||||
}
|
||||
|
||||
.todo-list li label {
|
||||
white-space: pre-line;
|
||||
word-break: break-all;
|
||||
padding: 15px 60px 15px 15px;
|
||||
margin-left: 45px;
|
||||
display: block;
|
||||
line-height: 1.2;
|
||||
transition: color 0.4s;
|
||||
}
|
||||
|
||||
.todo-list li.completed label {
|
||||
color: #d9d9d9;
|
||||
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: 30px;
|
||||
color: #cc9a9a;
|
||||
margin-bottom: 11px;
|
||||
transition: color 0.2s ease-out;
|
||||
}
|
||||
|
||||
.todo-list li .destroy:hover {
|
||||
color: #af5b5e;
|
||||
}
|
||||
|
||||
.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: 10px 15px;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
border-top: 1px solid #e6e6e6;
|
||||
}
|
||||
|
||||
.footer:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
|
||||
0 8px 0 -3px #f6f6f6,
|
||||
0 9px 1px -3px rgba(0, 0, 0, 0.2),
|
||||
0 16px 0 -6px #f6f6f6,
|
||||
0 17px 2px -6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.todo-count {
|
||||
float: left;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.todo-count strong {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.filters {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.filters li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.filters li a {
|
||||
color: inherit;
|
||||
margin: 3px;
|
||||
padding: 3px 7px;
|
||||
text-decoration: none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.filters li a.selected,
|
||||
.filters li a:hover {
|
||||
border-color: rgba(175, 47, 47, 0.1);
|
||||
}
|
||||
|
||||
.filters li a.selected {
|
||||
border-color: rgba(175, 47, 47, 0.2);
|
||||
}
|
||||
|
||||
.clear-completed,
|
||||
html .clear-completed:active {
|
||||
float: right;
|
||||
position: relative;
|
||||
line-height: 20px;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.clear-completed:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin: 65px auto 0;
|
||||
color: #bfbfbf;
|
||||
font-size: 10px;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.info p {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.info a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.info a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/*
|
||||
Hack to remove background from Mobile Safari.
|
||||
Can't use it globally since it destroys checkboxes in Firefox
|
||||
*/
|
||||
@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 {
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 430px) {
|
||||
.footer {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.filters {
|
||||
bottom: 10px;
|
||||
}
|
||||
}
|
||||
141
www/todo/example/assets/todomvc-common/base.css
Normal file
141
www/todo/example/assets/todomvc-common/base.css
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
249
www/todo/example/assets/todomvc-common/base.js
Normal file
249
www/todo/example/assets/todomvc-common/base.js
Normal file
@@ -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);
|
||||
})();
|
||||
49
www/todo/example/index.html
Normal file
49
www/todo/example/index.html
Normal file
@@ -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>
|
||||
|
||||
25
www/todo/example/js/app.js
Normal file
25
www/todo/example/js/app.js
Normal file
@@ -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);
|
||||
})();
|
||||
270
www/todo/example/js/controller.js
Normal file
270
www/todo/example/js/controller.js
Normal file
@@ -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);
|
||||
52
www/todo/example/js/helpers.js
Normal file
52
www/todo/example/js/helpers.js
Normal file
@@ -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);
|
||||
120
www/todo/example/js/model.js
Normal file
120
www/todo/example/js/model.js
Normal file
@@ -0,0 +1,120 @@
|
||||
(function (window) {
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* Creates a new Model instance and hooks up the storage.
|
||||
*
|
||||
* @constructor
|
||||
* @param {object} storage A reference to the client side storage class
|
||||
*/
|
||||
function Model(storage) {
|
||||
this.storage = storage;
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a new todo model
|
||||
*
|
||||
* @param {string} [title] The title of the task
|
||||
* @param {function} [callback] The callback to fire after the model is created
|
||||
*/
|
||||
Model.prototype.create = function (title, callback) {
|
||||
title = title || '';
|
||||
callback = callback || function () {};
|
||||
|
||||
var newItem = {
|
||||
title: title.trim(),
|
||||
completed: false
|
||||
};
|
||||
|
||||
this.storage.save(newItem, callback);
|
||||
};
|
||||
|
||||
/**
|
||||
* Finds and returns a model in storage. If no query is given it'll simply
|
||||
* return everything. If you pass in a string or number it'll look that up as
|
||||
* the ID of the model to find. Lastly, you can pass it an object to match
|
||||
* against.
|
||||
*
|
||||
* @param {string|number|object} [query] A query to match models against
|
||||
* @param {function} [callback] The callback to fire after the model is found
|
||||
*
|
||||
* @example
|
||||
* model.read(1, func); // Will find the model with an ID of 1
|
||||
* model.read('1'); // Same as above
|
||||
* //Below will find a model with foo equalling bar and hello equalling world.
|
||||
* model.read({ foo: 'bar', hello: 'world' });
|
||||
*/
|
||||
Model.prototype.read = function (query, callback) {
|
||||
var queryType = typeof query;
|
||||
callback = callback || function () {};
|
||||
|
||||
if (queryType === 'function') {
|
||||
callback = query;
|
||||
return this.storage.findAll(callback);
|
||||
} else if (queryType === 'string' || queryType === 'number') {
|
||||
query = parseInt(query, 10);
|
||||
this.storage.find({ id: query }, callback);
|
||||
} else {
|
||||
this.storage.find(query, callback);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Updates a model by giving it an ID, data to update, and a callback to fire when
|
||||
* the update is complete.
|
||||
*
|
||||
* @param {number} id The id of the model to update
|
||||
* @param {object} data The properties to update and their new value
|
||||
* @param {function} callback The callback to fire when the update is complete.
|
||||
*/
|
||||
Model.prototype.update = function (id, data, callback) {
|
||||
this.storage.save(data, callback, id);
|
||||
};
|
||||
|
||||
/**
|
||||
* Removes a model from storage
|
||||
*
|
||||
* @param {number} id The ID of the model to remove
|
||||
* @param {function} callback The callback to fire when the removal is complete.
|
||||
*/
|
||||
Model.prototype.remove = function (id, callback) {
|
||||
this.storage.remove(id, callback);
|
||||
};
|
||||
|
||||
/**
|
||||
* WARNING: Will remove ALL data from storage.
|
||||
*
|
||||
* @param {function} callback The callback to fire when the storage is wiped.
|
||||
*/
|
||||
Model.prototype.removeAll = function (callback) {
|
||||
this.storage.drop(callback);
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns a count of all todos
|
||||
*/
|
||||
Model.prototype.getCount = function (callback) {
|
||||
var todos = {
|
||||
active: 0,
|
||||
completed: 0,
|
||||
total: 0
|
||||
};
|
||||
|
||||
this.storage.findAll(function (data) {
|
||||
data.forEach(function (todo) {
|
||||
if (todo.completed) {
|
||||
todos.completed++;
|
||||
} else {
|
||||
todos.active++;
|
||||
}
|
||||
|
||||
todos.total++;
|
||||
});
|
||||
callback(todos);
|
||||
});
|
||||
};
|
||||
|
||||
// Export to window
|
||||
window.app = window.app || {};
|
||||
window.app.Model = Model;
|
||||
})(window);
|
||||
141
www/todo/example/js/store.js
Normal file
141
www/todo/example/js/store.js
Normal file
@@ -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);
|
||||
114
www/todo/example/js/template.js
Normal file
114
www/todo/example/js/template.js
Normal file
@@ -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);
|
||||
219
www/todo/example/js/view.js
Normal file
219
www/todo/example/js/view.js
Normal file
@@ -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));
|
||||
30
www/todo/index.html
Normal file
30
www/todo/index.html
Normal file
@@ -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.1.15"></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>
|
||||
|
||||
20
www/todo/inner.html
Normal file
20
www/todo/inner.html
Normal file
@@ -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.1.15"></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>
|
||||
|
||||
15
www/todo/inner.js
Normal file
15
www/todo/inner.js
Normal file
@@ -0,0 +1,15 @@
|
||||
define([
|
||||
'jquery',
|
||||
'css!/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);*/
|
||||
});
|
||||
229
www/todo/main.js
Normal file
229
www/todo/main.js
Normal file
@@ -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',
|
||||
|
||||
'css!/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();
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
83
www/todo/todo.js
Normal file
83
www/todo/todo.js
Normal file
@@ -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;
|
||||
});
|
||||
121
www/todo/todo.less
Normal file
121
www/todo/todo.less
Normal file
@@ -0,0 +1,121 @@
|
||||
@import "/customize/src/less/variables.less";
|
||||
@import "/customize/src/less/mixins.less";
|
||||
|
||||
@button-border: 2px;
|
||||
|
||||
html, body {
|
||||
margin: 0px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#toolbar {
|
||||
display: flex; // We need this to remove a 3px border at the bottom of the toolbar
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
#app {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.cryptpad-toolbar {
|
||||
padding: 0px;
|
||||
display: inline-block;
|
||||
}
|
||||
#container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-flow: column;
|
||||
padding: 20px;
|
||||
align-items: center;
|
||||
background-color: lighten(@toolbar-todo-bg, 15%);
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
@spacing: 15px;
|
||||
|
||||
#tasksList {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
min-width: 40%;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.cp-create-form {
|
||||
margin: @spacing;
|
||||
min-width: 40%;
|
||||
display: flex;
|
||||
|
||||
#newTodoName {
|
||||
flex: 1;
|
||||
margin-right: 15px;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
background-color: darken(@toolbar-todo-bg, 10%);
|
||||
color: #fff;
|
||||
padding: 5px 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
border-radius: 0;
|
||||
background-color: darken(@toolbar-todo-bg, 20%);
|
||||
border:0;
|
||||
&:hover {
|
||||
background-color: darken(@toolbar-todo-bg, 25%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cp-task {
|
||||
border: 1px solid black;
|
||||
padding: @spacing;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: white;
|
||||
|
||||
&.cp-task-complete {
|
||||
background-color: #f0f0f0;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.cp-task-text {
|
||||
margin: @spacing;
|
||||
flex: 1;
|
||||
word-wrap: break-word;
|
||||
min-width: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
.cp-task-date {
|
||||
margin: @spacing;
|
||||
}
|
||||
.cp-task-remove {
|
||||
margin: @spacing;
|
||||
cursor: pointer;
|
||||
}
|
||||
.cp-task-checkbox {
|
||||
font-size: 45px;
|
||||
width: 45px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.cp-task-checkbox-checked {
|
||||
|
||||
}
|
||||
.cp-task-checkbox-unchecked {
|
||||
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 0;
|
||||
border:0;
|
||||
}
|
||||
}
|
||||
@@ -212,6 +212,18 @@ window.canvas = canvas;
|
||||
});
|
||||
};
|
||||
|
||||
module.FM = Cryptpad.createFileManager({});
|
||||
module.upload = function (title) {
|
||||
$canvas[0].toBlob(function (blob) {
|
||||
blob.name = title;
|
||||
var reader = new FileReader();
|
||||
reader.onloadend = function () {
|
||||
module.FM.handleFile(blob);
|
||||
};
|
||||
reader.readAsArrayBuffer(blob);
|
||||
});
|
||||
};
|
||||
|
||||
var initializing = true;
|
||||
|
||||
var $bar = $('#toolbar');
|
||||
@@ -337,6 +349,15 @@ window.canvas = canvas;
|
||||
var $export = Cryptpad.createButton('export', true, {}, saveImage);
|
||||
$rightside.append($export);
|
||||
|
||||
Cryptpad.createButton('savetodrive', true, {}, function () {})
|
||||
.click(function () {
|
||||
Cryptpad.prompt(Messages.exportPrompt, document.title + '.png',
|
||||
function (name) {
|
||||
if (name === null || !name.trim()) { return; }
|
||||
module.upload(name);
|
||||
});
|
||||
}).appendTo($rightside);
|
||||
|
||||
var $forget = Cryptpad.createButton('forget', true, {}, function (err) {
|
||||
if (err) { return; }
|
||||
setEditable(false);
|
||||
@@ -344,7 +365,6 @@ window.canvas = canvas;
|
||||
});
|
||||
$rightside.append($forget);
|
||||
|
||||
|
||||
var editHash;
|
||||
|
||||
if (!readOnly) {
|
||||
|
||||
Reference in New Issue
Block a user