commit e605ea9462bb9810623bf7a07182e9aa2b9f544b
parent 3d307ce838948492cc1e4e10e3bc5a71d73e3d85
Author: finwo <finwo@pm.me>
Date: Thu, 18 May 2017 15:05:23 +0200
Some progress on the management interface
Diffstat:
5 files changed, 64 insertions(+), 26 deletions(-)
diff --git a/docs/css/base.css b/docs/css/base.css
@@ -78,5 +78,5 @@ nav a:hover {
display: none;
}
.view:target {
- display: initial;
+ display: block;
}
diff --git a/docs/css/collections.css b/docs/css/collections.css
@@ -1,19 +0,0 @@
-ul.collections {
- list-style-type : none;
- padding : 0;
-}
-ul.collections li a {
- display : inline-block;
- padding : 0.5em;
- width : 100%;
-}
-ul.collections li a:hover {
- background-color: rgba(0,0,0,0.1);
-}
-ul.collections li a.active {
- background: #5AF;
- color : #FFF;
-}
-ul.collections li + li {
- border-top: 1px solid rgba(0,0,0,0.2);
-}
diff --git a/docs/css/lists.css b/docs/css/lists.css
@@ -0,0 +1,19 @@
+ul.simple {
+ list-style-type : none;
+ padding : 0;
+}
+ul.simple li a {
+ display : inline-block;
+ padding : 0.5em;
+ width : 100%;
+}
+ul.simple li a:hover {
+ background-color: rgba(0,0,0,0.1);
+}
+ul.simple li a.active {
+ background: #5AF;
+ color : #FFF;
+}
+ul.simple li + li {
+ border-top: 1px solid rgba(0,0,0,0.2);
+}
diff --git a/docs/index.html b/docs/index.html
@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/css/base.css" />
<link rel="stylesheet" href="/css/grid.css" />
- <link rel="stylesheet" href="/css/collections.css" />
+ <link rel="stylesheet" href="/css/lists.css" />
</head>
<body>
<nav class="shadow">
@@ -16,16 +16,31 @@
<div class="container">
<div>
<div class="col-1-5 padded">
- <ul class="shadow collections" data-source="/api/collections">
- <li><a href="#{name}">{name}</a></li>
+ <ul class="shadow simple" data-source="/api/collections">
+ <li><a href="#{name}" onclick="activate(this);">{name}</a></li>
</ul>
</div>
- <div class="col-4-5 padded">
- WIP
+ <div class="col-4-5 padded" data-source="/api/collections">
+ <ul id="{name}" class="view shadow simple" data-source="/api/data/{name}">
+ <li class="padded">ITEM</li>
+ </ul>
</div>
</div>
</div>
<script src="/js/require.js"></script>
<script src="/js/data-source.js"></script>
+
+ <script>
+ function activate( el ) {
+ document.querySelectorAll('.active').forEach(function( entity ) {
+ entity.className = entity.className
+ .split(' ')
+ .filter(function(className) {return !!className.length;})
+ .filter(function(className) {return className != 'active'})
+ .join(' ');
+ });
+ el.className += ' active';
+ }
+ </script>
</body>
</html>
diff --git a/docs/js/data-source.js b/docs/js/data-source.js
@@ -1,4 +1,18 @@
require('data-source', ['ajax', 'domchange'], function(ajax, onDomChange) {
+ function listen( element, event, handler ) {
+ if ( typeof element == 'string' ) {
+ handler = event;
+ event = element;
+ element = null;
+ }
+ if ( !element && event == 'change' ) {
+ onDomChange(handler,10);
+ return;
+ }
+ var add = element.addEventListener || element.attachEvent;
+ add = add.bind(element);
+ add(event,handler);
+ }
function render( template, data ) {
if ( Array.isArray(data) ) {
return data.map(render.bind(null,template)).join('');
@@ -10,8 +24,15 @@ require('data-source', ['ajax', 'domchange'], function(ajax, onDomChange) {
document.querySelectorAll('[data-source]').forEach(process);
return;
}
+ if(!element.getAttribute) {
+ document.querySelectorAll('[data-source]').forEach(process);
+ return;
+ }
var template = element.innerHTML,
url = element.getAttribute('data-source');
+ if ( url.indexOf('{') >= 0 ) {
+ return;
+ }
element.innerHTML = '';
element.removeAttribute('data-source');
ajax(url)
@@ -19,6 +40,8 @@ require('data-source', ['ajax', 'domchange'], function(ajax, onDomChange) {
element.innerHTML = render(template,data);
})
}
- onDomChange(process,10);
+
+ listen('change',process);
+ listen(document.body,'click',process);
process();
});
