Merge branch 'soon'
This commit is contained in:
yflory
commit
a0dd0ccfa3
41 changed files with 3212 additions and 214 deletions
|
|
@ -2,6 +2,7 @@ node_modules/
|
|||
www/bower_components/
|
||||
www/common/pdfjs/
|
||||
www/common/tippy/
|
||||
www/common/jquery-ui/
|
||||
|
||||
server.js
|
||||
www/common/media-tag.js
|
||||
|
|
@ -14,6 +15,8 @@ www/pad/wysiwygarea-plugin.js
|
|||
www/pad/mediatag-plugin.js
|
||||
www/pad/mediatag-plugin-dialog.js
|
||||
|
||||
www/kanban/jkanban.js
|
||||
|
||||
www/common/media-tag-nacl.min.js
|
||||
|
||||
customize/
|
||||
|
|
|
|||
|
|
@ -45,8 +45,7 @@ define([], function () {
|
|||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
justify-content: space-evenly;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
@media screen and (max-height: 800px) {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
define([
|
||||
'/api/config',
|
||||
'/common/hyperscript.js',
|
||||
'/common/common-language.js',
|
||||
'/customize/messages.js',
|
||||
'jquery',
|
||||
'/customize/application_config.js',
|
||||
], function (Config, h, Msg, $, AppConfig) {
|
||||
], function (Config, h, Language, Msg, $, AppConfig) {
|
||||
var Pages = {};
|
||||
var urlArgs = Config.requireConf.urlArgs;
|
||||
|
||||
|
|
@ -13,6 +14,26 @@ define([
|
|||
return e;
|
||||
};
|
||||
|
||||
var languageSelector = function () {
|
||||
var options = [];
|
||||
var languages = Msg._languages;
|
||||
var selected = Msg._languageUsed;
|
||||
var keys = Object.keys(languages).sort();
|
||||
keys.forEach(function (l) {
|
||||
var attr = { value: l };
|
||||
if (selected === l) { attr.selected = 'selected'; }
|
||||
options.push(h('option', attr, languages[l]));
|
||||
});
|
||||
var select = h('select', {}, options);
|
||||
$(select).change(function () {
|
||||
Language.setLanguage($(select).val() || '', null, function () {
|
||||
window.location.reload();
|
||||
});
|
||||
});
|
||||
return select;
|
||||
};
|
||||
languageSelector = languageSelector; // jshint
|
||||
|
||||
var footerCol = function (title, L, literal) {
|
||||
return h('div.col-6.col-sm-3', [
|
||||
h('ul.list-unstyled', [
|
||||
|
|
@ -47,7 +68,8 @@ define([
|
|||
h('div.row', [
|
||||
footerCol(null, [
|
||||
h('div.cp-bio-foot', [
|
||||
h('p', Msg.main_footerText)
|
||||
h('p', Msg.main_footerText),
|
||||
//languageSelector()
|
||||
])
|
||||
], ''),
|
||||
footerCol('footer_applications', [
|
||||
|
|
@ -56,6 +78,7 @@ define([
|
|||
footLink('/code/', 'main_code'),
|
||||
footLink('/slide/', 'main_slide'),
|
||||
footLink('/poll/', 'main_poll'),
|
||||
footLink('/kanban/', 'main_kanban'),
|
||||
footLink('/whiteboard/', null, Msg.type.whiteboard)
|
||||
]),
|
||||
footerCol('footer_aboutUs', [
|
||||
|
|
@ -72,7 +95,7 @@ define([
|
|||
])
|
||||
])
|
||||
]),
|
||||
h('div.cp-version-footer', "CryptPad v2.1.0 (Badger)")
|
||||
h('div.cp-version-footer', "CryptPad v2.2.0 (Coati)")
|
||||
]);
|
||||
};
|
||||
|
||||
|
|
@ -129,8 +152,8 @@ define([
|
|||
h('div.container-fluid.cp-about-intro', [
|
||||
h('div.container', [
|
||||
h('center', [
|
||||
h('h1', Msg.about),
|
||||
setHTML(h('p'), 'CryptPad is created inside of the Research Team at <a href="http://xwiki.com">XWiki SAS</a>, a small business located in Paris France and Iasi Romania. There are 3 core team members working on CryptPad plus a number of contributors both inside and outside of XWiki SAS.'),
|
||||
h('h1', Msg.about),
|
||||
setHTML(h('p'), Msg.about_intro),
|
||||
]),
|
||||
]),
|
||||
]),
|
||||
|
|
@ -138,7 +161,7 @@ define([
|
|||
h('div.row', [
|
||||
h('div.cp-develop-about.col-12',[
|
||||
h('div.cp-icon-cent'),
|
||||
h('h2.text-center', 'Core Developers')
|
||||
h('h2.text-center', Msg.about_core)
|
||||
]),
|
||||
]),
|
||||
h('div.row.align-items-center', [
|
||||
|
|
@ -189,7 +212,7 @@ define([
|
|||
h('div.row', [
|
||||
h('div.cp-develop-about.col-12.cp-contrib',[
|
||||
h('div.cp-icon-cent'),
|
||||
h('h2.text-center', 'Key Contributors')
|
||||
h('h2.text-center', Msg.about_contributors)
|
||||
]),
|
||||
]),
|
||||
h('div.row.align-items-center', [
|
||||
|
|
@ -566,6 +589,7 @@ define([
|
|||
[ 'code', '/code/', Msg.main_codePad, 'fa-file-code-o' ],
|
||||
[ 'slide', '/slide/', Msg.main_slidePad, 'fa-file-powerpoint-o' ],
|
||||
[ 'poll', '/poll/', Msg.main_pollPad, 'fa-calendar' ],
|
||||
[ 'kanban', '/kanban/', Msg.main_kanbanPad, 'fa-calendar' ],
|
||||
[ 'whiteboard', '/whiteboard/', Msg.main_whiteboardPad, 'fa-paint-brush' ],
|
||||
[ 'recent', '/drive/', Msg.main_localPads, 'fa-hdd-o' ]
|
||||
].filter(function (x) {
|
||||
|
|
|
|||
|
|
@ -115,6 +115,10 @@
|
|||
@colortheme_todo-color: #000;
|
||||
@colortheme_todo-warn: #cd2532;
|
||||
|
||||
@colortheme_kanban-bg: #8C4;
|
||||
@colortheme_kanban-color: #000;
|
||||
@colortheme_kanban-warn: #e6385d;
|
||||
|
||||
// Sidebar layout (profile / settings)
|
||||
@colortheme_sidebar-active: #fff;
|
||||
@colortheme_sidebar-left-bg: #eee;
|
||||
|
|
@ -131,6 +135,7 @@
|
|||
@cryptpad_color_grey: #999999;
|
||||
@cryptpad_header_col: #1E1F1F;
|
||||
@cryptpad_text_col: #3F4141;
|
||||
@cryptpad_color_light_blue: #00b7d8;
|
||||
|
||||
@colortheme_checkmark-back0: @colortheme_form-bg-alt;
|
||||
@colortheme_checkmark-back0-active: @colortheme_form-border;
|
||||
|
|
|
|||
|
|
@ -103,7 +103,7 @@
|
|||
flex-flow: column;
|
||||
align-items: center;
|
||||
flex: 1 0 auto;
|
||||
justify-content: space-evenly;
|
||||
justify-content: space-around;
|
||||
& > div {
|
||||
width: 400px;
|
||||
max-width: 100%;
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
right: 5px;
|
||||
}
|
||||
.cp-help-text {
|
||||
color: @color;
|
||||
color: contrast(lighten(@bg-color, 15%), #fff, #000); //@color;
|
||||
margin: 0;
|
||||
padding: 15px;
|
||||
a {
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
.cp-icon-color-profile { color: @colortheme_settings-bg; }
|
||||
.cp-icon-color-default { color: @colortheme_default-bg; }
|
||||
.cp-icon-color-todo { color: @colortheme_todo-bg; }
|
||||
.cp-icon-color-kanban { color: @colortheme_kanban-bg; }
|
||||
|
||||
.cp-border-color-pad { border-color: @colortheme_pad-bg !important; }
|
||||
.cp-border-color-code { border-color: @colortheme_code-bg !important; }
|
||||
|
|
@ -26,5 +27,6 @@
|
|||
.cp-border-color-profile { border-color: @colortheme_settings-bg !important; }
|
||||
.cp-border-color-default { border-color: @colortheme_default-bg !important; }
|
||||
.cp-border-color-todo { border-color: @colortheme_todo-bg !important; }
|
||||
.cp-border-color-kanban { border-color: @colortheme_kanban-bg !important; }
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -170,9 +170,8 @@
|
|||
.nav-link {
|
||||
padding: 0.5em 0.7em;
|
||||
&:hover {
|
||||
font-size: 1.05em;
|
||||
//transform: scale(1.05);
|
||||
};
|
||||
color: @cryptpad_color_light_blue;
|
||||
}
|
||||
}
|
||||
.cp-register-btn {
|
||||
border: 2px solid #4591C4;
|
||||
|
|
|
|||
|
|
@ -1,25 +1,31 @@
|
|||
@import (once) "./tools.less";
|
||||
|
||||
.tokenfield_main () {
|
||||
.ui-autocomplete {
|
||||
z-index: 100001; // alertify + 1
|
||||
}
|
||||
.tokenfield {
|
||||
.tools_unselectable();
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
height: auto;
|
||||
min-height: 34px;
|
||||
padding-bottom: 0px;
|
||||
background-color: unset;
|
||||
border: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
margin: 0 10px;
|
||||
padding: 0;
|
||||
width: ~"calc(100% - 20px)";
|
||||
.token {
|
||||
box-sizing: border-box;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border: 1px solid #d9d9d9;
|
||||
background-color: #ededed;
|
||||
white-space: nowrap;
|
||||
margin: 10px 5px;
|
||||
margin: 2px 0;
|
||||
height: 24px;
|
||||
vertical-align: middle;
|
||||
cursor: default;
|
||||
|
|
@ -50,7 +56,7 @@
|
|||
.close {
|
||||
font-family: Arial;
|
||||
display: inline-block;
|
||||
line-height: 24px;
|
||||
line-height: 1.49em;
|
||||
font-size: 1.1em;
|
||||
margin-left: 5px;
|
||||
float: none;
|
||||
|
|
@ -73,6 +79,8 @@
|
|||
margin: 0 !important; // Override alertify
|
||||
box-shadow: none;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
min-width: 100% !important;
|
||||
&:focus {
|
||||
border-color: transparent;
|
||||
outline: 0;
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
}
|
||||
|
||||
.tools_unselectable () {
|
||||
user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
|
|
|
|||
|
|
@ -40,4 +40,5 @@ body.cp-app-profile { @import "../../../profile/app-profile.less"; }
|
|||
body.cp-app-settings { @import "../../../settings/app-settings.less"; }
|
||||
body.cp-app-debug { @import "../../../debug/app-debug.less"; }
|
||||
body.cp-app-worker { @import "../../../worker/app-worker.less"; }
|
||||
body.cp-app-kanban { @import "../../../kanban/app-kanban.less"; }
|
||||
|
||||
|
|
|
|||
|
|
@ -80,6 +80,7 @@ body {
|
|||
}
|
||||
.nav-link {
|
||||
&:hover {
|
||||
color: inherit;
|
||||
transform: scale(1.05);
|
||||
};
|
||||
}
|
||||
|
|
@ -154,6 +155,7 @@ h4 {
|
|||
.cp-callout-code .fa { background-color: @colortheme_code-bg; }
|
||||
.cp-callout-slide .fa { background-color: @colortheme_slide-bg; }
|
||||
.cp-callout-poll .fa { background-color: @colortheme_poll-bg; }
|
||||
.cp-callout-kanban .fa { background-color: @colortheme_kanban-bg; }
|
||||
.cp-callout-whiteboard .fa { background-color: @colortheme_whiteboard-bg; }
|
||||
.cp-callout-recent .fa { background-color: @colortheme_drive-bg; }
|
||||
.cp-hidden { display: none !important; }
|
||||
|
|
|
|||
|
|
@ -2,12 +2,12 @@ define(function () {
|
|||
var out = {};
|
||||
|
||||
out.main_title = "CryptPad : Éditeur collaboratif en temps réel, zero knowledge";
|
||||
out.main_slogan = "L'unité est la force, la collaboration est la clé";
|
||||
|
||||
out.type = {};
|
||||
out.type.pad = 'Texte';
|
||||
out.type.code = 'Code';
|
||||
out.type.poll = 'Sondage';
|
||||
out.type.kanban = 'Kanban';
|
||||
out.type.slide = 'Présentation';
|
||||
out.type.drive = 'CryptDrive';
|
||||
out.type.whiteboard = "Tableau Blanc";
|
||||
|
|
@ -21,6 +21,7 @@ define(function () {
|
|||
out.button_newpoll = 'Nouveau sondage';
|
||||
out.button_newslide = 'Nouvelle présentation';
|
||||
out.button_newwhiteboard = 'Nouveau tableau blanc';
|
||||
out.button_newkanban = 'Nouveau kanban';
|
||||
|
||||
out.updated_0_common_connectionLost = "<b>Connexion au serveur perdue</b><br>Vous êtes désormais en mode lecture seule jusqu'au retour de la connexion.";
|
||||
out.common_connectionLost = out.updated_0_common_connectionLost;
|
||||
|
|
@ -246,6 +247,17 @@ define(function () {
|
|||
out.pad_mediatagWidth = "Largeur (px)";
|
||||
out.pad_mediatagHeight = "Hauteur (px)";
|
||||
|
||||
// Kanban
|
||||
out.kanban_newBoard = "Nouveau tableau";
|
||||
out.kanban_item = "Élément {0}"; // Item number for initial content
|
||||
out.kanban_todo = "À faire";
|
||||
out.kanban_done = "Terminé";
|
||||
out.kanban_working = "En cours";
|
||||
out.kanban_deleteBoard = "Êtes-vous sûr de vouloir supprimer ce tableau ?";
|
||||
out.kanban_addBoard = "Ajouter un tableau";
|
||||
out.kanban_removeItem = "Supprimer cet élément";
|
||||
out.kanban_removeItemConfirm = "Êtes-vous sûr de vouloir supprimer cet élément ?";
|
||||
|
||||
// Polls
|
||||
|
||||
out.poll_title = "Sélecteur de date Zero Knowledge";
|
||||
|
|
@ -367,6 +379,7 @@ define(function () {
|
|||
out.fm_searchName = "Recherche";
|
||||
out.fm_recentPadsName = "Pads récents";
|
||||
out.fm_ownedPadsName = "Pads en votre possession";
|
||||
out.fm_tagsName = "Mots-clés";
|
||||
out.fm_searchPlaceholder = "Rechercher...";
|
||||
out.fm_newButton = "Nouveau";
|
||||
out.fm_newButtonTitle = "Créer un nouveau pad ou un dossier, importer un fichier dans le dossier courant";
|
||||
|
|
@ -429,6 +442,8 @@ define(function () {
|
|||
out.fm_padIsOwned = "Vous êtes le propriétaire de ce pad";
|
||||
out.fm_padIsOwnedOther = "Ce pad est la propriété d'un autre utilisateur";
|
||||
out.fm_deletedPads = "Ces pads n'existent plus sur le serveur, ils ont été supprimés de votre CryptDrive: {0}";
|
||||
out.fm_tags_name = "Mot-clé";
|
||||
out.fm_tags_used = "Nombre d'utilisations";
|
||||
// File - Context menu
|
||||
out.fc_newfolder = "Nouveau dossier";
|
||||
out.fc_rename = "Renommer";
|
||||
|
|
@ -633,38 +648,24 @@ define(function () {
|
|||
// index.html
|
||||
|
||||
//about.html
|
||||
out.main_p2 = 'Ce projet utilise l\'éditeur visuel (WYSIWYG) <a href="http://ckeditor.com/">CKEditor</a>, l\'éditeur de code source <a href="https://codemirror.net/">CodeMirror</a>, et le moteur temps-réel <a href="https://github.com/xwiki-contrib/chainpad">ChainPad</a>.';
|
||||
out.main_howitworks_p1 = 'CryptPad utilise une variante de l\'algorithme d\'<a href="https://en.wikipedia.org/wiki/Operational_transformation">Operational transformation</a> qui est capable de trouver un consensus distribué en utilisant <a href="https://bitcoin.org/bitcoin.pdf">une chaîne de bloc Nakamoto</a>, un outil popularisé par le <a href="https://fr.wikipedia.org/wiki/Bitcoin">Bitcoin</a>. De cette manière, l\'algorithme évite la nécessité d\'utiliser un serveur central pour résoudre les conflits d\'édition de l\'Operational Transformation, et sans ce besoin de résolution des conflits le serveur peut rester ignorant du contenu qui est édité dans le pad.';
|
||||
out.about_intro = 'CryptPad est développé au sein de l\'équipe Recherche d\'<a href="http://xwiki.com">XWiki SAS</a>, une petite entreprise située à Paris en France et à Iasi en Roumanie. Il y a 3 développeurs principaux qui travaillent sur CryptPad, ainsi que quelques contributeurs à la fois dans et en dehors d\'XWiki SAS';
|
||||
out.about_core = 'Développeurs principaux';
|
||||
out.about_contributors = 'Contributeurs clés';
|
||||
|
||||
//contact.html
|
||||
out.main_about_p2 = 'Si vous avez des questions ou commentaires, vous pouvez <a href="https://twitter.com/cryptpad"><i class="fa fa-twitter"></i>nous tweeter</a>, ouvrir une issue sur <a href="https://github.com/xwiki-labs/cryptpad/issues/" title="our issue tracker"><i class="fa fa-github"></i>GitHub</a>, venir dire bonjour sur <a href="https://riot.im/app/#/room/#cryptpad:matrix.org" title="Matrix">notre <i class="fa fa-comment"></i>salle Matrix</a> ou IRC (#cryptpad sur irc.freenode.net), ou bien encore <a href="mailto:research@xwiki.com"><i class="fa fa-envelope"></i>nous envoyer un email</a>.';
|
||||
out.main_about_p22 = 'Tweetez nous';
|
||||
out.main_about_p23 = 'Ouvrez un ticket (GitHub)';
|
||||
out.main_about_p24 = 'Dites Bonjour (Matrix)';
|
||||
out.main_about_p25 = 'Envoyez-nous un email';
|
||||
out.main_about_p26 = 'Si vous avez une question ou des remarques, n\'hésitez pas à nous contacter !';
|
||||
|
||||
|
||||
out.main_info = "<h2>Collaborez avec confiance</h2><br>Développez vos idées en groupe avec des documents partagés; la technologie <strong>Zero Knowledge</strong> sécurise vos données.";
|
||||
out.main_catch_phrase = "Le Cloud Zero Knowledge";
|
||||
|
||||
out.main_howitworks = 'Comment ça fonctionne';
|
||||
out.main_zeroKnowledge = 'Zero Knowledge';
|
||||
out.main_zeroKnowledge_p = "Vous n'avez pas besoin de croire que nous n'<em>allons</em> pas regarder vos pads. Avec la technologie Zero Knowledge de CryptPad, nous ne <em>pouvons</em> pas le faire. Apprenez-en plus sur notre manière de <a href=\"privacy.html\" title='Protection des données'>protéger vos données</a>.";
|
||||
out.main_writeItDown = 'Prenez-en note';
|
||||
out.main_writeItDown_p = "Les plus grands projets naissent des plus petites idées. Prenez note de vos moments d'inspiration et de vos idées inattendues car vous ne savez pas lesquels seront des découvertes capitales.";
|
||||
out.main_share = 'Partagez le lien, partagez le pad';
|
||||
out.main_share_p = "Faites croître vos idées à plusieurs : réalisez des réunions efficaces, collaborez sur vos listes de tâches et réalisez des présentations rapides avec tous vos amis sur tous vos appareils.";
|
||||
out.main_organize = 'Soyez organisé';
|
||||
out.main_organize_p = "Avec CryptDrive, vous pouvez garder vos vues sur ce qui est important. Les dossiers vous permettent de garder la trace de vos projets et d'avoir une vision globale du travail effectué.";
|
||||
out.tryIt = 'Essayez-le !';
|
||||
out.main_richText = 'Éditeur de texte';
|
||||
out.main_richText_p = 'Éditez des documents texte collaborativement avec notre application <a href="http://ckeditor.com" target="_blank">CkEditor</a> temps-réel et Zero Knowledge.';
|
||||
out.main_code = 'Éditeur de code';
|
||||
out.main_code_p = 'Modifiez votre code collaborativement grâce à notre application <a href="https://www.codemirror.net" target="_blank">CodeMirror</a> temps-réel et Zero Knowledge.';
|
||||
out.main_slide = 'Présentations';
|
||||
out.main_slide_p = 'Créez vos présentations en syntaxe Markdown collaborativement de manière sécurisée et affichez les dans votre navigateur.';
|
||||
out.main_poll = 'Sondages';
|
||||
out.main_poll_p = 'Planifiez vos réunions ou évènements, ou votez pour la meilleure solution concernant votre problème.';
|
||||
out.main_drive = 'CryptDrive';
|
||||
|
||||
out.main_richTextPad = 'Pad de Texte Riche';
|
||||
|
|
@ -719,7 +720,7 @@ define(function () {
|
|||
out.policy_whatwetell = 'Ce que nous dévoilons à d\'autres à propos de vous';
|
||||
out.policy_whatwetell_p1 = 'Nous ne fournissons aucune information que nous récoltons ou que vous nous fournissez à des tierces parties à moins d\'y être contraints par la loi.';
|
||||
out.policy_links = 'Liens vers d\'autres sites';
|
||||
out.policy_links_p1 = 'Ce site contient des liens vers d\'autres sites, certains étant produits par d\'autres organisations. Nous ne sommes responsables des pratiques de confidentialité ou du contenu d\'aucun site externe. De manière générale, les liens vers des sites externes sont lancés dans une nouvelle fenêtre (ou onglet) du navigateur, pour rendre clair le fait que vous quittez CryptpPad.fr.';
|
||||
out.policy_links_p1 = 'Ce site contient des liens vers d\'autres sites, certains étant produits par d\'autres organisations. Nous ne sommes responsables des pratiques de confidentialité ou du contenu d\'aucun site externe. De manière générale, les liens vers des sites externes sont lancés dans une nouvelle fenêtre (ou onglet) du navigateur, pour rendre clair le fait que vous quittez CryptPad.fr.';
|
||||
out.policy_ads = 'Publicité';
|
||||
out.policy_ads_p1 = 'Nous n\'affichons pas de publicité en ligne, bien que nous puissions afficher des liens vers les sites des organisations qui financent nos recherches.';
|
||||
out.policy_choices = 'Vos choix';
|
||||
|
|
@ -1001,6 +1002,11 @@ define(function () {
|
|||
embed: 'Intégrez des images de votre disque <span class="fa fa-file-image-o"></span> ou de votre CryptDrive <span class="fa fa-image"></span> et exporter le contenu en tant que PNG sur votre disque <span class="fa fa-download"></span> ou votre CryptDrive <span class="fa fa-cloud-upload"></span>'
|
||||
};
|
||||
|
||||
out.help.kanban = {
|
||||
add: 'Ajoutez un tableau en utilisant le bouton <span class="fa fa-plus"></span> dans le coin supérieur-droit',
|
||||
task: 'Déplacez les éléments en les faisant glisser d\'un tableau à l\'autre',
|
||||
color: 'Modifiez les couleurs en cliquant sur les parties colorées à côté du titre de chaque tableau'
|
||||
};
|
||||
|
||||
out.initialState = [
|
||||
'<p>',
|
||||
|
|
|
|||
|
|
@ -2,12 +2,12 @@ define(function () {
|
|||
var out = {};
|
||||
|
||||
out.main_title = "CryptPad: Zero Knowledge, Collaborative Real Time Editing";
|
||||
out.main_slogan = "Unity is Strength - Collaboration is Key"; // TODO remove?
|
||||
|
||||
out.type = {};
|
||||
out.type.pad = 'Rich text';
|
||||
out.type.code = 'Code';
|
||||
out.type.poll = 'Poll';
|
||||
out.type.kanban = 'Kanban';
|
||||
out.type.slide = 'Presentation';
|
||||
out.type.drive = 'CryptDrive';
|
||||
out.type.whiteboard = 'Whiteboard';
|
||||
|
|
@ -21,6 +21,7 @@ define(function () {
|
|||
out.button_newpoll = 'New Poll';
|
||||
out.button_newslide = 'New Presentation';
|
||||
out.button_newwhiteboard = 'New Whiteboard';
|
||||
out.button_newkanban = 'New Kanban';
|
||||
|
||||
// NOTE: Remove updated_0_ if we need an updated_1_
|
||||
out.updated_0_common_connectionLost = "<b>Server Connection Lost</b><br>You're now in read-only mode until the connection is back.";
|
||||
|
|
@ -248,6 +249,17 @@ define(function () {
|
|||
out.pad_mediatagWidth = "Width (px)";
|
||||
out.pad_mediatagHeight = "Height (px)";
|
||||
|
||||
// Kanban
|
||||
out.kanban_newBoard = "New board";
|
||||
out.kanban_item = "Item {0}"; // Item number for initial content
|
||||
out.kanban_todo = "To Do";
|
||||
out.kanban_done = "Done";
|
||||
out.kanban_working = "Working";
|
||||
out.kanban_deleteBoard = "Are you sure you want to delete this board?";
|
||||
out.kanban_addBoard = "Add a board";
|
||||
out.kanban_removeItem = "Remove this item";
|
||||
out.kanban_removeItemConfirm = "Are you sure you want to delete this item?";
|
||||
|
||||
// Polls
|
||||
|
||||
out.poll_title = "Zero Knowledge Date Picker";
|
||||
|
|
@ -368,6 +380,7 @@ define(function () {
|
|||
out.fm_searchName = "Search";
|
||||
out.fm_recentPadsName = "Recent pads";
|
||||
out.fm_ownedPadsName = "Owned";
|
||||
out.fm_tagsName = "Tags";
|
||||
out.fm_searchPlaceholder = "Search...";
|
||||
out.fm_newButton = "New";
|
||||
out.fm_newButtonTitle = "Create a new pad or folder, import a file in the current folder";
|
||||
|
|
@ -430,6 +443,8 @@ define(function () {
|
|||
out.fm_padIsOwned = "You are the owner of this pad";
|
||||
out.fm_padIsOwnedOther = "This pad is owned by another user";
|
||||
out.fm_deletedPads = "These pads no longer exist on the server, they've been removed from your CryptDrive: {0}";
|
||||
out.fm_tags_name = "Tag name";
|
||||
out.fm_tags_used = "Number of uses";
|
||||
// File - Context menu
|
||||
out.fc_newfolder = "New folder";
|
||||
out.fc_rename = "Rename";
|
||||
|
|
@ -638,11 +653,11 @@ define(function () {
|
|||
|
||||
|
||||
//about.html
|
||||
out.main_p2 = 'This project uses the <a href="http://ckeditor.com/">CKEditor</a> Visual Editor, <a href="https://codemirror.net/">CodeMirror</a>, and the <a href="https://github.com/xwiki-contrib/chainpad">ChainPad</a> realtime engine.';
|
||||
out.main_howitworks_p1 = 'CryptPad uses a variant of the <a href="https://en.wikipedia.org/wiki/Operational_transformation">Operational transformation</a> algorithm which is able to find distributed consensus using a <a href="https://bitcoin.org/bitcoin.pdf">Nakamoto Blockchain</a>, a construct popularized by <a href="https://en.wikipedia.org/wiki/Bitcoin">Bitcoin</a>. This way the algorithm can avoid the need for a central server to resolve Operational Transform Edit Conflicts and without the need for resolving conflicts, the server can be kept unaware of the content which is being edited on the pad.';
|
||||
out.about_intro = 'CryptPad is created inside of the Research Team at <a href="http://xwiki.com">XWiki SAS</a>, a small business located in Paris France and Iasi Romania. There are 3 core team members working on CryptPad plus a number of contributors both inside and outside of XWiki SAS.';
|
||||
out.about_core = 'Core Developers';
|
||||
out.about_contributors = 'Key Contributors';
|
||||
|
||||
// contact.html
|
||||
out.main_about_p2 = 'If you have any questions or comments, feel free to reach out!<br/>You can <a href="https://twitter.com/cryptpad"><i class="fa fa-twitter"></i>tweet us</a>, open an issue <a href="https://github.com/xwiki-labs/cryptpad/issues/" title="our issue tracker">on <i class="fa fa-github"></i>GitHub</a>. Come say hi on <a href="https://riot.im/app/#/room/#cryptpad:matrix.org" title="Matrix">our <i class="fa fa-comment"></i>Matrix channel</a> or IRC (#cryptpad on irc.freenode.net), or <a href="mailto:research@xwiki.com"><i class="fa fa-envelope"></i>send us an email</a>.';
|
||||
out.main_about_p22 = 'Tweet us';
|
||||
out.main_about_p23 = 'open an issue on GitHub';
|
||||
out.main_about_p24 = 'say Hello (Matrix)';
|
||||
|
|
@ -652,25 +667,10 @@ define(function () {
|
|||
out.main_info = "<h2>Collaborate in Confidence</h2> Grow your ideas together with shared documents while <strong>Zero Knowledge</strong> technology secures your privacy; <strong>even from us</strong>.";
|
||||
out.main_catch_phrase = "The Zero Knowledge Cloud";
|
||||
|
||||
out.main_howitworks = 'How It Works';
|
||||
out.main_zeroKnowledge = 'Zero Knowledge';
|
||||
out.main_zeroKnowledge_p = "You don't have to trust that we <em>won't</em> look at your pads, with CryptPad's revolutionary Zero Knowledge Technology we <em>can't</em>. Learn more about how we protect your <a href=\"/privacy.html\" title='Privacy'>Privacy and Security</a>.";
|
||||
out.main_writeItDown = 'Write it down';
|
||||
|
||||
out.main_writeItDown_p = "The greatest projects come from the smallest ideas. Take down the moments of inspiration and unexpected ideas because you never know which one might be a breakthrough.";
|
||||
out.main_share = 'Share the link, share the pad';
|
||||
out.main_share_p = "Grow your ideas together: conduct efficient meetings, collaborate on TODO lists and make quick presentations with all your friends and all your devices.";
|
||||
out.main_organize = 'Get organized';
|
||||
out.main_organize_p = "With CryptPad Drive, you can keep your sights on what's important. Folders allow you to keep track of your projects and have a global vision of where things are going.";
|
||||
out.tryIt = 'Try it out!';
|
||||
out.main_richText = 'Rich Text editor';
|
||||
out.main_richText_p = 'Edit rich text pads collaboratively with our realtime Zero Knowledge <a href="http://ckeditor.com" target="_blank">CkEditor</a> application.';
|
||||
out.main_code = 'Code editor';
|
||||
out.main_code_p = 'Edit code from your software collaboratively with our realtime Zero Knowledge <a href="https://www.codemirror.net" target="_blank">CodeMirror</a> application.';
|
||||
out.main_slide = 'Slide editor';
|
||||
out.main_slide_p = 'Create your presentations using the Markdown syntax, and display them in your browser.';
|
||||
out.main_poll = 'Polls';
|
||||
out.main_poll_p = 'Plan your meeting or your event, or vote for the best solution regarding your problem.';
|
||||
out.main_drive = 'CryptDrive';
|
||||
|
||||
out.main_richTextPad = 'Rich Text Pad';
|
||||
|
|
@ -1045,6 +1045,11 @@ define(function () {
|
|||
embed: 'Embed images from your disk <span class="fa fa-file-image-o"></span> or your CryptDrive <span class="fa fa-image"></span> and export them as PNG to your disk <span class="fa fa-download"></span> or your CryptDrive <span class="fa fa-cloud-upload"></span>'
|
||||
};
|
||||
|
||||
out.help.kanban = {
|
||||
add: 'Add new boards using the <span class="fa fa-plus"></span> button in the top-right corner',
|
||||
task: 'Move items by dragging and dropping them from one board to another',
|
||||
color: 'Change the colors by clicking on the colored part next to the board titles',
|
||||
};
|
||||
|
||||
out.initialState = [
|
||||
'<p>',
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "cryptpad",
|
||||
"description": "realtime collaborative visual editor with zero knowlege server",
|
||||
"version": "2.1.1",
|
||||
"version": "2.2.0",
|
||||
"license": "AGPL-3.0-or-later",
|
||||
"dependencies": {
|
||||
"chainpad-server": "^2.0.0",
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ define(function() {
|
|||
/* Select the buttons displayed on the main page to create new collaborative sessions
|
||||
* Existing types : pad, code, poll, slide
|
||||
*/
|
||||
config.availablePadTypes = ['drive', 'pad', 'code', 'slide', 'poll', 'whiteboard', 'file', 'todo', 'contacts'];
|
||||
config.availablePadTypes = ['drive', 'pad', 'code', 'slide', 'poll', 'kanban', 'whiteboard', 'file', 'todo', 'contacts'];
|
||||
config.registeredOnlyTypes = ['file', 'contacts'];
|
||||
|
||||
/* Cryptpad apps use a common API to display notifications to users
|
||||
|
|
@ -81,6 +81,7 @@ define(function() {
|
|||
whiteboard: 'fa-paint-brush',
|
||||
todo: 'fa-tasks',
|
||||
contacts: 'fa-users',
|
||||
kanban: 'fa-list-alt',
|
||||
};
|
||||
|
||||
// Ability to create owned pads and expiring pads through a new pad creation screen.
|
||||
|
|
|
|||
|
|
@ -117,12 +117,12 @@ Version 1
|
|||
var hashArr = fixDuplicateSlashes(hash).split('/');
|
||||
if (['media', 'file', 'user', 'invite'].indexOf(type) === -1) {
|
||||
parsed.type = 'pad';
|
||||
parsed.getHash = function () { return hash; };
|
||||
if (hash.slice(0,1) !== '/' && hash.length >= 56) { // Version 0
|
||||
// Old hash
|
||||
parsed.channel = hash.slice(0, 32);
|
||||
parsed.key = hash.slice(32, 56);
|
||||
parsed.version = 0;
|
||||
parsed.getHash = function () { return hash; };
|
||||
return parsed;
|
||||
}
|
||||
var options;
|
||||
|
|
|
|||
|
|
@ -12,8 +12,10 @@ define([
|
|||
'/customize/loading.js',
|
||||
'/common/test.js',
|
||||
|
||||
'/common/jquery-ui/jquery-ui.min.js',
|
||||
'/bower_components/bootstrap-tokenfield/dist/bootstrap-tokenfield.js',
|
||||
'css!/common/tippy/tippy.css',
|
||||
'css!/common/jquery-ui/jquery-ui.min.css'
|
||||
], function ($, Messages, Util, Hash, Notifier, AppConfig,
|
||||
Alertify, Tippy, Pages, h, Loading, Test) {
|
||||
var UI = {};
|
||||
|
|
@ -183,11 +185,17 @@ define([
|
|||
]);
|
||||
};
|
||||
|
||||
UI.tokenField = function (target) {
|
||||
UI.tokenField = function (target, autocomplete) {
|
||||
var t = {
|
||||
element: target || h('input'),
|
||||
};
|
||||
var $t = t.tokenfield = $(t.element).tokenfield();
|
||||
var $t = t.tokenfield = $(t.element).tokenfield({
|
||||
autocomplete: {
|
||||
source: autocomplete,
|
||||
delay: 100
|
||||
},
|
||||
showAutocompleteOnFocus: false
|
||||
});
|
||||
|
||||
t.getTokens = function (ignorePending) {
|
||||
var tokens = $t.tokenfield('getTokens').map(function (token) {
|
||||
|
|
@ -210,10 +218,17 @@ define([
|
|||
|
||||
t.preventDuplicates = function (cb) {
|
||||
$t.on('tokenfield:createtoken', function (ev) {
|
||||
// Close the suggest list when a token is added because we're going to wipe the input
|
||||
var $input = $t.closest('.tokenfield').find('.token-input');
|
||||
$input.autocomplete('close');
|
||||
|
||||
var val;
|
||||
ev.attrs.value = ev.attrs.value.toLowerCase();
|
||||
if (t.getTokens(true).some(function (t) {
|
||||
if (t === ev.attrs.value) { return ((val = t)); }
|
||||
if (t === ev.attrs.value) {
|
||||
ev.preventDefault();
|
||||
return ((val = t));
|
||||
}
|
||||
})) {
|
||||
ev.preventDefault();
|
||||
if (typeof(cb) === 'function') { cb(val); }
|
||||
|
|
@ -241,7 +256,7 @@ define([
|
|||
return t;
|
||||
};
|
||||
|
||||
dialog.tagPrompt = function (tags, cb) {
|
||||
dialog.tagPrompt = function (tags, existing, cb) {
|
||||
var input = dialog.textInput();
|
||||
|
||||
var tagger = dialog.frame([
|
||||
|
|
@ -255,7 +270,7 @@ define([
|
|||
dialog.nav(),
|
||||
]);
|
||||
|
||||
var field = UI.tokenField(input).preventDuplicates(function (val) {
|
||||
var field = UI.tokenField(input, existing).preventDuplicates(function (val) {
|
||||
UI.warn(Messages._getKey('tags_duplicate', [val]));
|
||||
});
|
||||
|
||||
|
|
@ -396,7 +411,7 @@ define([
|
|||
stopListening(listener);
|
||||
cb();
|
||||
});
|
||||
listener = listenForKeys(close, close, ok);
|
||||
listener = listenForKeys(close, close);
|
||||
var $ok = $(ok).click(close);
|
||||
|
||||
document.body.appendChild(frame);
|
||||
|
|
|
|||
|
|
@ -23,20 +23,27 @@ define([
|
|||
}
|
||||
|
||||
UIElements.updateTags = function (common, href) {
|
||||
var sframeChan = common.getSframeChannel();
|
||||
sframeChan.query('Q_TAGS_GET', href || null, function (err, res) {
|
||||
if (err || res.error) {
|
||||
if (res.error === 'NO_ENTRY') {
|
||||
UI.alert(Messages.tags_noentry);
|
||||
var existing, tags;
|
||||
NThen(function(waitFor) {
|
||||
common.getSframeChannel().query("Q_GET_ALL_TAGS", null, waitFor(function(err, res) {
|
||||
if (err || res.error) { return void console.error(err || res.error); }
|
||||
existing = Object.keys(res.tags).sort();
|
||||
}));
|
||||
}).nThen(function (waitFor) {
|
||||
common.getPadAttribute('tags', waitFor(function (err, res) {
|
||||
if (err) {
|
||||
if (err === 'NO_ENTRY') {
|
||||
UI.alert(Messages.tags_noentry);
|
||||
}
|
||||
waitFor.abort();
|
||||
return void console.error(err);
|
||||
}
|
||||
return void console.error(err || res.error);
|
||||
}
|
||||
UI.dialog.tagPrompt(res.data, function (tags) {
|
||||
if (!Array.isArray(tags)) { return; }
|
||||
sframeChan.event('EV_TAGS_SET', {
|
||||
tags: tags,
|
||||
href: href,
|
||||
});
|
||||
tags = res || [];
|
||||
}), href);
|
||||
}).nThen(function () {
|
||||
UI.dialog.tagPrompt(tags, existing, function (newTags) {
|
||||
if (!Array.isArray(newTags)) { return; }
|
||||
common.setPadAttribute('tags', newTags, null, href);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
|
@ -303,7 +310,7 @@ define([
|
|||
var embed = initValue ? val.embed : Util.isChecked($(link).find('#cp-share-embed'));
|
||||
var present = initValue ? val.present : Util.isChecked($(link).find('#cp-share-present'));
|
||||
|
||||
var hash = (edit && hashes.editHash) ? hashes.editHash : hashes.viewHash;
|
||||
var hash = (!hashes.viewHash || (edit && hashes.editHash)) ? hashes.editHash : hashes.viewHash;
|
||||
var href = origin + pathname + '#' + hash;
|
||||
var parsed = Hash.parsePadUrl(href);
|
||||
return origin + parsed.getUrl({embed: embed, present: present});
|
||||
|
|
@ -387,8 +394,11 @@ define([
|
|||
val = val || {};
|
||||
if (val.edit === false) {
|
||||
$(link).find('#cp-share-editable-false').prop('checked', true);
|
||||
$(link).find('#cp-share-editable-true').prop('checked', false);
|
||||
} else {
|
||||
$(link).find('#cp-share-editable-true').prop('checked', true);
|
||||
$(link).find('#cp-share-editable-false').prop('checked', false);
|
||||
}
|
||||
else { $(link).find('#cp-share-editable-true').prop('checked', true); }
|
||||
if (val.embed) { $(link).find('#cp-share-embed').prop('checked', true); }
|
||||
if (val.present) { $(link).find('#cp-share-present').prop('checked', true); }
|
||||
$(link).find('#cp-share-link-preview').val(getLinkValue(val));
|
||||
|
|
|
|||
|
|
@ -578,7 +578,7 @@ define([
|
|||
}
|
||||
var parsed = Hash.parsePadUrl(window.location.href);
|
||||
if (!parsed.type || !parsed.hashData) { return void cb('E_INVALID_HREF'); }
|
||||
if (parsed.type === 'file') { secret.channel = Util.base64ToHex(secret.channel); }
|
||||
if (parsed.type === 'file' && typeof(parsed.channel) === 'string') { secret.channel = Util.base64ToHex(secret.channel); }
|
||||
hashes = Hash.getHashes(secret);
|
||||
|
||||
if (secret.version === 0) {
|
||||
|
|
@ -594,6 +594,7 @@ define([
|
|||
|
||||
postMessage("GET_STRONGER_HASH", {
|
||||
href: window.location.href,
|
||||
channel: secret.channel,
|
||||
password: secret.password
|
||||
}, function (hash) {
|
||||
if (hash) { hashes.editHash = hash; }
|
||||
|
|
|
|||
7
www/common/jquery-ui/jquery-ui.min.css
vendored
Normal file
7
www/common/jquery-ui/jquery-ui.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
6
www/common/jquery-ui/jquery-ui.min.js
vendored
Normal file
6
www/common/jquery-ui/jquery-ui.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -636,18 +636,7 @@ define([
|
|||
|
||||
// Tags
|
||||
Store.listAllTags = function (data, cb) {
|
||||
var all = [];
|
||||
var files = Util.find(store.proxy, ['drive', 'filesData']);
|
||||
|
||||
if (typeof(files) !== 'object') { return cb({error: 'invalid_drive'}); }
|
||||
Object.keys(files).forEach(function (k) {
|
||||
var file = files[k];
|
||||
if (!Array.isArray(file.tags)) { return; }
|
||||
file.tags.forEach(function (tag) {
|
||||
if (all.indexOf(tag) === -1) { all.push(tag); }
|
||||
});
|
||||
});
|
||||
cb(all);
|
||||
cb(store.userObject.getTagsList());
|
||||
};
|
||||
|
||||
// Templates
|
||||
|
|
|
|||
|
|
@ -68,7 +68,11 @@ define([], function () {
|
|||
|
||||
// shim between chainpad and netflux
|
||||
var msgIn = function (peerId, msg) {
|
||||
return msg.replace(/^cp\|([A-Za-z0-9+\/=]+\|)?/, '');
|
||||
// NOTE: Hash version 0 contains a 32 characters nonce followed by a pipe
|
||||
// at the beginning of each message on the server.
|
||||
// We have to make sure our regex ignores this nonce using {0,20} (our IDs
|
||||
// should only be 8 characters long)
|
||||
return msg.replace(/^cp\|([A-Za-z0-9+\/=]{0,20}\|)?/, '');
|
||||
};
|
||||
|
||||
var msgOut = function (msg) {
|
||||
|
|
|
|||
|
|
@ -588,6 +588,7 @@ define([
|
|||
if (!el.title) { el.title = Hash.getDefaultName(parsed); }
|
||||
// Fix channel
|
||||
if (!el.channel) {
|
||||
try {
|
||||
if (parsed.hashData && parsed.hashData.type === "file") {
|
||||
// PASSWORD_FILES
|
||||
el.channel = Util.base64ToHex(parsed.hashData.channel);
|
||||
|
|
@ -596,6 +597,9 @@ define([
|
|||
el.channel = secret.channel;
|
||||
}
|
||||
console.log('Adding missing channel in filesData ', el.channel);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
if ((loggedIn || config.testMode) && rootFiles.indexOf(id) === -1) {
|
||||
|
|
|
|||
|
|
@ -393,6 +393,7 @@ define([
|
|||
// If we have a stronger hash, use it for pad attributes
|
||||
href = window.location.pathname + '#' + hashes.editHash;
|
||||
}
|
||||
if (data.href) { href = data.href; }
|
||||
Cryptpad.getPadAttribute(data.key, function (e, data) {
|
||||
cb({
|
||||
error: e,
|
||||
|
|
@ -406,6 +407,7 @@ define([
|
|||
// If we have a stronger hash, use it for pad attributes
|
||||
href = window.location.pathname + '#' + hashes.editHash;
|
||||
}
|
||||
if (data.href) { href = data.href; }
|
||||
Cryptpad.setPadAttribute(data.key, data.value, function (e) {
|
||||
cb({error:e});
|
||||
}, href);
|
||||
|
|
@ -573,19 +575,6 @@ define([
|
|||
}
|
||||
});
|
||||
|
||||
sframeChan.on('Q_TAGS_GET', function (data, cb) {
|
||||
Cryptpad.getPadTags(data, function (err, data) {
|
||||
cb({
|
||||
error: err,
|
||||
data: data
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
sframeChan.on('EV_TAGS_SET', function (data) {
|
||||
Cryptpad.resetTags(data.href, data.tags);
|
||||
});
|
||||
|
||||
sframeChan.on('Q_PIN_GET_USAGE', function (data, cb) {
|
||||
Cryptpad.isOverPinLimit(function (err, overLimit, data) {
|
||||
cb({
|
||||
|
|
@ -606,6 +595,15 @@ define([
|
|||
Cryptpad.removeOwnedChannel(channel, cb);
|
||||
});
|
||||
|
||||
sframeChan.on('Q_GET_ALL_TAGS', function (data, cb) {
|
||||
Cryptpad.listAllTags(function (err, tags) {
|
||||
cb({
|
||||
error: err,
|
||||
tags: tags
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
if (cfg.addRpc) {
|
||||
cfg.addRpc(sframeChan, Cryptpad, Utils);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -235,17 +235,20 @@ define([
|
|||
});
|
||||
};
|
||||
|
||||
funcs.getPadAttribute = function (key, cb) {
|
||||
// href is optional here: if not provided, we use the href of the current tab
|
||||
funcs.getPadAttribute = function (key, cb, href) {
|
||||
ctx.sframeChan.query('Q_GET_PAD_ATTRIBUTE', {
|
||||
key: key
|
||||
key: key,
|
||||
href: href
|
||||
}, function (err, res) {
|
||||
cb (err || res.error, res.data);
|
||||
});
|
||||
};
|
||||
funcs.setPadAttribute = function (key, value, cb) {
|
||||
funcs.setPadAttribute = function (key, value, cb, href) {
|
||||
cb = cb || $.noop;
|
||||
ctx.sframeChan.query('Q_SET_PAD_ATTRIBUTE', {
|
||||
key: key,
|
||||
href: href,
|
||||
value: value
|
||||
}, cb);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -165,10 +165,6 @@ define({
|
|||
// Put one entry in the parent sessionStorage
|
||||
'Q_SESSIONSTORAGE_PUT': true,
|
||||
|
||||
// Set and get the tags using the tag prompt button
|
||||
'Q_TAGS_GET': true,
|
||||
'EV_TAGS_SET': true,
|
||||
|
||||
// Merge the anonymous drive (FS_hash) into the current logged in user's drive, to keep the pads
|
||||
// in the drive at registration.
|
||||
'Q_MERGE_ANON_DRIVE': true,
|
||||
|
|
@ -237,4 +233,7 @@ define({
|
|||
|
||||
// Loading events to display in the loading screen
|
||||
'EV_LOADING_INFO': true,
|
||||
|
||||
// Get all existing tags
|
||||
'Q_GET_ALL_TAGS': true,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -627,6 +627,21 @@ define([
|
|||
if (typeof cb === "function") { cb(); }
|
||||
};
|
||||
|
||||
// Tags
|
||||
exp.getTagsList = function () {
|
||||
var tags = {};
|
||||
var data;
|
||||
var pushTag = function (tag) {
|
||||
tags[tag] = tags[tag] ? ++tags[tag] : 1;
|
||||
};
|
||||
for (var id in files[FILES_DATA]) {
|
||||
data = files[FILES_DATA][id];
|
||||
if (!data.tags || !Array.isArray(data.tags)) { continue; }
|
||||
data.tags.forEach(pushTag);
|
||||
}
|
||||
return tags;
|
||||
};
|
||||
|
||||
return exp;
|
||||
};
|
||||
return module;
|
||||
|
|
|
|||
|
|
@ -462,6 +462,8 @@ span {
|
|||
padding-right: 15px;
|
||||
}
|
||||
.cp-app-drive-search-opendir {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
a {
|
||||
cursor: pointer;
|
||||
color: #41b7d8;
|
||||
|
|
@ -495,6 +497,19 @@ span {
|
|||
}
|
||||
}
|
||||
}
|
||||
&.cp-app-drive-tags-list {
|
||||
width: 100%;
|
||||
table {
|
||||
margin: 10px 50px;
|
||||
width: ~"calc(100% - 100px)";
|
||||
table-layout: fixed;
|
||||
td, th {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.cp-app-drive-element {
|
||||
|
|
|
|||
|
|
@ -51,20 +51,65 @@ define([
|
|||
|
||||
var E_OVER_LIMIT = 'E_OVER_LIMIT';
|
||||
|
||||
var SEARCH = "search";
|
||||
var SEARCH_NAME = Messages.fm_searchName;
|
||||
var ROOT = "root";
|
||||
var ROOT_NAME = Messages.fm_rootName;
|
||||
var SEARCH = "search";
|
||||
var SEARCH_NAME = Messages.fm_searchName;
|
||||
var TRASH = "trash";
|
||||
var TRASH_NAME = Messages.fm_trashName;
|
||||
var FILES_DATA = Constants.storageKey;
|
||||
var FILES_DATA_NAME = Messages.fm_filesDataName;
|
||||
var TEMPLATE = "template";
|
||||
var TEMPLATE_NAME = Messages.fm_templateName;
|
||||
var TRASH = "trash";
|
||||
var TRASH_NAME = Messages.fm_trashName;
|
||||
var RECENT = "recent";
|
||||
var RECENT_NAME = Messages.fm_recentPadsName;
|
||||
var OWNED = "owned";
|
||||
var OWNED_NAME = Messages.fm_ownedPadsName;
|
||||
var TAGS = "tags";
|
||||
var TAGS_NAME = Messages.fm_tagsName;
|
||||
|
||||
// Icons
|
||||
var faFolder = 'fa-folder';
|
||||
var faFolderOpen = 'fa-folder-open';
|
||||
var faReadOnly = 'fa-eye';
|
||||
var faRename = 'fa-pencil';
|
||||
var faTrash = 'fa-trash';
|
||||
var faDelete = 'fa-eraser';
|
||||
var faProperties = 'fa-database';
|
||||
var faTags = 'fa-hashtag';
|
||||
var faEmpty = 'fa-trash-o';
|
||||
var faRestore = 'fa-repeat';
|
||||
var faShowParent = 'fa-location-arrow';
|
||||
var $folderIcon = $('<span>', {
|
||||
"class": faFolder + " fa cp-app-drive-icon-folder cp-app-drive-content-icon"
|
||||
});
|
||||
//var $folderIcon = $('<img>', {src: "/customize/images/icons/folder.svg", "class": "folder icon"});
|
||||
var $folderEmptyIcon = $folderIcon.clone();
|
||||
var $folderOpenedIcon = $('<span>', {"class": faFolderOpen + " fa cp-app-drive-icon-folder"});
|
||||
//var $folderOpenedIcon = $('<img>', {src: "/customize/images/icons/folderOpen.svg", "class": "folder icon"});
|
||||
var $folderOpenedEmptyIcon = $folderOpenedIcon.clone();
|
||||
//var $upIcon = $('<span>', {"class": "fa fa-arrow-circle-up"});
|
||||
var $unsortedIcon = $('<span>', {"class": "fa fa-files-o"});
|
||||
var $templateIcon = $('<span>', {"class": "fa fa-cubes"});
|
||||
var $recentIcon = $('<span>', {"class": "fa fa-clock-o"});
|
||||
var $trashIcon = $('<span>', {"class": "fa " + faTrash});
|
||||
var $trashEmptyIcon = $('<span>', {"class": "fa fa-trash-o"});
|
||||
//var $collapseIcon = $('<span>', {"class": "fa fa-minus-square-o cp-app-drive-icon-expcol"});
|
||||
var $expandIcon = $('<span>', {"class": "fa fa-plus-square-o cp-app-drive-icon-expcol"});
|
||||
var $emptyTrashIcon = $('<button>', {"class": "fa fa-ban"});
|
||||
var $listIcon = $('<button>', {"class": "fa fa-list"});
|
||||
var $gridIcon = $('<button>', {"class": "fa fa-th-large"});
|
||||
var $sortAscIcon = $('<span>', {"class": "fa fa-angle-up sortasc"});
|
||||
var $sortDescIcon = $('<span>', {"class": "fa fa-angle-down sortdesc"});
|
||||
var $closeIcon = $('<span>', {"class": "fa fa-window-close"});
|
||||
//var $backupIcon = $('<span>', {"class": "fa fa-life-ring"});
|
||||
var $searchIcon = $('<span>', {"class": "fa fa-search cp-app-drive-tree-search-con"});
|
||||
var $addIcon = $('<span>', {"class": "fa fa-plus"});
|
||||
var $renamedIcon = $('<span>', {"class": "fa fa-flag"});
|
||||
var $readonlyIcon = $('<span>', {"class": "fa " + faReadOnly});
|
||||
var $ownedIcon = $('<span>', {"class": "fa fa-id-card-o"});
|
||||
var $ownerIcon = $('<span>', {"class": "fa fa-id-card"});
|
||||
var $tagsIcon = $('<span>', {"class": "fa " + faTags});
|
||||
|
||||
var LS_LAST = "app-drive-lastOpened";
|
||||
var LS_OPENED = "app-drive-openedFolders";
|
||||
|
|
@ -157,48 +202,6 @@ define([
|
|||
}
|
||||
};
|
||||
|
||||
// Icons
|
||||
var faFolder = 'fa-folder';
|
||||
var faFolderOpen = 'fa-folder-open';
|
||||
var faReadOnly = 'fa-eye';
|
||||
var faRename = 'fa-pencil';
|
||||
var faTrash = 'fa-trash';
|
||||
var faDelete = 'fa-eraser';
|
||||
var faProperties = 'fa-database';
|
||||
var faTags = 'fa-hashtag';
|
||||
var faEmpty = 'fa-trash-o';
|
||||
var faRestore = 'fa-repeat';
|
||||
var faShowParent = 'fa-location-arrow';
|
||||
var $folderIcon = $('<span>', {
|
||||
"class": faFolder + " fa cp-app-drive-icon-folder cp-app-drive-content-icon"
|
||||
});
|
||||
//var $folderIcon = $('<img>', {src: "/customize/images/icons/folder.svg", "class": "folder icon"});
|
||||
var $folderEmptyIcon = $folderIcon.clone();
|
||||
var $folderOpenedIcon = $('<span>', {"class": faFolderOpen + " fa cp-app-drive-icon-folder"});
|
||||
//var $folderOpenedIcon = $('<img>', {src: "/customize/images/icons/folderOpen.svg", "class": "folder icon"});
|
||||
var $folderOpenedEmptyIcon = $folderOpenedIcon.clone();
|
||||
//var $upIcon = $('<span>', {"class": "fa fa-arrow-circle-up"});
|
||||
var $unsortedIcon = $('<span>', {"class": "fa fa-files-o"});
|
||||
var $templateIcon = $('<span>', {"class": "fa fa-cubes"});
|
||||
var $recentIcon = $('<span>', {"class": "fa fa-clock-o"});
|
||||
var $trashIcon = $('<span>', {"class": "fa " + faTrash});
|
||||
var $trashEmptyIcon = $('<span>', {"class": "fa fa-trash-o"});
|
||||
//var $collapseIcon = $('<span>', {"class": "fa fa-minus-square-o cp-app-drive-icon-expcol"});
|
||||
var $expandIcon = $('<span>', {"class": "fa fa-plus-square-o cp-app-drive-icon-expcol"});
|
||||
var $emptyTrashIcon = $('<button>', {"class": "fa fa-ban"});
|
||||
var $listIcon = $('<button>', {"class": "fa fa-list"});
|
||||
var $gridIcon = $('<button>', {"class": "fa fa-th-large"});
|
||||
var $sortAscIcon = $('<span>', {"class": "fa fa-angle-up sortasc"});
|
||||
var $sortDescIcon = $('<span>', {"class": "fa fa-angle-down sortdesc"});
|
||||
var $closeIcon = $('<span>', {"class": "fa fa-window-close"});
|
||||
//var $backupIcon = $('<span>', {"class": "fa fa-life-ring"});
|
||||
var $searchIcon = $('<span>', {"class": "fa fa-search cp-app-drive-tree-search-con"});
|
||||
var $addIcon = $('<span>', {"class": "fa fa-plus"});
|
||||
var $renamedIcon = $('<span>', {"class": "fa fa-flag"});
|
||||
var $readonlyIcon = $('<span>', {"class": "fa " + faReadOnly});
|
||||
var $ownedIcon = $('<span>', {"class": "fa fa-id-card-o"});
|
||||
var $ownerIcon = $('<span>', {"class": "fa fa-id-card"});
|
||||
|
||||
var history = {
|
||||
isHistoryMode: false,
|
||||
};
|
||||
|
|
@ -360,10 +363,16 @@ define([
|
|||
// Categories dislayed in the menu
|
||||
// _WORKGROUP_ : do not display unsorted
|
||||
var displayedCategories = [ROOT, TRASH, SEARCH, RECENT];
|
||||
|
||||
// PCS enabled: display owned pads
|
||||
if (AppConfig.displayCreationScreen) { displayedCategories.push(OWNED); }
|
||||
// Templates enabled: display template category
|
||||
if (AppConfig.enableTemplates) { displayedCategories.push(TEMPLATE); }
|
||||
// Tags used: display Tags category
|
||||
if (Object.keys(filesOp.getTagsList()).length) { displayedCategories.push(TAGS); }
|
||||
|
||||
if (isWorkgroup()) { displayedCategories = [ROOT, TRASH, SEARCH]; }
|
||||
var virtualCategories = [SEARCH, RECENT, OWNED];
|
||||
var virtualCategories = [SEARCH, RECENT, OWNED, TAGS];
|
||||
|
||||
if (!APP.loggedIn) {
|
||||
displayedCategories = [FILES_DATA];
|
||||
|
|
@ -1444,6 +1453,7 @@ define([
|
|||
case SEARCH: pName = SEARCH_NAME; break;
|
||||
case RECENT: pName = RECENT_NAME; break;
|
||||
case OWNED: pName = OWNED_NAME; break;
|
||||
case TAGS: pName = TAGS_NAME; break;
|
||||
default: pName = name;
|
||||
}
|
||||
return pName;
|
||||
|
|
@ -1512,6 +1522,8 @@ define([
|
|||
case OWNED:
|
||||
msg = Messages.fm_info_owned;
|
||||
break;
|
||||
case TAGS:
|
||||
break;
|
||||
default:
|
||||
msg = undefined;
|
||||
}
|
||||
|
|
@ -2136,6 +2148,13 @@ define([
|
|||
}
|
||||
var $openDir = $('<td>', {'class': 'cp-app-drive-search-opendir'}).append($a);
|
||||
|
||||
$('<a>').text(Messages.fc_prop).click(function () {
|
||||
APP.getProperties(r.id, function (e, $prop) {
|
||||
if (e) { return void logError(e); }
|
||||
UI.alert($prop[0], undefined, true);
|
||||
});
|
||||
}).appendTo($openDir);
|
||||
|
||||
// rows 1-3
|
||||
$('<tr>').append($icon).append($title).append($typeName).append($type).appendTo($table);
|
||||
$('<tr>').append($path).append($atimeName).append($atime).appendTo($table);
|
||||
|
|
@ -2226,6 +2245,35 @@ define([
|
|||
});
|
||||
};
|
||||
|
||||
// Tags category
|
||||
var displayTags = function ($container) {
|
||||
var list = filesOp.getTagsList();
|
||||
if (Object.keys(list).length === 0) { return; }
|
||||
var sortedTags = Object.keys(list);
|
||||
sortedTags.sort(function (a, b) {
|
||||
return list[b] - list[a];
|
||||
});
|
||||
var lines = [
|
||||
h('tr', [
|
||||
h('th', Messages.fm_tags_name),
|
||||
h('th', Messages.fm_tags_used)
|
||||
])
|
||||
];
|
||||
sortedTags.forEach(function (tag) {
|
||||
var tagLink = h('a', { href: '#' }, '#' + tag);
|
||||
$(tagLink).click(function () {
|
||||
if (displayedCategories.indexOf(SEARCH) !== -1) {
|
||||
APP.Search.$input.val('#' + tag).keyup();
|
||||
}
|
||||
});
|
||||
lines.push(h('tr', [
|
||||
h('td', tagLink),
|
||||
h('td.cp-app-drive-tags-used', list[tag])
|
||||
]));
|
||||
});
|
||||
$(h('li.cp-app-drive-tags-list', h('table', lines))).appendTo($container);
|
||||
};
|
||||
|
||||
// Display the selected directory into the content part (rightside)
|
||||
// NOTE: Elements in the trash are not using the same storage structure as the others
|
||||
// _WORKGROUP_ : do not change the lastOpenedFolder value in localStorage
|
||||
|
|
@ -2255,10 +2303,9 @@ define([
|
|||
var isTrashRoot = filesOp.comparePath(path, [TRASH]);
|
||||
var isTemplate = filesOp.comparePath(path, [TEMPLATE]);
|
||||
var isAllFiles = filesOp.comparePath(path, [FILES_DATA]);
|
||||
var isSearch = path[0] === SEARCH;
|
||||
var isRecent = path[0] === RECENT;
|
||||
var isOwned = path[0] === OWNED;
|
||||
var isVirtual = virtualCategories.indexOf(path[0]) !== -1;
|
||||
var isSearch = path[0] === SEARCH;
|
||||
var isTags = path[0] === TAGS;
|
||||
|
||||
var root = isVirtual ? undefined : filesOp.find(path);
|
||||
if (!isVirtual && typeof(root) === "undefined") {
|
||||
|
|
@ -2292,7 +2339,7 @@ define([
|
|||
|
||||
var $dirContent = $('<div>', {id: FOLDER_CONTENT_ID});
|
||||
$dirContent.data('path', path);
|
||||
if (!isSearch) {
|
||||
if (!isSearch && !isTags) {
|
||||
var mode = getViewMode();
|
||||
if (mode) {
|
||||
$dirContent.addClass(getViewModeClass());
|
||||
|
|
@ -2354,10 +2401,12 @@ define([
|
|||
displayTrashRoot($list, $folderHeader, $fileHeader);
|
||||
} else if (isSearch) {
|
||||
displaySearch($list, path[1]);
|
||||
} else if (isRecent) {
|
||||
} else if (path[0] === RECENT) {
|
||||
displayRecent($list);
|
||||
} else if (isOwned) {
|
||||
} else if (path[0] === OWNED) {
|
||||
displayOwned($list);
|
||||
} else if (isTags) {
|
||||
displayTags($list);
|
||||
} else {
|
||||
$dirContent.contextmenu(openContextMenu('content'));
|
||||
if (filesOp.hasSubfolder(root)) { $list.append($folderHeader); }
|
||||
|
|
@ -2499,25 +2548,6 @@ define([
|
|||
});
|
||||
};
|
||||
|
||||
var createTemplate = function ($container, path) {
|
||||
var $icon = $templateIcon.clone();
|
||||
var isOpened = filesOp.comparePath(path, currentPath);
|
||||
var $element = createTreeElement(TEMPLATE_NAME, $icon, [TEMPLATE], false, true, false, isOpened);
|
||||
$element.addClass('cp-app-drive-tree-root');
|
||||
var $list = $('<ul>', { 'class': 'cp-app-drive-tree-category' }).append($element);
|
||||
$container.append($list);
|
||||
};
|
||||
|
||||
var createAllFiles = function ($container, path) {
|
||||
var $icon = $unsortedIcon.clone();
|
||||
var isOpened = filesOp.comparePath(path, currentPath);
|
||||
var $allfilesElement = createTreeElement(FILES_DATA_NAME, $icon, [FILES_DATA], false, false, false, isOpened);
|
||||
$allfilesElement.addClass('root');
|
||||
var $allfilesList = $('<ul>', { 'class': 'cp-app-drive-tree-category' })
|
||||
.append($allfilesElement);
|
||||
$container.append($allfilesList);
|
||||
};
|
||||
|
||||
var createTrash = function ($container, path) {
|
||||
var $icon = filesOp.isFolderEmpty(files[TRASH]) ? $trashEmptyIcon.clone() : $trashIcon.clone();
|
||||
var isOpened = filesOp.comparePath(path, currentPath);
|
||||
|
|
@ -2530,29 +2560,11 @@ define([
|
|||
$container.append($trashList);
|
||||
};
|
||||
|
||||
var createRecent = function ($container, path) {
|
||||
var $icon = $recentIcon.clone();
|
||||
var isOpened = filesOp.comparePath(path, currentPath);
|
||||
var $element = createTreeElement(RECENT_NAME, $icon, [RECENT], false, false, false, isOpened);
|
||||
$element.addClass('root');
|
||||
var $list = $('<ul>', { 'class': 'cp-app-drive-tree-category' }).append($element);
|
||||
$container.append($list);
|
||||
};
|
||||
|
||||
var createOwned = function ($container, path) {
|
||||
var $icon = $ownedIcon.clone(); // TODO
|
||||
var isOpened = filesOp.comparePath(path, currentPath);
|
||||
var $element = createTreeElement(OWNED_NAME, $icon, [OWNED], false, false, false, isOpened);
|
||||
$element.addClass('root');
|
||||
var $list = $('<ul>', { 'class': 'cp-app-drive-tree-category' }).append($element);
|
||||
$container.append($list);
|
||||
};
|
||||
|
||||
var search = APP.Search = {};
|
||||
var createSearch = function ($container) {
|
||||
var isInSearch = currentPath[0] === SEARCH;
|
||||
var $div = $('<div>', {'id': 'cp-app-drive-tree-search', 'class': 'cp-unselectable'});
|
||||
var $input = $('<input>', {
|
||||
var $input = APP.Search.$input = $('<input>', {
|
||||
id: 'cp-app-drive-tree-search-input',
|
||||
type: 'text',
|
||||
draggable: false,
|
||||
|
|
@ -2602,6 +2614,38 @@ define([
|
|||
$container.append($div);
|
||||
};
|
||||
|
||||
var categories = {};
|
||||
categories[FILES_DATA] = {
|
||||
name: FILES_DATA_NAME,
|
||||
$icon: $unsortedIcon
|
||||
};
|
||||
categories[TEMPLATE] = {
|
||||
name: TEMPLATE_NAME,
|
||||
droppable: true,
|
||||
$icon: $templateIcon
|
||||
};
|
||||
categories[RECENT] = {
|
||||
name: RECENT_NAME,
|
||||
$icon: $recentIcon
|
||||
};
|
||||
categories[OWNED] = {
|
||||
name: OWNED_NAME,
|
||||
$icon: $ownedIcon
|
||||
};
|
||||
categories[TAGS] = {
|
||||
name: TAGS_NAME,
|
||||
$icon: $tagsIcon
|
||||
};
|
||||
var createCategory = function ($container, cat) {
|
||||
var options = categories[cat];
|
||||
var $icon = options.$icon.clone();
|
||||
var isOpened = filesOp.comparePath([cat], currentPath);
|
||||
var $element = createTreeElement(options.name, $icon, [cat], options.draggable, options.droppable, false, isOpened);
|
||||
$element.addClass('cp-app-drive-tree-root');
|
||||
var $list = $('<ul>', { 'class': 'cp-app-drive-tree-category' }).append($element);
|
||||
$container.append($list);
|
||||
};
|
||||
|
||||
APP.resetTree = function () {
|
||||
var $categories = $tree.find('.cp-app-drive-tree-categories-container');
|
||||
var s = $categories.scrollTop() || 0;
|
||||
|
|
@ -2610,11 +2654,12 @@ define([
|
|||
if (displayedCategories.indexOf(SEARCH) !== -1) { createSearch($tree); }
|
||||
var $div = $('<div>', {'class': 'cp-app-drive-tree-categories-container'})
|
||||
.appendTo($tree);
|
||||
if (displayedCategories.indexOf(RECENT) !== -1) { createRecent($div, [RECENT]); }
|
||||
if (displayedCategories.indexOf(OWNED) !== -1) { createOwned($div, [OWNED]); }
|
||||
if (displayedCategories.indexOf(TAGS) !== -1) { createCategory($div, TAGS); }
|
||||
if (displayedCategories.indexOf(RECENT) !== -1) { createCategory($div, RECENT); }
|
||||
if (displayedCategories.indexOf(OWNED) !== -1) { createCategory($div, OWNED); }
|
||||
if (displayedCategories.indexOf(ROOT) !== -1) { createTree($div, [ROOT]); }
|
||||
if (displayedCategories.indexOf(TEMPLATE) !== -1) { createTemplate($div, [TEMPLATE]); }
|
||||
if (displayedCategories.indexOf(FILES_DATA) !== -1) { createAllFiles($div, [FILES_DATA]); }
|
||||
if (displayedCategories.indexOf(TEMPLATE) !== -1) { createCategory($div, TEMPLATE); }
|
||||
if (displayedCategories.indexOf(FILES_DATA) !== -1) { createCategory($div, FILES_DATA); }
|
||||
if (displayedCategories.indexOf(TRASH) !== -1) { createTrash($div, [TRASH]); }
|
||||
|
||||
$tree.append(APP.$limit);
|
||||
|
|
@ -2668,7 +2713,7 @@ define([
|
|||
}
|
||||
});
|
||||
|
||||
var getProperties = function (el, cb) {
|
||||
var getProperties = APP.getProperties = function (el, cb) {
|
||||
if (!filesOp.isFile(el)) {
|
||||
return void cb('NOT_FILE');
|
||||
}
|
||||
|
|
|
|||
173
www/kanban/app-kanban.less
Normal file
173
www/kanban/app-kanban.less
Normal file
|
|
@ -0,0 +1,173 @@
|
|||
@import (once) "../../customize/src/less2/include/browser.less";
|
||||
@import (once) "../../customize/src/less2/include/framework.less";
|
||||
@import (once) "../../customize/src/less2/include/tools.less";
|
||||
|
||||
.framework_main( @bg-color: @colortheme_kanban-bg,
|
||||
@warn-color: @colortheme_kanban-warn,
|
||||
@color: @colortheme_kanban-color);
|
||||
|
||||
// body
|
||||
&.cp-app-kanban {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
max-height: 100%;
|
||||
min-height: auto;
|
||||
|
||||
#cp-app-kanban-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
#cp-app-kanban-editor {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
#cp-app-kanban-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
.kanban-container-outer {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: -webkit-min-content;
|
||||
min-height: min-content;
|
||||
.kanban-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
|
||||
.kanban-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.kanban-board {
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.kanban-title-board {
|
||||
flex: 1;
|
||||
margin-right: 10px;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
#kanban-edit {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#kanban-edit {
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
border: 1px solid rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
@button-size: 50px;
|
||||
#kanban-addboard {
|
||||
margin: 30px;
|
||||
border: 1px solid;
|
||||
width: @button-size;
|
||||
height: @button-size;
|
||||
line-height: @button-size;
|
||||
text-align: center;
|
||||
background: @colortheme_kanban-bg;
|
||||
font-weight: bold;
|
||||
align-self: flex-start;
|
||||
font-size: 50px;
|
||||
cursor: pointer;
|
||||
.tools_unselectable();
|
||||
}
|
||||
|
||||
.kanban-remove-item {
|
||||
padding: 0 0.5em;
|
||||
visibility: hidden;
|
||||
}
|
||||
.kanban-item:hover {
|
||||
.kanban-remove-item {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.kanban-additem {
|
||||
float: right;
|
||||
background: #EEE;
|
||||
padding: 5px .5rem 4px;
|
||||
line-height: 1;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
font-weight: bold;
|
||||
font-size: 1.2em;
|
||||
&:hover {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.kanban-header-yellow {
|
||||
background: #FC3;
|
||||
}
|
||||
|
||||
.kanban-header-orange {
|
||||
background: #F91;
|
||||
}
|
||||
|
||||
.kanban-header-blue {
|
||||
background: #0AC;
|
||||
}
|
||||
|
||||
.kanban-header-red {
|
||||
background: #E43;
|
||||
}
|
||||
|
||||
.kanban-header-green {
|
||||
background: #8C4;
|
||||
}
|
||||
|
||||
.kanban-header-purple {
|
||||
background: #c851ff;
|
||||
}
|
||||
|
||||
.kanban-header-cyan {
|
||||
background: #00ffff;
|
||||
}
|
||||
|
||||
.kanban-header-lightgreen {
|
||||
background: #c3ff5b;
|
||||
}
|
||||
|
||||
.kanban-header-lightblue {
|
||||
background: #adeeff;
|
||||
}
|
||||
|
||||
@media (max-width: @browser_media-medium-screen) {
|
||||
#cp-app-kanban-container {
|
||||
flex: 1;
|
||||
max-width: 100%;
|
||||
resize: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.cp-app-readonly {
|
||||
.kanban-item, .kanban-title-board {
|
||||
cursor: default !important;
|
||||
.tools_unselectable();
|
||||
}
|
||||
.kanban-title-button, #kanban-addboard, .kanban-remove-item, .kanban-additem {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
37
www/kanban/index.html
Normal file
37
www/kanban/index.html
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<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">
|
||||
<meta name="referrer" content="no-referrer" />
|
||||
<script async data-bootload="/common/sframe-app-outer.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
#sbox-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="sbox-iframe">
|
||||
</iframe>
|
||||
</body>
|
||||
</html>
|
||||
23
www/kanban/inner.html
Normal file
23
www/kanban/inner.html
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="cp-app-noscroll">
|
||||
|
||||
<head>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
|
||||
<script async data-bootload="/kanban/inner.js" data-main="/common/sframe-boot.js?ver=1.6" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
|
||||
<style>
|
||||
.loading-hidden {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="cp-app-kanban">
|
||||
<div id="cme_toolbox" class="cp-toolbar-container"></div>
|
||||
<div id="cp-app-kanban-editor">
|
||||
<div id="cp-app-kanban-container">
|
||||
<div id="cp-app-kanban-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
399
www/kanban/inner.js
Normal file
399
www/kanban/inner.js
Normal file
|
|
@ -0,0 +1,399 @@
|
|||
define([
|
||||
'jquery',
|
||||
'json.sortify',
|
||||
'/bower_components/nthen/index.js',
|
||||
'/common/sframe-common.js',
|
||||
'/common/sframe-app-framework.js',
|
||||
'/common/common-util.js',
|
||||
'/common/common-hash.js',
|
||||
'/common/common-interface.js',
|
||||
'/common/modes.js',
|
||||
'/customize/messages.js',
|
||||
'/kanban/jkanban.js',
|
||||
'css!/kanban/jkanban.css',
|
||||
], function (
|
||||
$,
|
||||
Sortify,
|
||||
nThen,
|
||||
SFCommon,
|
||||
Framework,
|
||||
Util,
|
||||
Hash,
|
||||
UI,
|
||||
Modes,
|
||||
Messages)
|
||||
{
|
||||
|
||||
var verbose = function (x) { console.log(x); };
|
||||
verbose = function () {}; // comment out to enable verbose logging
|
||||
|
||||
var COLORS = ['yellow', 'green', 'orange', 'blue', 'red', 'purple', 'cyan', 'lightgreen', 'lightblue'];
|
||||
|
||||
var addRemoveItemButton = function (framework, kanban) {
|
||||
if (!kanban) { return; }
|
||||
if (framework.isReadOnly() || framework.isLocked()) { return; }
|
||||
var $container = $(kanban.element);
|
||||
$container.find('.kanban-remove-item').remove();
|
||||
$container.find('.kanban-board .kanban-item').each(function (i, el) {
|
||||
var pos = kanban.findElementPosition(el);
|
||||
var board = kanban.options.boards.find(function (b) {
|
||||
return b.id === $(el.parentNode.parentNode).attr('data-id');
|
||||
});
|
||||
$('<button>', {
|
||||
'class': 'kanban-remove-item btn btn-default',
|
||||
title: Messages.kanban_removeItem
|
||||
}).click(function (e) {
|
||||
e.stopPropagation();
|
||||
UI.confirm(Messages.kanban_removeItemConfirm, function (yes) {
|
||||
if (!yes) { return; }
|
||||
board.item.splice(pos, 1);
|
||||
$(el).remove();
|
||||
kanban.onChange();
|
||||
});
|
||||
}).text('❌').appendTo($(el));
|
||||
});
|
||||
};
|
||||
|
||||
// Kanban code
|
||||
var initKanban = function (framework, boards) {
|
||||
var defaultBoards = [{
|
||||
"id": "todo",
|
||||
"title": Messages.kanban_todo,
|
||||
"color": "blue",
|
||||
"item": [{
|
||||
"title": Messages._getKey('kanban_item', [1])
|
||||
}, {
|
||||
"title": Messages._getKey('kanban_item', [2])
|
||||
}]
|
||||
}, {
|
||||
"id": "working",
|
||||
"title": Messages.kanban_working,
|
||||
"color": "orange",
|
||||
"item": [{
|
||||
"title": Messages._getKey('kanban_item', [3])
|
||||
}, {
|
||||
"title": Messages._getKey('kanban_item', [4])
|
||||
}]
|
||||
}, {
|
||||
"id": "done",
|
||||
"title": Messages.kanban_done,
|
||||
"color": "green",
|
||||
"item": [{
|
||||
"title": Messages._getKey('kanban_item', [5])
|
||||
}, {
|
||||
"title": Messages._getKey('kanban_item', [6])
|
||||
}]
|
||||
}];
|
||||
|
||||
if (!boards) {
|
||||
verbose("Initializing with default boards content");
|
||||
boards = defaultBoards;
|
||||
} else {
|
||||
verbose("Initializing with boards content " + boards);
|
||||
}
|
||||
|
||||
// Remove any existing elements
|
||||
$(".kanban-container-outer").remove();
|
||||
|
||||
var getInput = function () {
|
||||
return $('<input>', {
|
||||
'type': 'text',
|
||||
'id': 'kanban-edit',
|
||||
'size': '30'
|
||||
});
|
||||
};
|
||||
|
||||
var kanban = new window.jKanban({
|
||||
element: '#cp-app-kanban-content',
|
||||
gutter: '15px',
|
||||
widthBoard: '300px',
|
||||
buttonContent: '❌',
|
||||
colors: COLORS,
|
||||
readOnly: framework.isReadOnly(),
|
||||
onChange: function () {
|
||||
verbose("Board object has changed");
|
||||
framework.localChange();
|
||||
if (kanban) {
|
||||
addRemoveItemButton(framework, kanban);
|
||||
}
|
||||
},
|
||||
click: function (el) {
|
||||
if (framework.isReadOnly() || framework.isLocked()) { return; }
|
||||
if (kanban.inEditMode) {
|
||||
verbose("An edit is already active");
|
||||
return;
|
||||
}
|
||||
kanban.inEditMode = true;
|
||||
$(el).find('button').remove();
|
||||
var name = $(el).text();
|
||||
$(el).html('');
|
||||
var $input = getInput().val(name).appendTo(el).focus();
|
||||
$input[0].select();
|
||||
var save = function () {
|
||||
// Store the value
|
||||
var name = $input.val();
|
||||
// Remove the input
|
||||
$(el).text(name);
|
||||
// Save the value for the correct board
|
||||
var board = $(el.parentNode.parentNode).attr("data-id");
|
||||
var pos = kanban.findElementPosition(el);
|
||||
kanban.getBoardJSON(board).item[pos].title = name;
|
||||
kanban.onChange();
|
||||
// Unlock edit mode
|
||||
kanban.inEditMode = false;
|
||||
};
|
||||
$input.blur(save);
|
||||
$input.keydown(function (e) {
|
||||
if (e.which === 13) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
save();
|
||||
return;
|
||||
}
|
||||
if (e.which === 27) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
$(el).text(name);
|
||||
kanban.inEditMode = false;
|
||||
addRemoveItemButton(framework, kanban);
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
boardTitleClick: function (el, e) {
|
||||
e.stopPropagation();
|
||||
if (framework.isReadOnly() || framework.isLocked()) { return; }
|
||||
if (kanban.inEditMode) {
|
||||
verbose("An edit is already active");
|
||||
return;
|
||||
}
|
||||
kanban.inEditMode = true;
|
||||
var name = $(el).text();
|
||||
$(el).html('');
|
||||
var $input = getInput().val(name).appendTo(el).focus();
|
||||
$input[0].select();
|
||||
var save = function () {
|
||||
// Store the value
|
||||
var name = $input.val();
|
||||
// Remove the input
|
||||
$(el).text(name);
|
||||
// Save the value for the correct board
|
||||
var board = $(el.parentNode.parentNode).attr("data-id");
|
||||
kanban.getBoardJSON(board).title = name;
|
||||
kanban.onChange();
|
||||
// Unlock edit mode
|
||||
kanban.inEditMode = false;
|
||||
};
|
||||
$input.blur(save);
|
||||
$input.keydown(function (e) {
|
||||
if (e.which === 13) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
save();
|
||||
return;
|
||||
}
|
||||
if (e.which === 27) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
$(el).text(name);
|
||||
kanban.inEditMode = false;
|
||||
return;
|
||||
}
|
||||
});
|
||||
},
|
||||
colorClick: function (el) {
|
||||
if (framework.isReadOnly() || framework.isLocked()) { return; }
|
||||
verbose("in color click");
|
||||
var board = $(el.parentNode).attr("data-id");
|
||||
var boardJSON = kanban.getBoardJSON(board);
|
||||
var currentColor = boardJSON.color;
|
||||
verbose("Current color " + currentColor);
|
||||
var index = kanban.options.colors.findIndex(function (element) {
|
||||
return (element === currentColor);
|
||||
}) + 1;
|
||||
verbose("Next index " + index);
|
||||
if (index >= kanban.options.colors.length) { index = 0; }
|
||||
var nextColor = kanban.options.colors[index];
|
||||
verbose("Next color " + nextColor);
|
||||
boardJSON.color = nextColor;
|
||||
$(el).removeClass("kanban-header-" + currentColor);
|
||||
$(el).addClass("kanban-header-" + nextColor);
|
||||
kanban.onChange();
|
||||
},
|
||||
buttonClick: function (el, boardId, e) {
|
||||
e.stopPropagation();
|
||||
if (framework.isReadOnly() || framework.isLocked()) { return; }
|
||||
UI.confirm(Messages.kanban_deleteBoard, function (yes) {
|
||||
if (!yes) { return; }
|
||||
verbose("Delete board");
|
||||
//var boardName = $(el.parentNode.parentNode).attr("data-id");
|
||||
for (var index in kanban.options.boards) {
|
||||
if (kanban.options.boards[index].id === boardId) {
|
||||
break;
|
||||
}
|
||||
index++;
|
||||
}
|
||||
kanban.options.boards.splice(index, 1);
|
||||
kanban.removeBoard(boardId);
|
||||
kanban.onChange();
|
||||
});
|
||||
},
|
||||
addItemClick: function (el) {
|
||||
if (framework.isReadOnly() || framework.isLocked()) { return; }
|
||||
if (kanban.inEditMode) {
|
||||
verbose("An edit is already active");
|
||||
return;
|
||||
}
|
||||
kanban.inEditMode = true;
|
||||
// create a form to enter element
|
||||
var boardId = $(el.parentNode.parentNode).attr("data-id");
|
||||
var $item = $('<div>', {'class': 'kanban-item'});
|
||||
var $input = getInput().val(name).appendTo($item);
|
||||
kanban.addForm(boardId, $item[0]);
|
||||
$input.focus();
|
||||
var save = function () {
|
||||
$item.remove();
|
||||
kanban.inEditMode = false;
|
||||
if (!$input.val()) { return; }
|
||||
kanban.addElement(boardId, {
|
||||
"title": $input.val(),
|
||||
});
|
||||
};
|
||||
$input.blur(save);
|
||||
$input.keydown(function (e) {
|
||||
if (e.which === 13) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
save();
|
||||
return;
|
||||
}
|
||||
if (e.which === 27) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
$item.remove();
|
||||
kanban.inEditMode = false;
|
||||
return;
|
||||
}
|
||||
});
|
||||
},
|
||||
addItemButton: true,
|
||||
boards: boards
|
||||
});
|
||||
|
||||
var addBoardDefault = document.getElementById('kanban-addboard');
|
||||
$(addBoardDefault).attr('title', Messages.kanban_addBoard);
|
||||
addBoardDefault.addEventListener('click', function () {
|
||||
if (framework.isReadOnly()) { return; }
|
||||
var counter = 1;
|
||||
|
||||
// Get the new board id
|
||||
var boardExists = function (b) { return b.id === "board" + counter; };
|
||||
while (kanban.options.boards.some(boardExists)) { counter++; }
|
||||
|
||||
kanban.addBoards([{
|
||||
"id": "board" + counter,
|
||||
"title": Messages.kanban_newBoard,
|
||||
"color": COLORS[Math.floor(Math.random()*COLORS.length)], // random color
|
||||
"item": [{
|
||||
"title": Messages._getKey('kanban_item', [1]),
|
||||
}]
|
||||
}]);
|
||||
kanban.onChange();
|
||||
});
|
||||
|
||||
return kanban;
|
||||
};
|
||||
|
||||
var mkHelpMenu = function (framework) {
|
||||
var $toolbarContainer = $('#cp-app-kanban-container');
|
||||
var helpMenu = framework._.sfCommon.createHelpMenu(['kanban']);
|
||||
$toolbarContainer.prepend(helpMenu.menu);
|
||||
|
||||
framework._.toolbar.$drawer.append(helpMenu.button);
|
||||
};
|
||||
|
||||
// Start of the main loop
|
||||
var andThen2 = function (framework) {
|
||||
|
||||
var kanban;
|
||||
var $container = $('#cp-app-kanban-content');
|
||||
|
||||
mkHelpMenu(framework);
|
||||
|
||||
if (framework.isReadOnly()) {
|
||||
$container.addClass('cp-app-readonly');
|
||||
}
|
||||
framework.onEditableChange(function (unlocked) {
|
||||
if (framework.isReadOnly()) { return; }
|
||||
if (!kanban) { return; }
|
||||
if (unlocked) {
|
||||
addRemoveItemButton(framework, kanban);
|
||||
kanban.options.readOnly = false;
|
||||
return void $container.removeClass('cp-app-readonly');
|
||||
}
|
||||
kanban.options.readOnly = true;
|
||||
$container.addClass('cp-app-readonly');
|
||||
});
|
||||
|
||||
framework.onContentUpdate(function (newContent) {
|
||||
// Init if needed
|
||||
if (!kanban) {
|
||||
kanban = initKanban(framework, (newContent || {}).content);
|
||||
addRemoveItemButton(framework, kanban);
|
||||
return;
|
||||
}
|
||||
|
||||
// Need to update the content
|
||||
verbose("Content should be updated to " + newContent);
|
||||
var currentContent = kanban.getBoardsJSON();
|
||||
var remoteContent = newContent.content;
|
||||
|
||||
if (Sortify(currentContent) !== Sortify(remoteContent)) {
|
||||
// reinit kanban (TODO: optimize to diff only)
|
||||
verbose("Content is different.. Applying content");
|
||||
kanban.setBoards(remoteContent);
|
||||
kanban.inEditMode = false;
|
||||
addRemoveItemButton(framework, kanban);
|
||||
}
|
||||
});
|
||||
|
||||
framework.setContentGetter(function () {
|
||||
if (!kanban) {
|
||||
return {
|
||||
content: []
|
||||
};
|
||||
}
|
||||
var content = kanban.getBoardsJSON();
|
||||
verbose("Content current value is " + content);
|
||||
return {
|
||||
content: content
|
||||
};
|
||||
});
|
||||
|
||||
framework.onReady(function () {
|
||||
$("#cp-app-kanban-content").focus();
|
||||
});
|
||||
|
||||
framework.onDefaultContentNeeded(function () {
|
||||
kanban = initKanban(framework);
|
||||
});
|
||||
|
||||
framework.start();
|
||||
};
|
||||
|
||||
var main = function () {
|
||||
// var framework;
|
||||
nThen(function (waitFor) {
|
||||
|
||||
// Framework initialization
|
||||
Framework.create({
|
||||
toolbarContainer: '#cme_toolbox',
|
||||
contentContainer: '#cp-app-kanban-editor',
|
||||
}, waitFor(function (framework) {
|
||||
andThen2(framework);
|
||||
}));
|
||||
});
|
||||
};
|
||||
main();
|
||||
});
|
||||
100
www/kanban/jkanban.css
Normal file
100
www/kanban/jkanban.css
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
.kanban-container * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.kanban-board {
|
||||
position: relative;
|
||||
float: left;
|
||||
background: #E2E4E6;
|
||||
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
margin: 10px;
|
||||
vertical-align: top;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.kanban-board.disabled-board {
|
||||
opacity: .3;
|
||||
}
|
||||
|
||||
.kanban-board.is-moving.gu-mirror {
|
||||
transform: rotate(3deg);
|
||||
}
|
||||
|
||||
.kanban-board.is-moving.gu-mirror .kanban-drag {
|
||||
overflow: hidden;
|
||||
padding-right: 50px;
|
||||
}
|
||||
|
||||
.kanban-board header {
|
||||
font-size: 16px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.kanban-board header .kanban-title-board {
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.kanban-board header .kanban-title-button {
|
||||
float: right;
|
||||
line-height: 1;
|
||||
padding: .25rem .5rem;
|
||||
}
|
||||
|
||||
.kanban-board .kanban-drag {
|
||||
min-height: 200px;
|
||||
padding: 20px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.kanban-item {
|
||||
background: #fff;
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
|
||||
.kanban-item:hover {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.kanban-item:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.kanban-item.is-moving.gu-mirror {
|
||||
transform: rotate(3deg);
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
/* Dragula CSS */
|
||||
|
||||
.gu-mirror {
|
||||
position: fixed !important;
|
||||
margin: 0 !important;
|
||||
z-index: 9999 !important;
|
||||
}
|
||||
|
||||
.gu-hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.gu-unselectable {
|
||||
-webkit-user-select: none !important;
|
||||
-moz-user-select: none !important;
|
||||
-ms-user-select: none !important;
|
||||
user-select: none !important;
|
||||
}
|
||||
|
||||
.gu-transit {
|
||||
opacity: 0.2 !important;
|
||||
transform: rotate(0deg) !important;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
text-align: right;
|
||||
margin-button: 5px;
|
||||
}
|
||||
1569
www/kanban/jkanban.js
Normal file
1569
www/kanban/jkanban.js
Normal file
File diff suppressed because it is too large
Load diff
22
www/mediatag/index.html
Normal file
22
www/mediatag/index.html
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Test media-tag</title>
|
||||
<script async data-bootload="main.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
|
||||
<style>
|
||||
media-tag * {
|
||||
max-width: 60vw;
|
||||
max-height: 50vh;
|
||||
}
|
||||
iframe {
|
||||
width: 60vw;
|
||||
height: 50vh;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
Media-tag:
|
||||
<media-tag src="/blob/84/845adf0efaa47db1754956859a9ffdbc76619d75e38ea3f9" data-crypto-key="cryptpad:kZiCb6zYuTbQw/9/JGjE9WGS+0/BOv6d/qyJagscCgc="></media-tag><br>
|
||||
<media-tag src="/blob/84/845adf0efaa47db1754956859a9ffdbc76619d75e38ea3f9" data-crypto-key="cryptpad:kZiCb6zYuTbQw/9/JGjE9WGS+0/BOv6d/qyJagscCgc="></media-tag><br>
|
||||
<media-tag src="/blob/0e/0e9dd35a459eb1d90df073bd2f19108e50b96019a3478288" data-crypto-key="cryptpad:HD3KsYdiz3/em/1bXEoQSibRNEQRNnTq80SdSpQtp+g="></media-tag><br>
|
||||
<media-tag src="/blob/fe/fe9f3562c42ee32703ced67cf92bfd77fee4e88eb27842db" data-crypto-key="cryptpad:NMo7rKVpl/MF/pw8A4XXJcYuI5JaADX+vQyhOXJgnLo="></media-tag>
|
||||
58
www/mediatag/main.js
Normal file
58
www/mediatag/main.js
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
require([
|
||||
'jquery',
|
||||
'/mediatag/media-tag.js',
|
||||
'/bower_components/tweetnacl/nacl-fast.min.js'
|
||||
], function ($, MediaTag) {
|
||||
console.log(MediaTag);
|
||||
console.log($('media-tag'));
|
||||
if (typeof MediaTag === "function") {
|
||||
MediaTag.PdfPlugin.viewer = '/common/pdfjs/web/viewer.html';
|
||||
|
||||
var config = {
|
||||
allowed: ['download'],
|
||||
download: {
|
||||
text: 'Download'
|
||||
}
|
||||
};
|
||||
MediaTag($('media-tag'), config)
|
||||
.on('progress', function (data) {
|
||||
console.log(data.progress);
|
||||
})
|
||||
.on('complete', function (data) {
|
||||
console.log(data);
|
||||
})
|
||||
.on('error', function (data) {
|
||||
console.error(data);
|
||||
});
|
||||
MediaTag($('media-tag')[1])
|
||||
.on('progress', function (data) {
|
||||
console.log(data.progress);
|
||||
})
|
||||
.on('complete', function (data) {
|
||||
console.log(data);
|
||||
})
|
||||
.on('error', function (data) {
|
||||
console.error(data);
|
||||
});
|
||||
MediaTag($('media-tag')[2])
|
||||
.on('progress', function (data) {
|
||||
console.log(data.progress);
|
||||
})
|
||||
.on('complete', function (data) {
|
||||
console.log(data);
|
||||
})
|
||||
.on('error', function (data) {
|
||||
console.error(data);
|
||||
});
|
||||
MediaTag($('media-tag')[3])
|
||||
.on('progress', function (data) {
|
||||
console.log(data.progress);
|
||||
})
|
||||
.on('complete', function (data) {
|
||||
console.log(data);
|
||||
})
|
||||
.on('error', function (data) {
|
||||
console.error(data);
|
||||
});
|
||||
}
|
||||
});
|
||||
442
www/mediatag/media-tag.js
Normal file
442
www/mediatag/media-tag.js
Normal file
|
|
@ -0,0 +1,442 @@
|
|||
(function(name, definition) {
|
||||
if (typeof module !== 'undefined') { module.exports = definition(); }
|
||||
else if (typeof define === 'function' && typeof define.amd === 'object') { define(definition); }
|
||||
else { this[name] = definition(); }
|
||||
}('MediaTag', function() {
|
||||
var cache;
|
||||
var PARANOIA = true;
|
||||
var cypherChunkLength = 131088;
|
||||
|
||||
// Save a blob on the file system
|
||||
var saveFile = function (blob, url, fileName) {
|
||||
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
|
||||
window.navigator.msSaveOrOpenBlob(blob, fileName);
|
||||
} else {
|
||||
// We want to be able to download the file with a name, so we need an "a" tag with
|
||||
// a download attribute
|
||||
var a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = fileName;
|
||||
// It's not in the DOM, so we can't use a.click();
|
||||
var event = new MouseEvent("click");
|
||||
a.dispatchEvent(event);
|
||||
}
|
||||
};
|
||||
|
||||
// Default config, can be overriden per media-tag call
|
||||
var config = {
|
||||
allowed: [
|
||||
'image/png',
|
||||
'image/jpeg',
|
||||
'image/jpg',
|
||||
'image/gif',
|
||||
'audio/mp3',
|
||||
'audio/ogg',
|
||||
'audio/wav',
|
||||
'audio/webm',
|
||||
'video/mp4',
|
||||
'video/ogg',
|
||||
'video/webm',
|
||||
'application/pdf',
|
||||
//'application/dash+xml', // FIXME?
|
||||
'download'
|
||||
],
|
||||
pdf: {},
|
||||
download: {
|
||||
text: "Download"
|
||||
},
|
||||
Plugins: {
|
||||
image: function (metadata, url, content, cfg, cb) {
|
||||
var img = document.createElement('img');
|
||||
img.setAttribute('src', url);
|
||||
cb(void 0, img);
|
||||
},
|
||||
video: function (metadata, url, content, cfg, cb) {
|
||||
var video = document.createElement('video');
|
||||
video.setAttribute('src', url);
|
||||
video.setAttribute('controls', true);
|
||||
cb(void 0, video);
|
||||
},
|
||||
audio: function (metadata, url, content, cfg, cb) {
|
||||
var audio = document.createElement('audio');
|
||||
audio.setAttribute('src', url);
|
||||
audio.setAttribute('controls', true);
|
||||
cb(void 0, audio);
|
||||
},
|
||||
pdf: function (metadata, url, content, cfg, cb) {
|
||||
var iframe = document.createElement('iframe');
|
||||
if (cfg.pdf.viewer) { // PDFJS
|
||||
var viewerUrl = cfg.pdf.viewer + '?file=' + url;
|
||||
iframe.src = viewerUrl + '#' + window.encodeURIComponent(metadata.name);
|
||||
return void cb (void 0, iframe);
|
||||
}
|
||||
iframe.src = url + '#' + window.encodeURIComponent(metadata.name);
|
||||
return void cb (void 0, iframe);
|
||||
},
|
||||
download: function (metadata, url, content, cfg, cb) {
|
||||
var btn = document.createElement('button');
|
||||
btn.innerHTML = cfg.download.text;
|
||||
btn.addEventListener('click', function () {
|
||||
saveFile(content, url, metadata.name);
|
||||
});
|
||||
cb(void 0, btn);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// Download a blob from href
|
||||
var download = function (src, cb) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', src, true);
|
||||
xhr.responseType = 'arraybuffer';
|
||||
|
||||
xhr.onload = function () {
|
||||
// Error?
|
||||
if (/^4/.test('' + this.status)) { return void cb("XHR_ERROR " + this.status); }
|
||||
|
||||
var arrayBuffer = xhr.response;
|
||||
if (arrayBuffer) { cb(null, new Uint8Array(arrayBuffer)); }
|
||||
};
|
||||
|
||||
xhr.send(null);
|
||||
};
|
||||
|
||||
// Decryption tools
|
||||
var Decrypt = {
|
||||
// Create a nonce
|
||||
createNonce: function () {
|
||||
if (!Array.prototype.fill) {
|
||||
// IE support
|
||||
var arr = [];
|
||||
for (var i = 0; i < 24; i++) { arr[i] = 0; }
|
||||
return new Uint8Array(arr);
|
||||
}
|
||||
return new Uint8Array(new Array(24).fill(0));
|
||||
},
|
||||
|
||||
// Increment a nonce
|
||||
// FIXME: remove throw?
|
||||
increment: function (N) {
|
||||
var l = N.length;
|
||||
while (l-- > 1) {
|
||||
if (PARANOIA) {
|
||||
if (typeof(N[l]) !== 'number') {
|
||||
throw new Error('E_UNSAFE_TYPE');
|
||||
}
|
||||
if (N[l] > 255) {
|
||||
throw new Error('E_OUT_OF_BOUNDS');
|
||||
}
|
||||
}
|
||||
/* .jshint probably suspects this is unsafe because we lack types
|
||||
but as long as this is only used on nonces, it should be safe */
|
||||
if (N[l] !== 255) { return void N[l]++; } // jshint ignore:line
|
||||
N[l] = 0;
|
||||
|
||||
// you don't need to worry about this running out.
|
||||
// you'd need a REAAAALLY big file
|
||||
if (l === 0) {
|
||||
throw new Error('E_NONCE_TOO_LARGE');
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
decodePrefix: function (A) {
|
||||
return (A[0] << 8) | A[1];
|
||||
},
|
||||
joinChunks: function (chunks) {
|
||||
return new Blob(chunks);
|
||||
},
|
||||
|
||||
// Convert a Uint8Array into Array.
|
||||
slice: function (u8) {
|
||||
return Array.prototype.slice.call(u8);
|
||||
},
|
||||
|
||||
// Gets the random key string.
|
||||
getRandomKeyStr: function () {
|
||||
var Nacl = window.nacl;
|
||||
var rdm = Nacl.randomBytes(18);
|
||||
return Nacl.util.encodeBase64(rdm);
|
||||
},
|
||||
|
||||
// Gets the key from the key string.
|
||||
getKeyFromStr: function (str) {
|
||||
return window.nacl.util.decodeBase64(str);
|
||||
}
|
||||
};
|
||||
|
||||
// Decrypts a Uint8Array with the given key.
|
||||
var decrypt = function (u8, strKey, done, progressCb) {
|
||||
var Nacl = window.nacl;
|
||||
|
||||
var progress = function (offset) {
|
||||
progressCb((offset / u8.length) * 100);
|
||||
};
|
||||
|
||||
var key = Decrypt.getKeyFromStr(strKey);
|
||||
var nonce = Decrypt.createNonce();
|
||||
var i = 0;
|
||||
var prefix = u8.subarray(0, 2);
|
||||
var metadataLength = Decrypt.decodePrefix(prefix);
|
||||
|
||||
var res = { metadata: undefined };
|
||||
|
||||
// Get metadata
|
||||
var metaBox = new Uint8Array(u8.subarray(2, 2 + metadataLength));
|
||||
var metaChunk = Nacl.secretbox.open(metaBox, nonce, key);
|
||||
|
||||
Decrypt.increment(nonce);
|
||||
|
||||
try { res.metadata = JSON.parse(Nacl.util.encodeUTF8(metaChunk)); }
|
||||
catch (e) { return void done('E_METADATA_DECRYPTION'); }
|
||||
|
||||
if (!res.metadata) { return void done('NO_METADATA'); }
|
||||
|
||||
var takeChunk = function (cb) {
|
||||
setTimeout(function () {
|
||||
var start = i * cypherChunkLength + 2 + metadataLength;
|
||||
var end = start + cypherChunkLength;
|
||||
i++;
|
||||
|
||||
// Get the chunk
|
||||
var box = new Uint8Array(u8.subarray(start, end));
|
||||
|
||||
// Decrypt the chunk
|
||||
var plaintext = Nacl.secretbox.open(box, nonce, key);
|
||||
Decrypt.increment(nonce);
|
||||
|
||||
if (!plaintext) { return void cb('DECRYPTION_FAILURE'); }
|
||||
|
||||
progress(Math.min(end, u8.length));
|
||||
|
||||
cb(void 0, plaintext);
|
||||
});
|
||||
};
|
||||
|
||||
var chunks = [];
|
||||
|
||||
// decrypt file contents
|
||||
var again = function () {
|
||||
takeChunk(function (e, plaintext) {
|
||||
if (e) { return setTimeout(function () { done(e); }); }
|
||||
|
||||
if (plaintext) {
|
||||
if (i * cypherChunkLength < u8.length) { // not done
|
||||
chunks.push(plaintext);
|
||||
return again();
|
||||
}
|
||||
|
||||
chunks.push(plaintext);
|
||||
res.content = Decrypt.joinChunks(chunks);
|
||||
return void done(void 0, res);
|
||||
}
|
||||
done('UNEXPECTED_ENDING');
|
||||
});
|
||||
};
|
||||
again();
|
||||
};
|
||||
|
||||
// Get type
|
||||
var getType = function (mediaObject, metadata, cfg) {
|
||||
var mime = metadata.type;
|
||||
var s = metadata.type.split('/');
|
||||
var type = s[0];
|
||||
var extension = s[1];
|
||||
|
||||
mediaObject.name = metadata.name;
|
||||
if (mime && cfg.allowed.indexOf(mime) !== -1) {
|
||||
mediaObject.type = type;
|
||||
mediaObject.extension = extension;
|
||||
mediaObject.mime = mime;
|
||||
return type;
|
||||
} else if (cfg.allowed.indexOf('download') !== -1) {
|
||||
mediaObject.type = type;
|
||||
mediaObject.extension = extension;
|
||||
mediaObject.mime = mime;
|
||||
return 'download';
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
// Copy attributes
|
||||
var copyAttributes = function (origin, dest) {
|
||||
Object.keys(origin.attributes).forEach(function (i) {
|
||||
if (!/^data-attr/.test(origin.attributes[i].name)) { return; }
|
||||
var name = origin.attributes[i].name.slice(10);
|
||||
var value = origin.attributes[i].value;
|
||||
dest.setAttribute(name, value);
|
||||
});
|
||||
};
|
||||
|
||||
// Process
|
||||
var process = function (mediaObject, decrypted, cfg, cb) {
|
||||
var metadata = decrypted.metadata;
|
||||
var blob = decrypted.content;
|
||||
|
||||
var mediaType = getType(mediaObject, metadata, cfg);
|
||||
|
||||
if (mediaType === 'application') {
|
||||
mediaType = mediaObject.extension;
|
||||
}
|
||||
|
||||
if (!mediaType || !cfg.Plugins[mediaType]) {
|
||||
return void cb('NO_PLUGIN_FOUND');
|
||||
}
|
||||
|
||||
// Get blob URL
|
||||
var url = decrypted.url;
|
||||
if (!url) {
|
||||
url = decrypted.url = window.URL.createObjectURL(new Blob([blob], {
|
||||
type: metadata.type
|
||||
}));
|
||||
}
|
||||
|
||||
cfg.Plugins[mediaType](metadata, url, blob, cfg, function (err, el) {
|
||||
if (err || !el) { return void cb(err || 'ERR_MEDIATAG_DISPLAY'); }
|
||||
copyAttributes(mediaObject.tag, el);
|
||||
mediaObject.tag.innerHTML = '';
|
||||
mediaObject.tag.appendChild(el);
|
||||
cb();
|
||||
});
|
||||
};
|
||||
|
||||
var addMissingConfig = function (base, target) {
|
||||
Object.keys(target).forEach(function (k) {
|
||||
if (!target[k]) { return; }
|
||||
// Target is an object, fix it recursively
|
||||
if (typeof target[k] === "object" && !Array.isArray(target[k])) {
|
||||
// Sub-object
|
||||
if (base[k] && (typeof base[k] !== "object" || Array.isArray(base[k]))) { return; }
|
||||
else if (base[k]) { addMissingConfig(base[k], target[k]); }
|
||||
else {
|
||||
base[k] = {};
|
||||
addMissingConfig(base[k], target[k]);
|
||||
}
|
||||
}
|
||||
// Target is array or immutable, copy the value if it's missing
|
||||
if (!base[k]) {
|
||||
base[k] = Array.isArray(target[k]) ? JSON.parse(JSON.stringify(target[k]))
|
||||
: target[k];
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Initialize a media-tag
|
||||
var init = function (el, cfg) {
|
||||
cfg = cfg || {};
|
||||
|
||||
addMissingConfig(cfg, config);
|
||||
|
||||
// Add support for old mediatag library
|
||||
if (!cfg.pdf.viewer && init.PdfPlugin && init.PdfPlugin.viewer) {
|
||||
cfg.pdf.viewer = init.PdfPlugin.viewer;
|
||||
}
|
||||
|
||||
// Handle jQuery elements
|
||||
if (typeof(el) === "object" && el.jQuery) { el = el[0]; }
|
||||
|
||||
// Abort smoothly if the element is not a media-tag
|
||||
if (el.nodeName !== "MEDIA-TAG") {
|
||||
console.error("Not a media-tag!");
|
||||
return {
|
||||
on: function () { return this; }
|
||||
};
|
||||
}
|
||||
|
||||
var handlers = cfg.handlers || {
|
||||
'progress': [],
|
||||
'complete': [],
|
||||
'error': []
|
||||
};
|
||||
|
||||
var mediaObject = el._mediaObject = {
|
||||
handlers: handlers,
|
||||
tag: el
|
||||
};
|
||||
|
||||
var emit = function (ev, data) {
|
||||
// Check if the event name is valid
|
||||
if (Object.keys(handlers).indexOf(ev) === -1) {
|
||||
return void console.error("Invalid mediatag event");
|
||||
}
|
||||
|
||||
// Call the handlers
|
||||
handlers[ev].forEach(function (h) {
|
||||
// Make sure a bad handler won't break the media-tag script
|
||||
try {
|
||||
h(data);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
mediaObject.on = function (ev, handler) {
|
||||
// Check if the event name is valid
|
||||
if (Object.keys(handlers).indexOf(ev) === -1) {
|
||||
console.error("Invalid mediatag event");
|
||||
return mediaObject;
|
||||
}
|
||||
// Check if the handler is valid
|
||||
if (typeof (handler) !== "function") {
|
||||
console.error("Handler is not a function!");
|
||||
return mediaObject;
|
||||
}
|
||||
// Add the handler
|
||||
handlers[ev].push(handler);
|
||||
return mediaObject;
|
||||
};
|
||||
|
||||
var src = el.getAttribute('src');
|
||||
var strKey = el.getAttribute('data-crypto-key');
|
||||
if (/^cryptpad:/.test(strKey)) {
|
||||
strKey = strKey.slice(9);
|
||||
}
|
||||
var uid = [src, strKey].join('');
|
||||
|
||||
// End media-tag rendering: display the tag and emit the event
|
||||
var end = function (decrypted) {
|
||||
process(mediaObject, decrypted, cfg, function (err) {
|
||||
if (err) { return void emit('error', err); }
|
||||
emit('complete', decrypted);
|
||||
});
|
||||
};
|
||||
|
||||
// If we have the blob in our cache, don't download & decrypt it again, just display
|
||||
if (cache[uid]) {
|
||||
end(cache[uid]);
|
||||
return mediaObject;
|
||||
}
|
||||
|
||||
// Download the encrypted blob
|
||||
download(src, function (err, u8Encrypted) {
|
||||
if (err) {
|
||||
return void emit('error', err);
|
||||
}
|
||||
// Decrypt the blob
|
||||
decrypt(u8Encrypted, strKey, function (errDecryption, u8Decrypted) {
|
||||
if (errDecryption) {
|
||||
return void emit('error', errDecryption);
|
||||
}
|
||||
// Cache and display the decrypted blob
|
||||
cache[uid] = u8Decrypted;
|
||||
end(u8Decrypted);
|
||||
}, function (progress) {
|
||||
emit('progress', {
|
||||
progress: progress
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
return mediaObject;
|
||||
};
|
||||
|
||||
// Add the cache as a property of MediaTag
|
||||
cache = init.__Cryptpad_Cache = {};
|
||||
|
||||
init.PdfPlugin = {};
|
||||
|
||||
return init;
|
||||
}));
|
||||
|
|
@ -18,6 +18,7 @@
|
|||
@poll-th-user-bg: darken(@poll-th-bg, 10%);
|
||||
@poll-editing: lighten(@poll-th-bg, 10%);
|
||||
@poll-winner: darken(@poll-th-bg, 15%);
|
||||
@poll-highlighted: lighten(@poll-th-bg, 15%);
|
||||
@poll-td-bg: @poll-th-bg;
|
||||
@poll-td-fg: @poll-th-fg;
|
||||
|
||||
|
|
@ -514,6 +515,13 @@ div.cp-app-poll-realtime {
|
|||
}
|
||||
}
|
||||
}
|
||||
tr:not(:last-child) {
|
||||
&:hover {
|
||||
td:first-child {
|
||||
background-color: @poll-highlighted;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.cp-app-poll-table-edit {
|
||||
//color: @poll-cover-color;
|
||||
|
|
|
|||
Loading…
Reference in a new issue