mrflos/memo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

WIP refacto

Browse source
This commit is contained in:
Florian Schmitt 2022-04-14 09:21:17 +03:00
parent 324cd85a02
commit c71306264b
11 changed files with 2146 additions and 1632 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
.nodemonignore
View file

@ -1,4 +0,0 @@
/client/*
.DS_Store
/.git/*
*.rdb

3
client/css/bigcards.css
View file

@ -1,8 +1,6 @@
.card { .card {
width: 230px; width: 230px;
height: 152px; height: 152px;
xpadding: 5px; float: left;
xmargin: 0 10px 10px 0;
font-size: .9em; font-size: .9em;
@ -32,7 +30,6 @@
.card-image { .card-image {
position: absolute; position: absolute;
xtop: -10;
left: -3px; left: -3px;
width: 100%; width: 100%;
height: 100%; height: 100%;

1345
client/css/style.css
View file

File diff suppressed because it is too large Load diff

150
client/script.js
View file

@ -47,7 +47,7 @@ socket.on("connect", function () {
socket.on("disconnect", function () { socket.on("disconnect", function () {
blockUI("Serveur déconnecté. Veuillez rafraîchir la page pour essayer de vous reconnecter…") blockUI("Serveur déconnecté. Veuillez rafraîchir la page pour essayer de vous reconnecter…")
//$('.blockOverlay').click($.unblockUI); //$('.blockOverlay').on('click', $.unblockUI);
}) })
socket.on("message", function (data) { socket.on("message", function (data) {
@ -189,7 +189,7 @@ function getMessage(m) {
} }
} }
$(document).bind("keyup", function (event) { $(document).on("keyup", function (event) {
keyTrap = event.which keyTrap = event.which
}) })
@ -229,7 +229,7 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed) {
//we click on a card //we click on a card
//The following doesn't work so we will do the bug //The following doesn't work so we will do the bug
//fix recommended in the above bug report //fix recommended in the above bug report
// card.click( function() { // card.on('click', function() {
// $(this).focus(); // $(this).focus();
// } ); // } );
@ -251,7 +251,7 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed) {
}) })
//After a drag: //After a drag:
card.bind("dragstop", function (event, ui) { card.on("dragstop", function (event, ui) {
if (keyTrap == 27) { if (keyTrap == 27) {
keyTrap = null keyTrap = null
return return
@ -323,7 +323,7 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed) {
} }
) )
card.children(".delete-card-icon").click(function () { card.children(".delete-card-icon").on("click", function () {
$("#" + id).remove() $("#" + id).remove()
//notify server of delete //notify server of delete
sendAction("deleteCard", { sendAction("deleteCard", {
@ -415,11 +415,6 @@ function createCard(id, text, x, y, rot, colour) {
} }
function randomCardColour() { function randomCardColour() {
var choosed = $("#choose-card-color").val()
if (choosed !== "random") {
return choosed
}
var colours = ["yellow", "green", "blue", "white"] var colours = ["yellow", "green", "blue", "white"]
var i = Math.floor(Math.random() * colours.length) var i = Math.floor(Math.random() * colours.length)
@ -726,16 +721,14 @@ function download(filename, text) {
element.style.display = "none" element.style.display = "none"
document.body.appendChild(element) document.body.appendChild(element)
element.click() element.click()
document.body.removeChild(element) document.body.removeChild(element)
} }
function addRevision(timestamp) { function addRevision(timestamp) {
var li = $('<li id="revision-' + timestamp + '"></li>') var li = $('<li id="revision-' + timestamp + '"></li>')
var s1 = $("<span></span>") var s1 = $("<span></span>")
var s2 = $('<img src="../images/stickers/sticker-deletestar.png" alt="delete revision">') var s2 = $('<img src="/images/stickers/sticker-deletestar.png" alt="delete revision">')
if (typeof timestamp === "string") { if (typeof timestamp === "string") {
timestamp = parseInt(timestamp) timestamp = parseInt(timestamp)
} }
@ -745,13 +738,13 @@ function addRevision(timestamp) {
li.append(s2) li.append(s2)
$("#revisions-list").append(li) $("#revisions-list").append(li)
s1.click(function () { $('body').on("click", s1, function () {
socket.json.send({ socket.json.send({
action: "exportRevision", action: "exportRevision",
data: timestamp, data: timestamp,
}) })
}) })
s2.click(function () { $('body').on("click", s2, function () {
socket.json.send({ socket.json.send({
action: "deleteRevision", action: "deleteRevision",
data: timestamp, data: timestamp,
@ -770,39 +763,29 @@ $(function () {
//setTimeout($.unblockUI, 2000); //setTimeout($.unblockUI, 2000);
$("#create-card").click(function () { $(".add-post-it").on("click", function () {
var rotation = Math.random() * 10 - 5 //add a bit of random rotation (+/- 10deg) var rotation = Math.random() * 10 - 5 //add a bit of random rotation (+/- 10deg)
uniqueID = Math.round(Math.random() * 99999999) //is this big enough to assure uniqueness? var cardLeft = 150 + Math.random() * 400
var cardTop = 20 + Math.random() * 50
var uniqueID = Math.round(Math.random() * 99999999) //is this big enough to assure uniqueness?
//alert(uniqueID); //alert(uniqueID);
createCard( createCard("card" + uniqueID, "", cardLeft, cardTop, rotation, $(this).data("color"))
"card" + uniqueID,
"",
58,
$("div.board-outline").height(), // hack - not a great way to get the new card coordinates, but most consistant ATM
rotation,
randomCardColour()
)
}) })
// Style changer // Style changer
$("#smallify").click(function () { $("#smallify").on("click", function () {
if (currentTheme == "bigcards") { if (currentTheme == "bigcards") {
changeThemeTo("smallcards") changeThemeTo("smallcards")
} else if (currentTheme == "smallcards") { } else if (currentTheme == "smallcards") {
changeThemeTo("bigcards") changeThemeTo("bigcards")
} }
/*else if (currentTheme == "nocards")
{
currentTheme = "bigcards";
$("link[title=cardsize]").attr("href", "css/bigcards.css");
}*/
sendAction("changeTheme", currentTheme) sendAction("changeTheme", currentTheme)
return false return false
}) })
$("#icon-col").hover( $("#icon-col").on(
"hover",
function () { function () {
$(".col-icon").fadeIn(10) $(".col-icon").fadeIn(10)
}, },
@ -811,29 +794,19 @@ $(function () {
} }
) )
$("#add-col").click(function () { $("#add-col").on("click", function () {
createColumn("Nouveau") createColumn("Nouveau")
return false return false
}) })
$("#delete-col").click(function () { $("#delete-col").on("click", function () {
deleteColumn() deleteColumn()
return false return false
}) })
// $('#cog-button').click( function(){
// $('#config-dropdown').fadeToggle();
// } );
// $('#config-dropdown').hover(
// function(){ /*$('#config-dropdown').fadeIn()*/ },
// function(){ $('#config-dropdown').fadeOut() }
// );
//
var user_name = getCookie("scrumscrum-username") var user_name = getCookie("scrumscrum-username")
$("#yourname-input").focus(function () { $("#yourname-input").on("focus", function () {
if ($(this).val() == "anonyme") { if ($(this).val() == "anonyme") {
$(this).val("") $(this).val("")
} }
@ -841,7 +814,7 @@ $(function () {
$(this).addClass("focused") $(this).addClass("focused")
}) })
$("#yourname-input").blur(function () { $("#yourname-input").on("blur", function () {
if ($(this).val() === "") { if ($(this).val() === "") {
$(this).val("anonyme") $(this).val("anonyme")
} }
@ -851,14 +824,14 @@ $(function () {
}) })
$("#yourname-input").val(user_name) $("#yourname-input").val(user_name)
$("#yourname-input").blur() $("#yourname-input").trigger("blur")
$("#yourname-li").hide() $("#yourname-li").hide()
$("#yourname-input").keypress(function (e) { $("#yourname-input").on("keypress", function (e) {
code = e.keyCode ? e.keyCode : e.which code = e.keyCode ? e.keyCode : e.which
if (code == 10 || code == 13) { if (code == 10 || code == 13) {
$(this).blur() $(this).trigger("blur")
} }
}) })
@ -879,13 +852,13 @@ $(function () {
;(function () { ;(function () {
var offsets var offsets
$(".board-outline").bind("resizestart", function () { $(".board-outline").on("resizestart", function () {
offsets = calcCardOffset() offsets = calcCardOffset()
}) })
$(".board-outline").bind("resize", function (event, ui) { $(".board-outline").on("resize", function (event, ui) {
adjustCard(offsets, false) adjustCard(offsets, false)
}) })
$(".board-outline").bind("resizestop", function (event, ui) { $(".board-outline").on("resizestop", function (event, ui) {
boardResizeHappened(event, ui) boardResizeHappened(event, ui)
adjustCard(offsets, true) adjustCard(offsets, true)
}) })
@ -901,7 +874,7 @@ $(function () {
containment: "parent", containment: "parent",
}) })
$("#export-txt").click(function () { $("#export-txt").on("click", function () {
$('.nav-tabs a[href="#scrumblr"]').tab("show") $('.nav-tabs a[href="#scrumblr"]').tab("show")
socket.json.send({ socket.json.send({
action: "exportTxt", action: "exportTxt",
@ -909,7 +882,7 @@ $(function () {
}) })
}) })
$("#export-csv").click(function () { $("#export-csv").on("click", function () {
$('.nav-tabs a[href="#scrumblr"]').tab("show") $('.nav-tabs a[href="#scrumblr"]').tab("show")
socket.json.send({ socket.json.send({
action: "exportCsv", action: "exportCsv",
@ -917,7 +890,7 @@ $(function () {
}) })
}) })
$("#export-json").click(function () { $("#export-json").on("click", function () {
socket.json.send({ socket.json.send({
action: "exportJson", action: "exportJson",
data: { data: {
@ -927,7 +900,7 @@ $(function () {
}) })
}) })
$("#import-file").click(function (evt) { $("#import-file").on("click", function (evt) {
evt.stopPropagation() evt.stopPropagation()
evt.preventDefault() evt.preventDefault()
@ -943,7 +916,7 @@ $(function () {
fr.readAsText(f) fr.readAsText(f)
}) })
$("#create-revision").click(function () { $("#create-revision").on("click", function () {
socket.json.send({ socket.json.send({
action: "createRevision", action: "createRevision",
data: { data: {
@ -1048,8 +1021,6 @@ $(document).ready(function () {
} }
}, 500) }, 500)
$(".names").css({ margin: "auto", width: "auto" }).addClass("pull-right")
$("#scrumblr") $("#scrumblr")
.append($(".names, .stickers, .buttons")) .append($(".names, .stickers, .buttons"))
.after( .after(
@ -1065,7 +1036,6 @@ $(document).ready(function () {
$("#about").append($("#tuto-faq, #le-logiciel, #jardin")) $("#about").append($("#tuto-faq, #le-logiciel, #jardin"))
// Style // Style
$("#create-card").addClass("vert fa-3x").css("opacity", "1")
$("#smallify").on("click", function () { $("#smallify").on("click", function () {
if (currentTheme == "bigcards") { if (currentTheme == "bigcards") {
$(this).children("i").removeClass("fa-search-plus").addClass("fa-search-minus") $(this).children("i").removeClass("fa-search-plus").addClass("fa-search-minus")
@ -1091,9 +1061,11 @@ $(document).ready(function () {
} }
// put URL in share input // put URL in share input
$("#taburl").val(location) var mainurl = location.toString().split('#')[0]
$(".replace-url").val(mainurl)
$(".share-iframe").text($(".share-iframe").text().replace('{{replace-url}}', mainurl))
// copy URL to clipboard // copy URL to clipboard
$("#copyurl").click(function (e) { $("#copyurl").on("click", function (e) {
e.preventDefault() e.preventDefault()
var node = document.getElementById("taburl") var node = document.getElementById("taburl")
node.disabled = null node.disabled = null
@ -1115,7 +1087,7 @@ $(document).ready(function () {
//Close with Escape Button //Close with Escape Button
window.onkeydown = function (event) { window.onkeydown = function (event) {
if (event.keyCode === 27) { if (event.keyCode === 27) {
document.getElementById("close").click() document.getElementById("close").on("click")
} }
} }
@ -1155,3 +1127,53 @@ $(function () {
}) })
} }
}) })
$(function () {
// Toggle Nav on Click
$(".toggle-nav").on("click", function () {
var target = $(this).attr("href")
if (target === '#') {
target = false
} else {
history.replaceState('', '', target);
}
toggleNav(target)
return false
})
// When nav opened, a click on the canvas hides the menu
$("body").on("click", ".show-nav #site-canvas main", function () {
toggleNav(false)
return false
})
$(".backgrounds .bg").on("click", function () {
if ($(this).hasClass("selected")) {
$("body").css("background-image", "none")
$(this).removeClass("selected")
} else {
$(".selected").removeClass("selected")
$('.bgurl').val('')
$("body").css("background-image", 'url("/' + $(this).attr("src") + '")')
$(this).addClass("selected")
}
})
$('.bgurl').on('change', function() {
var url = $(this).val()
if (url) {
$(".selected").removeClass("selected")
$("body").css("background-image", 'url("' + url + '")')
}
})
})
function toggleNav(target) {
if ($("#site-wrapper").hasClass("show-nav") && target === false) {
$("#site-wrapper").removeClass("show-nav")
} else {
$("#share, #settings").hide()
if (target !== false) {
$(target).show()
}
$("#site-wrapper").addClass("show-nav")
}
return false
}

1930
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

22
package.json
View file

@ -1,9 +1,10 @@
{ {
"name": "scrumblr", "name": "scrumblr",
"description": "Web-based simulation of a physical agile sprint board that supports real-time collaboration.", "description": "Web-based simulation of a physical agile sprint board that supports real-time collaboration.",
"version": "0.2.1", "version": "1.0.0",
"license": "AGPL-3.0",
"repository": { "repository": {
"url": "http://framagit.org/colibris/framemo" "url": "https://framagit.org/colibris/framemo"
}, },
"author": "Ali Asaria", "author": "Ali Asaria",
"main": "server.js", "main": "server.js",
@ -14,20 +15,33 @@
"node": "0.4.7" "node": "0.4.7"
}, },
"scripts": { "scripts": {
"start": "node server.js" "start": "nodemon server.js -e js,css,jade,json"
},
"nodemonConfig": {
"ignore": [
".DS_Store",
" /.git/*",
"*.rdb",
"docs/*"
]
}, },
"dependencies": { "dependencies": {
"async": "~0.9.0", "async": "~0.9.0",
"bootstrap-icons": "^1.8.1",
"compression": "^1.1.0", "compression": "^1.1.0",
"express": "4.x", "express": "4.x",
"html2canvas": "^1.4.1",
"jade": "~1.5.0", "jade": "~1.5.0",
"redis": "~0.12.1", "redis": "~0.12.1",
"reload": "^3.2.0",
"sanitizer": "~0.1.1", "sanitizer": "~0.1.1",
"simplesets": "~1.2.0", "simplesets": "~1.2.0",
"socket.io": "1.x", "socket.io": "1.x",
"typeface-inter": "^3.18.1",
"yargs": "~2.3.0" "yargs": "~2.3.0"
}, },
"devDependencies": { "devDependencies": {
"forever": "^0.15.3" "forever": "^0.15.3",
"nodemon": "^2.0.15"
} }
} }

36
server.js
View file

@ -3,8 +3,7 @@
SYSTEM INCLUDES SYSTEM INCLUDES
**************/ **************/
var http = require("http") var http = require("http")
// var sys = require('sys'); var reload = require('reload')
var async = require("async")
var sanitizer = require("sanitizer") var sanitizer = require("sanitizer")
var compression = require("compression") var compression = require("compression")
var express = require("express") var express = require("express")
@ -33,12 +32,22 @@ var router = express.Router()
app.use(compression()) app.use(compression())
app.use(conf.baseurl, router) app.use(conf.baseurl, router)
router.use(express.static(__dirname + "/node_modules"))
router.use(express.static(__dirname + "/client")) router.use(express.static(__dirname + "/client"))
var server = require("http").Server(app) var server = http.createServer(app)
server.listen(conf.port)
console.log("Server running at http://127.0.0.1:" + conf.port + "/") // Reload code here
reload(app).then(function (reloadReturned) {
// reloadReturned is documented in the returns API in the README
// Reload started, start web server
server.listen(conf.port, function () {
console.log('Web server available on http://127.0.0.1:'+ conf.port )
})
}).catch(function (err) {
console.error('Reload could not start, could not start server/sample app', err)
})
/************** /**************
SETUP Socket.IO SETUP Socket.IO
@ -53,15 +62,14 @@ var io = require("socket.io")(server, {
router.get("/", function (req, res) { router.get("/", function (req, res) {
//console.log(req.header('host')); //console.log(req.header('host'));
url = req.header("host") + req.baseUrl url = req.header("host") + req.baseUrl
var connected = io.sockets.connected var connected = io.sockets.connected
clientsCount = Object.keys(connected).length clientsCount = Object.keys(connected).length
res.render("home.jade", { res.render("home.jade", {
url: url, url: url,
headerBarUrl: headerBarUrl, headerBarUrl: headerBarUrl,
logoUrl: logoUrl, logoUrl: logoUrl,
connected: clientsCount connected: clientsCount,
home: true,
}) })
}) })
@ -69,10 +77,10 @@ router.get("/demo", function (req, res) {
url = req.header("host") + req.baseUrl url = req.header("host") + req.baseUrl
res.render("index.jade", { res.render("index.jade", {
pageTitle: "Post-it - demo", pageTitle: "Post-it - demo",
headerBarUrl: headerBarUrl, headerBarUrl: headerBarUrl,
logoUrl: logoUrl, logoUrl: logoUrl,
url: url, url: url,
demo: true demo: true,
}) })
}) })
@ -80,12 +88,16 @@ router.get("/:id", function (req, res) {
url = req.header("host") + req.baseUrl url = req.header("host") + req.baseUrl
res.render("index.jade", { res.render("index.jade", {
pageTitle: "Post-it - " + req.params.id, pageTitle: "Post-it - " + req.params.id,
headerBarUrl: headerBarUrl, headerBarUrl: headerBarUrl,
logoUrl: logoUrl, logoUrl: logoUrl,
url: url url: url,
}) })
}) })
router.get("/stats", function (req, res) {
console.log('TODO: stats')
})
/************** /**************
SOCKET.I0 SOCKET.I0
**************/ **************/

4
views/home.jade
View file

@ -12,9 +12,9 @@ block body
tr tr
td td
form.home(onsubmit="return go();") form.home(onsubmit="return go();")
label Nommez votre nouveau tableau : label Créer/ouvrir un tableau intitulé :
br br
input.text(type="text", name="name") input.text(type="text", name="name")
a#go(onclick="return go();") &nbsp;Allons-y. a#go(onclick="return go();") OK
p.home Exemple : p.home Exemple :
p.home!= '<a href="//' + locals.url + '/demo">' + locals.url + '/demo</a>' p.home!= '<a href="//' + locals.url + '/demo">' + locals.url + '/demo</a>'

137
views/index.jade
View file

@ -1,22 +1,42 @@
extends layout extends layout
block header block header
- if (locals.demo) div#create-card.post-it-actions
div.notice-bar Tableau de démonstration.<br />N’y mettez rien d’important ! a.add-post-it.add-white-card(href="#", data-color="white")
i.fa.fa-fw.fa-lg.fa-plus-circle(title='Ajouter une note blanche')
img(alt="blanc", src="images/white-card.png")
a.add-post-it.add-yellow-card(href="#", data-color="yellow")
i.fa.fa-fw.fa-lg.fa-plus-circle(title='Ajouter une note jaune')
img(alt="jaune", src="images/yellow-card.png")
a.add-post-it.add-green-card(href="#", data-color="green")
i.fa.fa-fw.fa-lg.fa-plus-circle(title='Ajouter une note verte')
img(alt="vert", src="images/green-card.png")
a.add-post-it.add-blue-card(href="#", data-color="blue")
i.fa.fa-fw.fa-lg.fa-plus-circle(title='Ajouter une note bleu')
img(alt="bleu", src="images/blue-card.png")
div.stickers
div.sticker#sticker-red(title='Glisser-déposer la pastille rouge')
div.sticker#sticker-blue(title='Glisser-déposer la pastille bleue')
div.sticker#sticker-yellow(title='Glisser-déposer la pastille jaune')
div.sticker#sticker-green(title='Glisser-déposer la pastille verte')
div.sticker#sticker-pink(title='Glisser-déposer la pastille rose')
div.sticker#sticker-lightblue(title='Glisser-déposer la pastille bleu clair')
div.sticker#sticker-orange(title='Glisser-déposer la pastille orange')
div.sticker#sticker-purple(title='Glisser-déposer la pastille violette')
br
div.sticker#sticker-gold(title='Glisser-déposer une étoile dorée')
div.sticker#sticker-bluestar(title='Glisser-déposer une étoile bleue')
div.sticker#sticker-silverstar(title='Glisser-déposer une étoile argentée')
div.sticker#sticker-redstar(title='Glisser-déposer une étoile rouge')
div.sticker#nosticker(title='Supprimer les pastilles ou les étoiles d\'une note')
div.actions div.actions
a#share-link(href="#share", aria-controls="share", title="Partager le tableau") a#smallify(href="#size", title="Changer la taille des post-it")
i.fa.fa-fw.fa-lg.fa-share-alt
span Partager
a#revisions-link(href="#revisions", aria-controls="revisions", title="Révisions")
i.fa.fa-fw.fa-lg.fa-exchange
span Révisions
a#smallify(href="javascript:void(0);", title="Réduire la taille des post-it")
i.fa.fa-fw.fa-lg.fa-search-plus i.fa.fa-fw.fa-lg.fa-search-plus
span.big Grands Post-it a#full-page(href="#fullscreen", aria-hidden="true", title="Plein écran")
span.small Petits Post-it
a#full-page(href="javascript:void(0);", aria-hidden="true", title="Plein écran")
i.fa.fa-fw.fa-lg.fa-expand i.fa.fa-fw.fa-lg.fa-expand
span.full-screen Plein écran a.toggle-nav(href="#share",aria-hidden="true", title="Partager le tableau")
span.contain-screen Réduire i.fa.fa-fw.fa-lg.fa-share-alt
a.toggle-nav(href="#settings", aria-hidden="true", title="Options")
i.fa.fa-fw.fa-lg.fa-cog
block body block body
div.container div.container
@ -30,87 +50,8 @@ block body
image#add-col.col-icon(width='20', height='20', src='images/icons/iconic/raster/black/plus_alt_32x32.png' alt='Ajouter une colonne') image#add-col.col-icon(width='20', height='20', src='images/icons/iconic/raster/black/plus_alt_32x32.png' alt='Ajouter une colonne')
image#delete-col.col-icon(width='20', height='20', src='images/icons/iconic/raster/black/minus_alt_32x32.png' alt='Supprimer une colonne') image#delete-col.col-icon(width='20', height='20', src='images/icons/iconic/raster/black/minus_alt_32x32.png' alt='Supprimer une colonne')
div.container div.names
div.buttons p <i class="fa fa-fw fa-lg fa-users"></i> connectés :
i#create-card.fa.fa-plus-circle.fa-2x.bottom-icon(title='Ajouter une note') input#yourname-input
span Ajouter un Post-it span.you-text (vous)
div.form-group ul#names-ul
label.control-label(for='choose-card-color') Couleur
select#choose-card-color.form-control
option(value='random') Au hasard
option(value='yellow') Jaune
option(value='green') Vert
option(value='blue') Bleu
option(value='white') Blanc
div.stickers
div.sticker#sticker-red(title='Ajouter une pastille rouge')
div.sticker#sticker-blue(title='Ajouter une pastille bleue')
div.sticker#sticker-yellow(title='Ajouter une pastille jaune')
div.sticker#sticker-green(title='Ajouter une pastille verte')
br
div.sticker#sticker-pink(title='Ajouter une pastille rose')
div.sticker#sticker-lightblue(title='Ajouter une pastille bleu clair')
div.sticker#sticker-orange(title='Ajouter une pastille orange')
div.sticker#sticker-purple(title='Ajouter une pastille violette')
br
div.sticker#sticker-gold(title='Ajouter une étoile dorée')
div.sticker#sticker-bluestar(title='Ajouter une étoile bleue')
div.sticker#sticker-silverstar(title='Ajouter une étoile argentée')
div.sticker#sticker-redstar(title='Ajouter une étoile rouge')
br
div.sticker#nosticker(title='Supprimer les pastilles ou les étoiles d\'une note')
div.names
p <i class="fa fa-fw fa-lg fa-users"></i> connectés :
input#yourname-input
span.you-text (vous)
ul#names-ul
div#share.modal
div.modal-content
div.header
a#close(href="#")
div.box.box3
<svg viewbox="0 0 40 40"><path class="close-x" d="M 10,10 L 30,30 M 30,10 L 10,30" /></svg>
h2 Partager le tableau
div.copy
div.form-inline
div.input-group
input#taburl.form-control(disabled='disabled')
div.input-group-addon
a#copyurl(href='#', title='Copier l\'adresse du tableau dans votre presse-papier')
i.fa.fa-clipboard
a(href="#")
div.overlay
div#revisions.modal
div.modal-content
div.header
a#close(href="#")
div.box.box3
<svg viewbox="0 0 40 40"><path class="close-x" d="M 10,10 L 30,30 M 30,10 L 10,30" /></svg>
h2 Révisions - Import/Export
div.copy
div.revisions
h3 Révisions
button#create-revision.btn.btn-primary Créer une révision
div
ul#revisions-list
div.export
h3 Exporter le tableau
button#export-txt.btn.btn-primary Format texte
button#export-csv.btn.btn-primary Format CSV
button#export-json.btn.btn-primary Format JSON (pour import dans Post-it)
div.import
h3 Importer un tableau
div.form-inline
div.form-group
label(for="import-input") Fichier JSON à importer
input(type="file")#import-input.form-control
button#import-file.btn.btn-primary Importer
a(href="#")
div.overlay

141
views/layout.jade
View file

@ -1,49 +1,106 @@
doctype html doctype html
html(lang="fr") html(lang="fr")
head head
link(href="css/font-awesome.min.css", rel="stylesheet")
<!-- STYLES --> link(href="bootstrap-icons/font/bootstrap-icons.css", rel="stylesheet")
<link href="css/font-awesome.min.css" rel="stylesheet"> link(rel="stylesheet", type="text/css", href="css/style.css")
<link rel="stylesheet" type="text/css" href="css/style.css" /> link(rel="stylesheet" title="cardsize", href="css/bigcards.css", type="text/css", media="all")
<link rel="stylesheet" title="cardsize" href="css/bigcards.css" type="text/css" media="all" />
<!-- jQuery -->
<script src="lib/jquery.min.js"></script>
<script src="lib/jquery-ui.min.js"></script>
<!-- External Scripts -->
<script src="lib/jquery.ui.touch-punch.min.js"></script>
<script src="lib/jquery.jeditable.js"></script>
<script src="lib/jquery.blockUI.js"></script>
<script src="lib/marked.min.js"></script>
<script src="lib/moment-with-locales.min.js"></script>
<!-- Socket.IO -->
<script src="socket.io/socket.io.js"></script>
<!-- ** My Script ** -->
<script src="script.js"></script>
if locals.faviconUrl if locals.faviconUrl
link(rel="icon" type="image/png" href=locals.faviconUrl) link(rel="icon", type="image/png", href=locals.faviconUrl)
else else
link(rel="icon" type="image/png" href="/images/favicon.png") link(rel="icon", type="image/png", href="/images/favicon.png")
title= locals.pageTitle title= locals.pageTitle
body body
div#header-bar(data-url=locals.headerBarUrl) div#site-wrapper
header.container.main-header div#site-canvas
div.title div#site-menu
a(href="//" + locals.url, title="Retour à la page d'accueil") a.toggle-nav.pull-right.close-link(href="#") Fermer&nbsp;&nbsp;
if locals.logoUrl i.fa.fa-times
img.logo(src=locals.logoUrl, alt="logo Post-it")
else div#share
img.logo(src="images/logo-Post-it.svg", alt="logo Post-it") div.copy
div.base-line Organiser ses idées collectivement h2 Partager le tableau
block header h3 par lien
main div.form-inline
block body div.input-group
div.clearfix input.replace-url.form-control(disabled='disabled')
footer.container div.input-group-addon
block footer a.copyurl(href='#', title='Copier l\'adresse du tableau dans votre presse-papier')
div.credits Logiciel libre basé sur <a href="https://framagit.org/framasoft/framemo">Framemo</a> et <a href="https://github.com/aliasaria/scrumblr">Scrumblr</a> - <a href="https://framagit.org/colibris/framemo">Code source</a> i.fa.fa-clipboard
h3 en iframe HTML
div.form-inline
div.input-group
textarea.share-iframe.form-control(disabled='disabled', name="html-widget", cols="30", rows="3")
&lt;iframe src="{{replace-url}}" width="100%" height="600" frameborder="0"&gt;&lt;/iframe&gt;
div.input-group-addon
a#copyurl(href='#', title='Copier l\'adresse du tableau dans votre presse-papier')
i.fa.fa-clipboard
div.export
h2 Exporter le tableau
button#export-txt.btn.btn-primary Format texte
button#export-csv.btn.btn-primary Format CSV
button#export-json.btn.btn-primary Format JSON (pour import dans Post-it)
div#settings
h2 Image de fond
div.backgrounds
img.bg(src="images/backgrounds/lagune.jpg", alt="lagune")
img.bg(src="images/backgrounds/canoe.jpg", alt="canoe")
img.bg(src="images/backgrounds/ciel.jpg", alt="ciel")
img.bg(src="images/backgrounds/contreplaque.jpg", alt="contreplaque")
img.bg(src="images/backgrounds/muscaris.jpg", alt="muscaris")
img.bg(src="images/backgrounds/nuagesoir.jpg", alt="nuagesoir")
img.bg(src="images/backgrounds/osier.jpg", alt="osier")
img.bg(src="images/backgrounds/planches.jpg", alt="planches")
img.bg(src="images/backgrounds/ardoise.jpg", alt="ardoise")
img.bg(src="images/backgrounds/clouds.jpg", alt="clouds")
img.bg(src="images/backgrounds/crab.jpg", alt="crab")
img.bg(src="images/backgrounds/ecorces.jpg", alt="ecorces")
img.bg(src="images/backgrounds/kiwi.jpg", alt="kiwi")
img.bg(src="images/backgrounds/plants.jpg", alt="plants")
img.bg(src="images/backgrounds/straw.jpg", alt="straw")
img.bg(src="images/backgrounds/textile.jpg", alt="textile")
img.bg(src="images/backgrounds/trees.jpg", alt="trees")
img.bg(src="images/backgrounds/yellow-bamboos.jpg", alt="yellow-bamboos")
input.bgurl.form-control(type="url", placeholder="URL vers image de fond", name="bgurl")
div.revisions
h2 Révisions
button#create-revision.btn.btn-primary Créer une révision
div
ul#revisions-list
div.import
h2 Importer un tableau
div.form-inline
div.form-group
label(for="import-input") Fichier JSON à importer
input(type="file")#import-input.form-control
button#import-file.btn.btn-primary Importer
div#header-bar(data-url=locals.headerBarUrl)
header.container.main-header
div.title
a(href="/", title="Retour à la page d'accueil")
if locals.logoUrl
img.logo(src=locals.logoUrl, alt="logo Post-it")
else
img.logo(src="images/logo-Post-it.svg", alt="logo Post-it")
if (locals.home === true)
div.base-line Organiser ses idées collectivement
if (locals.demo === true)
div.base-line Tableau de démonstration.<br />N’y mettez rien d’important !
block header
main
block body
div.clearfix
footer.container
block footer
div.credits Logiciel libre basé sur <a href="https://framagit.org/framasoft/framemo">Framemo</a> et <a href="https://github.com/aliasaria/scrumblr">Scrumblr</a> - <a href="https://framagit.org/colibris/framemo">Code source</a>
script(src="/reload/reload.js")
script(src="lib/jquery.min.js")
script(src="lib/jquery-ui.min.js")
script(src="lib/jquery.ui.touch-punch.min.js")
script(src="lib/jquery.jeditable.js")
script(src="lib/jquery.blockUI.js")
script(src="lib/marked.min.js")
script(src="lib/moment-with-locales.min.js")
script(src="socket.io/socket.io.js")
script(src="script.js")