update layout

diff --git a/src/index.js b/src/index.js
index 323060377717baf436f076e253ddc414563d467f..e1ce78ce8c439bad6b6e671b9e1448dd12683503 100644 (file)
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,8 @@
 let server = null;
 let tags = {};
+let media = [];
 let current_tag = null;
+let current_hash = null;
 
 function init(){
   get_config();
@@ -24,6 +26,7 @@ function get_metadata(){
 }
 
 function process_media(items){
+  media = items;
   items.forEach(i => i.datetime = new Date(i.datetime));
   items.sort((a, b) => a.datetime < b.datetime);
   items.forEach(i => {
@@ -33,17 +36,40 @@ function process_media(items){
     })
   });
   create_tags();
-  let ta = Object.keys(tags);
-  console.log(ta);
-  let rand = Math.floor(Math.random() * ta.length);
-  console.log(rand);
-  let t = ta[rand];
-  console.log(t);
-  show_tag(t);
+  parse_hash();
+}
+
+function parse_hash(){
+  let hash = window.location.hash;
+  hash = hash.substring(1);
+  console.log(hash)
+  if(is_tag(hash)){
+    show_tag(hash);
+  }else if(is_image(hash)){
+    show_image(hash);
+  }else{
+    let ta = Object.keys(tags);
+    console.log(ta);
+    let rand = Math.floor(Math.random() * ta.length);
+    let t = ta[rand];
+    console.log(t);
+    show_tag(t);
+  }
+}
+
+function is_tag(hash){
+  return tags[hash];
+}
+
+function is_image(hash){
+  return media.find(img => img.hash == hash);
 }
 
-function show_tag(tag) {
+function show_tag(tag){
+  window.scroll(0, 0);
   let p = document.getElementById("media");
+  set_hash(tag);
+  set_title(tag);
   while(p.firstChild){
     p.removeChild(p.firstChild);
   }
@@ -54,6 +80,23 @@ function show_tag(tag) {
   });
 }
 
+function show_image(hash){
+  let p = document.getElementById("media");
+  while(p.firstChild){
+    p.removeChild(p.firstChild);
+  }
+  let img = media.find(img => img.hash == hash)
+  let i = image(img);
+  p.appendChild(i);
+  set_title(img.hash);
+}
+
+function set_title(tag){
+  let words = tag.split(" ");
+  let t = words.map((word) => word[0].toUpperCase() + word.substring(1)).join(" ");
+  document.getElementById("tag").innerHTML = t;
+}
+
 function create_tags(){
   let p = document.getElementById("tags");
   let ta = Object.keys(tags);
@@ -65,9 +108,26 @@ function create_tags(){
 }
 
 function image(image){
+  let w = document.createElement("div");
+  w.className = "img";
   let i = document.createElement("img");
   i.src = server + image.path;
-  return i;
+  i.onclick = (e) => set_hash(image.hash);
+  let u = document.createElement("ul");
+  image.tags.forEach(t => {
+    let l = document.createElement("li");
+    l.innerText = t;
+    l.className = "img-tag";
+    l.onclick = (e) => show_tag(t);
+    u.appendChild(l);
+  })
+  w.appendChild(i);
+  w.appendChild(u);
+  return w;
+}
+
+function set_hash(hash){
+  window.location.hash = hash;
 }
 
 function tag(tag){

diff --git a/www/index.html b/www/index.html
index 0fadac854ce79b30854ff30812e0651a7701fd45..2b504e8b0e8e64ee671367089e7c502d27df6d5b 100644 (file)
--- a/www/index.html
+++ b/www/index.html
@@ -7,18 +7,73 @@
     <script type="text/javascript" src="js/index.js"></script>
     <style>
       html,body, #content{
+        background-color: #010101;
         width: 100%;
         margin: 0;
+        color: #cccccc;
+        font-family: sans-serif;
+      }
+
+      ul{
+        margin: 0;
+        padding: 0;
+      }
+      li{
+        padding: 3px;
+        margin: 3px;
+        background-color: #333333;
+        display: inline-block;
+        cursor: pointer;
+      }
+
+      li.img-tag{
+        background-color: #666666;
+        margin: 0px;
+        margin-right: 3px;
+      }
+
+      #header{
+        height: 20px;
+        width: 100%;
+        padding: 7px;
+        padding-left: 10px;
+        background-color: #111111;
+        margin-bottom: 30px;
+      }
+
+      span#tag{
+        color: #22FF22;
+      }
+
+      #tags{
+        max-width: 901px;
+        margin: auto;
+        margin-bottom: 30px;
+      }
+      
+      #media{
+        max-width: 901px;
+        margin: auto;
+        display: grid;
+        grid-template-columns: repeat(1, 1fr);
+        gap: 30px;
+      }
+
+      .img{
+        padding: 7px;
+        background-color: #333333;
       }
 
       img{
         width: 100%;
-        max-width: 900px;
       }
     </style>
   </head>
   <body>
     <div id="content">
