tangent/memex
1
0
Fork 0
mirror of https://github.com/TangentFoxy/memex.git synced 2024-11-22 04:54:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add basic theme support.

Browse Source
This commit is contained in:
kor 2018-09-14 14:57:15 +12:00
parent 9e52787c31
commit ac6c40bc45
6 changed files with 232 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
docs/asset/style.css
View File

@ -1,22 +1,25 @@
/* VARIABLES */
:root {
/* COLOR */
--color-main-bg-i: #ddd; /*idle*/
--color-main-bg-e: #ddd; /*enabled*/
--color-main-bg-i: var(--background); /*#ddd;*/ /*idle*/
--color-main-bg-e: var(--background); /*#ddd;*/ /*enabled*/
--color-menu-bg-i: #000; /*idle*/
--color-menu-bg-e: #000; /*enabled*/
--color-menu-item-i: #333; /*idle*/
--color-menu-item-e: #999; /*enabled*/
--color-menu-item-a: #ddd; /*ascent*/
--color-menu-bg-i: var(--b_low); /*#000;*/ /*idle*/
--color-menu-bg-e: var(--b_low); /*#000;*/ /*enabled*/
--color-menu-item-i: var(--b_med); /*#333;*/ /*idle*/
--color-menu-item-e: var(--b_med); /*#999;*/ /*enabled*/
--color-menu-item-a: var(--b_inv); /*#ddd;*/ /*ascent*/
--alpha-i: 0.6;
--alpha-e: 0.8;
--alpha-a: 1.0;
--color-content-bg-i: #ccc; /*idle*/
--color-content-bg-e: #bbb; /*enabled*/
--color-content-item-s: #bbb; /*sub*/
--color-content-item-i: #999; /*idle*/
--color-content-item-e: #666; /*enabled*/
--color-content-item-t: #000; /*title*/
--color-content-item-a: #000; /*ascent*/
--color-content-bg-i: var(--b_low); /*#ccc;*/ /*idle*/
--color-content-bg-e: var(--b_low); /*#bbb;*/ /*enabled*/
--color-content-item-s: var(--f_high); /*#bbb;*/ /*sub*/
--color-content-item-i: var(--f_high); /*#999;*/ /*idle*/
--color-content-item-e: var(--f_high); /*#666;*/ /*enabled*/
--color-content-item-t: var(--f_high); /*#000;*/ /*title*/
--color-content-item-a: var(--b_inv); /*#000;*/ /*ascent*/
--color-content-image-s: rgba(255, 255, 255, .1); /*sub*/
--color-content-image-i: rgba(255, 255, 255, .3); /*idle*/
--color-content-image-e: rgba(255, 255, 255, .5); /*enabled*/
@ -85,12 +88,15 @@ body {
background: var(--color-menu-bg-e);
}
.menu a {
opacity: var(--alpha-i);
color: var(--color-menu-item-i);
}
.menu:hover a {
opacity: var(--alpha-e);
color: var(--color-menu-item-e);
}
.menu:hover a:hover {
.menu a:hover {
opacity: var(--alpha-a);
color: var(--color-menu-item-a);
}
.menu-spacer {
@ -131,6 +137,7 @@ body {
display: table;
}
.menu-tag-container i {
opacity: var(--alpha-i);
padding-bottom: calc(var(--menu-item-vert-sep) / 2);
padding-top: calc(var(--menu-item-vert-sep) / 2);
font-size: var(--type-icon-size);
@ -141,8 +148,19 @@ body {
float: left;
}
.menu:hover .menu-tag-container i {
opacity: var(--alpha-e);
color: var(--color-menu-item-e);
}
.menu-tag-container i:hover {
opacity: var(--alpha-a);
}
.menu .menu-tag-container a {
}
.menu:hover .menu-tag-container a {
}
.menu .menu-tag-container a:hover {
opacity: var(--alpha-a);
}
.menu-tag {
padding-bottom: calc(var(--menu-tag-sep) / 2);
padding-top: calc(var(--menu-tag-sep) / 2);
@ -324,7 +342,7 @@ body {
}
/* GRID ITEM */
.grid-item, .grid-item--width2 {
.grid-item, .grid-item--width2 {
border-radius: var(--size-item-corner);
background: var(--color-content-bg-i);
margin-bottom: var(--size-gutter);
@ -333,6 +351,10 @@ body {
float: left;
padding-bottom: var(--size-gutter);
position: relative;
opacity: var(--alpha-i);
}
.grid-item:hover, .grid-item--width2:hover {
opacity: var(--alpha-a);
}
@media screen and (min-width: 886px) {
.grid-item--width2 {
@ -414,13 +436,17 @@ body {
display: initial;
text-shadow: 0 0 3em #000;
}
.grid-item .link .title {
.grid-item .title {
opacity: var(--alpha-e);
color: var(--color-content-item-t);
font-size: var(--size-font-title);
text-decoration: none;
float: left;
clear: both;
}
.grid-item:hover .title {
opacity: var(--alpha-a);
}
.grid-item-image .title {
display: none;
}
@ -452,6 +478,7 @@ body {
/* TYPE */
.grid-item .type {
opacity: var(--alpha-i);
width: calc(var(--type-icon-size)*2 + var(--size-gutter));
color: var(--color-content-item-s);
padding-bottom: var(--size-gutter);
@ -475,29 +502,55 @@ body {
color: var(--color-content-image-a);
}
.grid-item:hover .type {
opacity: var(--alpha-e);
color: var(--color-content-item-i);
}
.grid-item:hover .type:hover {
opacity: var(--alpha-a);
color: var(--color-content-item-a);
}
.grid-item .link-title {
opacity: var(--alpha-i);
}
.grid-item .fas {
opacity: var(--alpha-i);
}
.grid-item:hover .link-title {
opacity: var(--alpha-e);
}
.grid-item:hover a:hover .link-title {
opacity: var(--alpha-a);
}
.grid-item:hover a:hover .fas {
opacity: var(--alpha-a);
}
.grid-item:hover .fas {
opacity: var(--alpha-e);
}
/* LINK, NOTE, QUOTE, TERM, TAGS */
.note, .quote, .term, .tags, .auth, .prog {
opacity: var(--alpha-i);
padding-top: var(--size-item-elem-padding);
color: var(--color-content-item-i);
font-size: var(--size-font-body);
float: left;
clear: both;
}
.grid-item:hover .link,
.grid-item:hover .note,
.grid-item:hover .quote,
.grid-item:hover .term,
.grid-item:hover .tags,
.grid-item:hover .auth,
.grid-item:hover .prog {
opacity: var(--alpha-e);
color: var(--color-content-item-e);
}
.grid-item:hover .tags:hover {
opacity: var(--alpha-a);
}
.grid-item-image .grid-item-lower-content .link,
.grid-item-image .grid-item-lower-content .note,
.grid-item-image .grid-item-lower-content .quote,

2
docs/index.html
View File

@ -4,12 +4,14 @@
<meta charset="utf-8">
<title>memex</title>
<link rel="stylesheet" href="asset/style.css">
<link rel="stylesheet" href="asset/theme.css"/>
<link rel="stylesheet" href="asset/fontawesome/css/all.css">
<script src="logic/lib/imagesloaded.js"></script>
<script src="logic/lib/masonry.js"></script>
<script src="logic/lib/runic.js"></script>
<script src="logic/lib/indental.js"></script>
<script src="logic/lib/theme.js"></script>
<script src="logic/wrap.js"></script>
<script src="logic/view.js"></script>

38
docs/logic/add.js
View File

@ -89,6 +89,12 @@ if (window.showAdd != undefined && window.showAdd)
this.overlay.innerHTML += content;
document.getElementById("escape").onclick = function()
{
console.log('escape onclick');
main.add.close();
}
this.display = document.getElementById("display");
document.getElementById("enter").addEventListener('click',
@ -228,6 +234,8 @@ if (window.showAdd != undefined && window.showAdd)
this.show = function()
{
console.log('add.show');
this.setOverlay(true);
var date = new Date();
@ -244,18 +252,29 @@ if (window.showAdd != undefined && window.showAdd)
}, 100);
}
this.close = function()
{
console.log('close. prev: ' + main.queryPrev);
main.load(main.queryPrev);
this.grid.style.display = "block";
this.setOverlay(false);
}
this.setOverlay = function(value)
{
console.log('add.setOverlay ' + value);
if (value && !this.enabledOverlay)
{
overlay.style.opacity = '1';
overlay.style.zIndex = '1000';
this.enabledOverlay = true;
setTimeout(function()
{
this.grid.innerHTML = '';
this.grid.style.height = 0;
}, 200);
// setTimeout(function()
// {
// this.grid.innerHTML = '';
// this.grid.style.height = 0;
// }, 200);
this.grid.style.display = "none";
}
else if (!value && this.enabledOverlay)
{
@ -269,12 +288,16 @@ if (window.showAdd != undefined && window.showAdd)
}
}
String.prototype.toProperCase = function () {
String.prototype.toProperCase = function ()
{
return this.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
};
document.onkeydown = function(evt)
{
console.log('onkeydown');
console.log(evt);
evt = evt || window.event;
if (!evt.ctrlKey)
{
@ -295,7 +318,8 @@ if (window.showAdd != undefined && window.showAdd)
{
if (main.queryCur == 'add')
{
main.load(main.queryPrev);
console.log('did it');
this.close();
}
}
else if (isA && main.queryCur != 'add')

114
docs/logic/lib/theme.js vendored Normal file
View File

@ -0,0 +1,114 @@
'use strict';
function Theme()
{
let theme = this;
this.el = document.createElement("style");
this.el.type = 'text/css';
this.callback = null;
this.collection = {
noir: {meta:{}, data: { background: "#222", f_high: "#fff", f_med: "#777", f_low: "#444", f_inv: "#fff", b_high: "#000", b_med: "#aaa", b_low: "#000", b_inv: "#000" }},
pale: {meta:{}, data: { background: "#e1e1e1", f_high: "#000", f_med: "#777", f_low: "#aaa", f_inv: "#000", b_high: "#000", b_med: "#aaa", b_low: "#ccc", b_inv: "#fff" }}
}
this.active = this.collection.noir;
this.install = function(host = document.body,callback)
{
host.appendChild(this.el)
this.callback = callback;
}
this.start = function()
{
this.load(localStorage.theme ? localStorage.theme : this.collection.noir, this.collection.noir);
}
this.load = function(t, fall_back = this.collection.noir)
{
let theme = is_json(t) ? JSON.parse(t).data : t.data;
if(!theme || !theme.background){
if(fall_back) {
theme = fall_back.data;
} else {
return;
}
}
let css = `
:root {
--background: ${theme.background};
--f_high: ${theme.f_high};
--f_med: ${theme.f_med};
--f_low: ${theme.f_low};
--f_inv: ${theme.f_inv};
--b_high: ${theme.b_high};
--b_med: ${theme.b_med};
--b_low: ${theme.b_low};
--b_inv: ${theme.b_inv};
}`;
this.active = theme;
this.el.innerHTML = css;
localStorage.setItem("theme", JSON.stringify({data: theme}));
if(this.callback){
this.callback();
}
}
this.reset = function()
{
this.load(this.collection.noir);
}
// Defaults
this.pale = function()
{
this.load(this.collection.pale)
}
this.noir = function()
{
this.load(this.collection.noir)
}
this.invert = function()
{
this.load(this.active.background == this.collection.noir.data.background ? this.collection.pale : this.collection.noir)
}
// Drag
this.drag_enter = function(e)
{
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
}
this.drag = function(e)
{
e.preventDefault();
e.stopPropagation();
let file = e.dataTransfer.files[0];
if(!file.name || !file.name.indexOf(".thm") < 0){ console.log("Theme","Not a theme"); return; }
let reader = new FileReader();
reader.onload = function(e){
theme.load(e.target.result);
};
reader.readAsText(file);
}
window.addEventListener('dragover',this.drag_enter);
window.addEventListener('drop', this.drag);
function is_json(text){ try{ JSON.parse(text); return true; } catch (error){ return false; } }
}

19
docs/logic/main.js
View File

@ -4,13 +4,17 @@ function Main()
this.view = null;
this.add = null;
this.write = null;
this.queryPrev = '';
this.queryCur = '';
this.queryPrev = '';
this.queryPrevAdd = '';
this.theme = new Theme();
var parent = this;
const FILELOCATION = 'content/data.ndtl';
this.install = function()
{
this.theme.install();
var oReq = new XMLHttpRequest();
oReq.open('GET', FILELOCATION);
oReq.overrideMimeType("text/plain");
@ -29,11 +33,11 @@ function Main()
{
this.add = new Add();
this.add.install();
var escape = document.getElementById("escape");
escape.onclick = function()
{
main.load(main.queryPrev);
}
// var escape = document.getElementById("escape");
// escape.onclick = function()
// {
// main.add.close();
// }
}
this.start();
@ -41,12 +45,15 @@ function Main()
this.start = function()
{
this.theme.start();
this.load(window.document.location.hash);
this.view.stats(this.db.stats());
}
this.load = function(target)
{
console.log('main.load: ' + target)
document.activeElement.blur();
if (this.queryCur != 'add')
{

1
docs/logic/view.js
View File

@ -50,6 +50,7 @@ function View()
this.display = function(db)
{
console.log('display ' + db)
if (window.showAdd != undefined && window.showAdd)
{