diff --git a/static/css/style.css b/static/css/style.css index 8b7b6f2..cdf4039 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -28,6 +28,24 @@ figure.moz { vertical-align: middle; } +figure.moz .menu { + position: absolute; + margin: inherit; + display: none; +} +figure.moz:hover .menu { + display: block; +} +figure.moz:hover .menu a { + background: rgba(0,0,0,0.5); + color: #eee; + padding: 6px 10px 8px 10px; + text-decoration: none; +} +figure.moz .menu a:hover { + background: rgba(0,0,0,0.8); +} + .big img { max-height: calc(100vh - 5px); max-width: calc(100vw - 5px); diff --git a/static/js/youp0m-admin.js b/static/js/youp0m-admin.js index 43f3341..c4a504c 100644 --- a/static/js/youp0m-admin.js +++ b/static/js/youp0m-admin.js @@ -1,11 +1,47 @@ api_url = "/api/next/"; img_url = "/images/next/"; -function admin_ctrl(figure) { - var menu = document.createElement("ul"); - var item = document.createElement("li", "test"); - menu.appendChild(item); - figure.appendChild(menu) +function publish_pict(pict) { + fetch(api_url + "/" + pict.name + "/publish").then(response => { + picts = null; + sync() + }); +} + +function delete_pict(pict) { + fetch(api_url + "/" + pict.name, { method: "DELETE" }).then(response => { + picts = null; + sync() + }); +} + +function admin_ctrl(pict) { + var figure = document.createElement("figure"); + figure.className = "moz"; + var img = document.createElement("img"); + img.src = img_url + pict.name; + img.alt = pict.name; + var div = document.createElement("div"); + div.className = "menu" + var linkPub = document.createElement("a"); + linkPub.onclick = function(e) { + publish_pict(pict); + return false; + }; + linkPub.href = "#"; + linkPub.innerHTML = "Publier"; + var linkDel = document.createElement("a"); + linkDel.onclick = function(e) { + delete_pict(pict); + return false; + }; + linkDel.href = "#"; + linkDel.innerHTML = "Supprimer"; + div.appendChild(linkPub); + div.appendChild(linkDel); + figure.appendChild(div); + figure.appendChild(img); + document.body.appendChild(figure); } function sync() { diff --git a/static/js/youp0m.js b/static/js/youp0m.js index 73dac11..00fe883 100644 --- a/static/js/youp0m.js +++ b/static/js/youp0m.js @@ -16,32 +16,41 @@ function get_picts(then, then_value) { }); } -function show_mozaic() { +function show_mozaic(callpict) { if (!picts) { - get_picts(show_mozaic); + get_picts(show_mozaic, callpict); return; } + if (!picts.length) { + document.body.innerHTML = '

Welcome on YouP0m!

There is no image currently, come back soon!

'; + return; + } + + if (!callpict) { + callpict = function (pict) { + var figure = document.createElement("figure"); + figure.className = "moz"; + var img = document.createElement("img"); + img.src = img_url + pict.name; + img.alt = pict.name; + var link = document.createElement("a"); + link.onclick = function(e) { + window.history.pushState(null, "YouP0m", link.href); + sync(); + return false; + }; + link.href = "/" + pict.name; + link.appendChild(img); + figure.appendChild(link); + document.body.appendChild(figure); + } + } + while (document.body.hasChildNodes()) document.body.removeChild(document.body.lastChild); - picts.forEach(function (pict) { - var figure = document.createElement("figure"); - figure.className = "moz"; - var img = document.createElement("img"); - img.src = img_url + pict.name; - img.alt = pict.name; - var link = document.createElement("a"); - link.onclick = function(e) { - window.history.pushState(null, "YouP0m", link.href); - sync(); - return false; - }; - link.href = "/" + pict.name; - link.appendChild(img); - figure.appendChild(link); - document.body.appendChild(figure); - }); + picts.forEach(callpict); } function show_picture(id) {