+      <div id="header">
+        <span>Media | </span><span id="tag"></span>
+      </div>
       <ul id="tags"></ul>
       <div id="media"></div>
     </div>

diff --git a/www/js/index.js b/www/js/index.js
index 03cf584e52a761971156643a83cefa498e483550..0bb7f06a277eb68a19861be9408bd0c9ffea9946 100644 (file)
--- a/www/js/index.js
+++ b/www/js/index.js
@@ -1,2 +1,2 @@
-(()=>{var i=null,a={},d=null;function h(){f()}function f(){fetch("config.json").then(e=>e.json()).then(e=>s(e))}function s(e){i=e.media_server,m()}function m(){fetch("metadata.json").then(e=>e.json()).then(e=>g(e))}function g(e){e.forEach(o=>o.datetime=new Date(o.datetime)),e.sort((o,c)=>o.datetime<c.datetime),e.forEach(o=>{o.tags.forEach(c=>{a[c]=a[c]?a[c]:[],a[c].push(o)})}),u();let t=Object.keys(a);console.log(t);let n=Math.floor(Math.random()*t.length);console.log(n);let l=t[n];console.log(l),r(l)}function r(e){let t=document.getElementById("media");for(;t.firstChild;)t.removeChild(t.firstChild);d=e,a[e].forEach(n=>{let l=p(n);t.appendChild(l)})}function u(){let e=document.getElementById("tags"),t=Object.keys(a);t.sort(),t.forEach(n=>{let l=E(n);e.appendChild(l)})}function p(e){let t=document.createElement("img");return t.src=i+e.path,t}function E(e){let t=document.createElement("li");return t.innerText=e,t.onclick=n=>r(e),t}h();})();
+(()=>{var h=null,i={},s=[],u=null;function f(){g()}function g(){fetch("config.json").then(e=>e.json()).then(e=>p(e))}function p(e){h=e.media_server,E()}function E(){fetch("metadata.json").then(e=>e.json()).then(e=>_(e))}function _(e){s=e,e.forEach(t=>t.datetime=new Date(t.datetime)),e.sort((t,n)=>t.datetime<n.datetime),e.forEach(t=>{t.tags.forEach(n=>{i[n]=i[n]?i[n]:[],i[n].push(t)})}),k(),w()}function w(){let e=window.location.hash;if(e=e.substring(1),console.log(e),C(e))c(e);else if(j(e))y(e);else{let t=Object.keys(i);console.log(t);let n=Math.floor(Math.random()*t.length),l=t[n];console.log(l),c(l)}}function C(e){return i[e]}function j(e){return s.find(t=>t.hash==e)}function c(e){window.scroll(0,0);let t=document.getElementById("media");for(m(e),d(e);t.firstChild;)t.removeChild(t.firstChild);u=e,i[e].forEach(n=>{let l=r(n);t.appendChild(l)})}function y(e){let t=document.getElementById("media");for(;t.firstChild;)t.removeChild(t.firstChild);let n=s.find(a=>a.hash==e),l=r(n);t.appendChild(l),d(n.hash)}function d(e){let n=e.split(" ").map(l=>l[0].toUpperCase()+l.substring(1)).join(" ");document.getElementById("tag").innerHTML=n}function k(){let e=document.getElementById("tags"),t=Object.keys(i);t.sort(),t.forEach(n=>{let l=v(n);e.appendChild(l)})}function r(e){let t=document.createElement("div");t.className="img";let n=document.createElement("img");n.src=h+e.path,n.onclick=a=>m(e.hash);let l=document.createElement("ul");return e.tags.forEach(a=>{let o=document.createElement("li");o.innerText=a,o.className="img-tag",o.onclick=b=>c(a),l.appendChild(o)}),t.appendChild(n),t.appendChild(l),t}function m(e){window.location.hash=e}function v(e){let t=document.createElement("li");return t.innerText=e,t.onclick=n=>c(e),t}f();})();
 //# sourceMappingURL=index.js.map

diff --git a/www/js/index.js.map b/www/js/index.js.map
index 701b3ce00204695db306105df3ce059596d4d576..4fbe5e8cc8e44aee68e8d2997b828869b1f8c2fa 100644 (file)
--- a/www/js/index.js.map
+++ b/www/js/index.js.map
@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.js"],
-  "sourcesContent": ["let server = null;\nlet tags = {};\nlet current_tag = null;\n\nfunction init(){\n  get_config();\n}\n\nfunction get_config(){\n  fetch(\"config.json\")\n    .then(result => result.json())\n    .then(data => handle_config(data))\n}\n\nfunction handle_config(data){\n  server = data.media_server;\n  get_metadata();\n}\n\nfunction get_metadata(){\n  fetch(\"metadata.json\")\n    .then(result => result.json())\n    .then(data => process_media(data))\n}\n\nfunction process_media(items){\n  items.forEach(i => i.datetime = new Date(i.datetime));\n  items.sort((a, b) => a.datetime < b.datetime);\n  items.forEach(i => {\n    i.tags.forEach(t => {\n      tags[t] = tags[t] ? tags[t] : [];\n      tags[t].push(i);\n    })\n  });\n  create_tags();\n  let ta = Object.keys(tags);\n  console.log(ta);\n  let rand = Math.floor(Math.random() * ta.length);\n  console.log(rand);\n  let t = ta[rand];\n  console.log(t);\n  show_tag(t);\n}\n\nfunction show_tag(tag) {\n  let p = document.getElementById(\"media\");\n  while(p.firstChild){\n    p.removeChild(p.firstChild);\n  }\n  current_tag = tag;\n  tags[tag].forEach(i => {\n    let img = image(i);\n    p.appendChild(img);\n  });\n}\n\nfunction create_tags(){\n  let p = document.getElementById(\"tags\");\n  let ta = Object.keys(tags);\n  ta.sort();\n  ta.forEach(t => {\n    let ta = tag(t);\n    p.appendChild(ta);\n  })\n}\n\nfunction image(image){\n  let i = document.createElement(\"img\");\n  i.src = server + image.path;\n  return i;\n}\n\nfunction tag(tag){\n  let t = document.createElement(\"li\");\n  t.innerText = tag;\n  t.onclick = (e) => show_tag(tag);\n  return t;\n}\n\ninit();\n"],
-  "mappings": "MAAA,GAAI,GAAS,KACT,EAAO,GACP,EAAc,KAElB,YAAe,CACb,IAGF,YAAqB,CACnB,MAAM,eACH,KAAK,GAAU,EAAO,QACtB,KAAK,GAAQ,EAAc,IAGhC,WAAuB,EAAK,CAC1B,EAAS,EAAK,aACd,IAGF,YAAuB,CACrB,MAAM,iBACH,KAAK,GAAU,EAAO,QACtB,KAAK,GAAQ,EAAc,IAGhC,WAAuB,EAAM,CAC3B,EAAM,QAAQ,GAAK,EAAE,SAAW,GAAI,MAAK,EAAE,WAC3C,EAAM,KAAK,CAAC,EAAG,IAAM,EAAE,SAAW,EAAE,UACpC,EAAM,QAAQ,GAAK,CACjB,EAAE,KAAK,QAAQ,GAAK,CAClB,EAAK,GAAK,EAAK,GAAK,EAAK,GAAK,GAC9B,EAAK,GAAG,KAAK,OAGjB,IACA,GAAI,GAAK,OAAO,KAAK,GACrB,QAAQ,IAAI,GACZ,GAAI,GAAO,KAAK,MAAM,KAAK,SAAW,EAAG,QACzC,QAAQ,IAAI,GACZ,GAAI,GAAI,EAAG,GACX,QAAQ,IAAI,GACZ,EAAS,GAGX,WAAkB,EAAK,CACrB,GAAI,GAAI,SAAS,eAAe,SAChC,KAAM,EAAE,YACN,EAAE,YAAY,EAAE,YAElB,EAAc,EACd,EAAK,GAAK,QAAQ,GAAK,CACrB,GAAI,GAAM,EAAM,GAChB,EAAE,YAAY,KAIlB,YAAsB,CACpB,GAAI,GAAI,SAAS,eAAe,QAC5B,EAAK,OAAO,KAAK,GACrB,EAAG,OACH,EAAG,QAAQ,GAAK,CACd,GAAI,GAAK,EAAI,GACb,EAAE,YAAY,KAIlB,WAAe,EAAM,CACnB,GAAI,GAAI,SAAS,cAAc,OAC/B,SAAE,IAAM,EAAS,EAAM,KAChB,EAGT,WAAa,EAAI,CACf,GAAI,GAAI,SAAS,cAAc,MAC/B,SAAE,UAAY,EACd,EAAE,QAAU,AAAC,GAAM,EAAS,GACrB,EAGT",
+  "sourcesContent": ["let server = null;\nlet tags = {};\nlet media = [];\nlet current_tag = null;\nlet current_hash = null;\n\nfunction init(){\n  get_config();\n}\n\nfunction get_config(){\n  fetch(\"config.json\")\n    .then(result => result.json())\n    .then(data => handle_config(data))\n}\n\nfunction handle_config(data){\n  server = data.media_server;\n  get_metadata();\n}\n\nfunction get_metadata(){\n  fetch(\"metadata.json\")\n    .then(result => result.json())\n    .then(data => process_media(data))\n}\n\nfunction process_media(items){\n  media = items;\n  items.forEach(i => i.datetime = new Date(i.datetime));\n  items.sort((a, b) => a.datetime < b.datetime);\n  items.forEach(i => {\n    i.tags.forEach(t => {\n      tags[t] = tags[t] ? tags[t] : [];\n      tags[t].push(i);\n    })\n  });\n  create_tags();\n  parse_hash();\n}\n\nfunction parse_hash(){\n  let hash = window.location.hash;\n  hash = hash.substring(1);\n  console.log(hash)\n  if(is_tag(hash)){\n    show_tag(hash);\n  }else if(is_image(hash)){\n    show_image(hash);\n  }else{\n    let ta = Object.keys(tags);\n    console.log(ta);\n    let rand = Math.floor(Math.random() * ta.length);\n    let t = ta[rand];\n    console.log(t);\n    show_tag(t);\n  }\n}\n\nfunction is_tag(hash){\n  return tags[hash];\n}\n\nfunction is_image(hash){\n  return media.find(img => img.hash == hash);\n}\n\nfunction show_tag(tag){\n  window.scroll(0, 0);\n  let p = document.getElementById(\"media\");\n  set_hash(tag);\n  set_title(tag);\n  while(p.firstChild){\n    p.removeChild(p.firstChild);\n  }\n  current_tag = tag;\n  tags[tag].forEach(i => {\n    let img = image(i);\n    p.appendChild(img);\n  });\n}\n\nfunction show_image(hash){\n  let p = document.getElementById(\"media\");\n  while(p.firstChild){\n    p.removeChild(p.firstChild);\n  }\n  let img = media.find(img => img.hash == hash)\n  let i = image(img);\n  p.appendChild(i);\n  set_title(img.hash);\n}\n\nfunction set_title(tag){\n  let words = tag.split(\" \");\n  let t = words.map((word) => word[0].toUpperCase() + word.substring(1)).join(\" \");\n  document.getElementById(\"tag\").innerHTML = t;\n}\n\nfunction create_tags(){\n  let p = document.getElementById(\"tags\");\n  let ta = Object.keys(tags);\n  ta.sort();\n  ta.forEach(t => {\n    let ta = tag(t);\n    p.appendChild(ta);\n  })\n}\n\nfunction image(image){\n  let w = document.createElement(\"div\");\n  w.className = \"img\";\n  let i = document.createElement(\"img\");\n  i.src = server + image.path;\n  i.onclick = (e) => set_hash(image.hash);\n  let u = document.createElement(\"ul\");\n  image.tags.forEach(t => {\n    let l = document.createElement(\"li\");\n    l.innerText = t;\n    l.className = \"img-tag\";\n    l.onclick = (e) => show_tag(t);\n    u.appendChild(l);\n  })\n  w.appendChild(i);\n  w.appendChild(u);\n  return w;\n}\n\nfunction set_hash(hash){\n  window.location.hash = hash;\n}\n\nfunction tag(tag){\n  let t = document.createElement(\"li\");\n  t.innerText = tag;\n  t.onclick = (e) => show_tag(tag);\n  return t;\n}\n\ninit();\n"],
+  "mappings": "MAAA,GAAI,GAAS,KACT,EAAO,GACP,EAAQ,GACR,EAAc,KAGlB,YAAe,CACb,IAGF,YAAqB,CACnB,MAAM,eACH,KAAK,GAAU,EAAO,QACtB,KAAK,GAAQ,EAAc,IAGhC,WAAuB,EAAK,CAC1B,EAAS,EAAK,aACd,IAGF,YAAuB,CACrB,MAAM,iBACH,KAAK,GAAU,EAAO,QACtB,KAAK,GAAQ,EAAc,IAGhC,WAAuB,EAAM,CAC3B,EAAQ,EACR,EAAM,QAAQ,GAAK,EAAE,SAAW,GAAI,MAAK,EAAE,WAC3C,EAAM,KAAK,CAAC,EAAG,IAAM,EAAE,SAAW,EAAE,UACpC,EAAM,QAAQ,GAAK,CACjB,EAAE,KAAK,QAAQ,GAAK,CAClB,EAAK,GAAK,EAAK,GAAK,EAAK,GAAK,GAC9B,EAAK,GAAG,KAAK,OAGjB,IACA,IAGF,YAAqB,CACnB,GAAI,GAAO,OAAO,SAAS,KAG3B,GAFA,EAAO,EAAK,UAAU,GACtB,QAAQ,IAAI,GACT,EAAO,GACR,EAAS,WACF,EAAS,GAChB,EAAW,OACR,CACH,GAAI,GAAK,OAAO,KAAK,GACrB,QAAQ,IAAI,GACZ,GAAI,GAAO,KAAK,MAAM,KAAK,SAAW,EAAG,QACrC,EAAI,EAAG,GACX,QAAQ,IAAI,GACZ,EAAS,IAIb,WAAgB,EAAK,CACnB,MAAO,GAAK,GAGd,WAAkB,EAAK,CACrB,MAAO,GAAM,KAAK,GAAO,EAAI,MAAQ,GAGvC,WAAkB,EAAI,CACpB,OAAO,OAAO,EAAG,GACjB,GAAI,GAAI,SAAS,eAAe,SAGhC,IAFA,EAAS,GACT,EAAU,GACJ,EAAE,YACN,EAAE,YAAY,EAAE,YAElB,EAAc,EACd,EAAK,GAAK,QAAQ,GAAK,CACrB,GAAI,GAAM,EAAM,GAChB,EAAE,YAAY,KAIlB,WAAoB,EAAK,CACvB,GAAI,GAAI,SAAS,eAAe,SAChC,KAAM,EAAE,YACN,EAAE,YAAY,EAAE,YAElB,GAAI,GAAM,EAAM,KAAK,GAAO,EAAI,MAAQ,GACpC,EAAI,EAAM,GACd,EAAE,YAAY,GACd,EAAU,EAAI,MAGhB,WAAmB,EAAI,CAErB,GAAI,GAAI,AADI,EAAI,MAAM,KACR,IAAI,AAAC,GAAS,EAAK,GAAG,cAAgB,EAAK,UAAU,IAAI,KAAK,KAC5E,SAAS,eAAe,OAAO,UAAY,EAG7C,YAAsB,CACpB,GAAI,GAAI,SAAS,eAAe,QAC5B,EAAK,OAAO,KAAK,GACrB,EAAG,OACH,EAAG,QAAQ,GAAK,CACd,GAAI,GAAK,EAAI,GACb,EAAE,YAAY,KAIlB,WAAe,EAAM,CACnB,GAAI,GAAI,SAAS,cAAc,OAC/B,EAAE,UAAY,MACd,GAAI,GAAI,SAAS,cAAc,OAC/B,EAAE,IAAM,EAAS,EAAM,KACvB,EAAE,QAAU,AAAC,GAAM,EAAS,EAAM,MAClC,GAAI,GAAI,SAAS,cAAc,MAC/B,SAAM,KAAK,QAAQ,GAAK,CACtB,GAAI,GAAI,SAAS,cAAc,MAC/B,EAAE,UAAY,EACd,EAAE,UAAY,UACd,EAAE,QAAU,AAAC,GAAM,EAAS,GAC5B,EAAE,YAAY,KAEhB,EAAE,YAAY,GACd,EAAE,YAAY,GACP,EAGT,WAAkB,EAAK,CACrB,OAAO,SAAS,KAAO,EAGzB,WAAa,EAAI,CACf,GAAI,GAAI,SAAS,cAAc,MAC/B,SAAE,UAAY,EACd,EAAE,QAAU,AAAC,GAAM,EAAS,GACrB,EAGT",
   "names": []
 }