logo

Grimgrains

Unnamed repository; edit this file 'description' to name the repository.
commit: e0bc870d71b36b02800e20c70f81efc0a2bfc2f2
parent 61eb36c4daf25816ba64b5834f8ecb7d5db98220
Author: Devine Lu Linvega <aliceffekt@gmail.com>
Date:   Mon,  5 Mar 2018 15:54:04 +1300

Implemented Dom nodes

Diffstat:

Mindex.html11+++++++++++
Mlinks/riven.main.css2+-
Mriven.html1+
Mscripts/graph.js36+++++++++++++++++-------------------
Mscripts/lib/riven.graph.js18------------------
Mscripts/lib/riven.js17+++++++++++++++++
Mscripts/nodes/database.js2+-
Mscripts/nodes/dom.js21+++++++++++++--------
Mscripts/nodes/template.js15++++++++++++++-
9 files changed, 75 insertions(+), 48 deletions(-)

diff --git a/index.html b/index.html @@ -4,8 +4,19 @@ <meta charset="utf-8"> <script src="scripts/lib/riven.js"></script> <script src="scripts/graph.js"></script> + <script src="scripts/nodes/query.js"></script> <script src="scripts/nodes/router.js"></script> + <script src="scripts/nodes/database.js"></script> + <script src="scripts/nodes/dictionary.js"></script> + <script src="scripts/nodes/template.js"></script> + <script src="scripts/nodes/dom.js"></script> + <script src="scripts/nodes/element.js"></script> + + <script src="scripts/dictionary/ingredients.js"></script> + <script src="scripts/dictionary/recipes.js"></script> + <script src="scripts/dictionary/pages.js"></script> + <link rel="stylesheet" type="text/css" href="links/reset.css"/> <link rel="stylesheet" type="text/css" href="links/main.css"/> <title>Riven</title> diff --git a/links/riven.main.css b/links/riven.main.css @@ -1,5 +1,5 @@ body { padding:20px; background-image: url(../media/assets/grid.svg); background-color:#111; font-family: 'input_mono_medium'; font-size:9px; background-size:20px 20px;} -svg { padding:50px 10px; width:calc(100vw - 80px); height:calc(100vh - 80px); position: fixed; left:0px; top:0px; } +svg { padding:50px 10px; width:100%; height:100%; position: fixed; left:0px; top:0px; } svg.magnet { transition: all 250ms } svg g.node { fill:#777; } svg g.node text { text-anchor: middle } diff --git a/riven.html b/riven.html @@ -5,6 +5,7 @@ <script src="scripts/lib/riven.js"></script> <script src="scripts/lib/riven.graph.js"></script> <script src="scripts/graph.js"></script> + <script src="scripts/nodes/query.js"></script> <script src="scripts/nodes/router.js"></script> <script src="scripts/nodes/database.js"></script> diff --git a/scripts/graph.js b/scripts/graph.js @@ -1,19 +1,7 @@ -function PrintNode(id,rect) -{ - Node.call(this,id,rect); - this.glyph = NODE_GLYPHS.render - - this.receive = function(q) - { - this.label = q; - } -} - function graph() { Ø("query").cast({x:2,y:4},QueryNode) - Ø("print").cast({x:32,y:4},PrintNode) Ø("model").mesh({x:6,y:0},[ Ø("router").cast({x:5,y:2},RouterNode), @@ -24,20 +12,30 @@ function graph() ]) Ø("view").mesh({x:18,y:0},[ - Ø("dom").cast({x:5,y:2},DomNode), - Ø("header").cast({x:2,y:8},ElementNode), - Ø("body").cast({x:5,y:8},ElementNode), - Ø("footer").cast({x:8,y:8},ElementNode), + Ø("template").cast({x:2,y:2},TemplateNode), + Ø("main").cast({x:8,y:2},DomNode), + + Ø("header").cast({x:14,y:2},DomNode), + Ø("logo").cast({x:20,y:2},DomNode), + Ø("search").cast({x:20,y:6},DomNode), + Ø("menu").cast({x:20,y:10},DomNode), + + Ø("body").cast({x:14,y:10},DomNode), + Ø("related").cast({x:20,y:14},DomNode), + + Ø("footer").cast({x:14,y:6},DomNode), ]) Ø("router").syphon("database") Ø("database").syphon(["recipes","ingredients","pages"]) - Ø("dom").syphon(["header","body","footer"]) - Ø("dom").connect("print") + Ø("main").connect(["header","body","footer"]) + Ø("body").connect(["related"]) + Ø("header").connect(["logo","search","menu"]) Ø("query").connect("router") - Ø("router").connect("dom") + Ø("router").connect("template") + Ø("template").connect("main") Ø("query").bang() } diff --git a/scripts/lib/riven.graph.js b/scripts/lib/riven.graph.js @@ -213,20 +213,3 @@ function Riven_Graph() this.cursor.install(this); } - -var NODE_GLYPHS = { - default: "M150,60 L150,60 L60,150 L150,240 L240,150 Z", - router:"M60,120 L60,120 L150,120 L240,60 M60,150 L60,150 L240,150 M60,180 L60,180 L150,180 L240,240", - parser:"M60,60 L60,60 L240,60 M120,120 A30,30 0 0,1 150,150 M150,150 A30,30 0 0,0 180,180 M180,180 L180,180 L240,180 M120,120 L120,120 L60,120 M60,240 L60,240 L240,240 M240,120 L240,120 L180,120 M60,180 L60,180 L120,180", - entry:"M60,150 L60,150 L240,150 L240,150 L150,240 M150,60 L150,60 L240,150", - bang:"M150,60 L150,60 L150,180 M150,240 L150,240 L150,240", - value:"M60,60 L60,60 L240,60 L240,240 L60,240 Z M60,150 L60,150 L240,150", - equal:"M60,60 L60,60 L240,60 M60,120 L60,120 L240,120 M60,180 L60,180 L240,180 M60,240 L60,240 L240,240", - render:"M60,60 L60,60 L240,60 L240,240 L60,240 Z M240,150 L240,150 L150,150 L150,240", - database:"M60,60 L60,60 L240,60 L240,240 L60,240 Z M120,120 L120,120 L180,120 M120,180 L120,180 L180,180 M120,150 L120,150 L180,150", - cache:"M60,60 L60,60 L240,60 L240,240 L60,240 Z", - builder:"M60,60 L60,60 L150,120 L240,120 M60,150 L60,150 L240,150 M60,240 L60,240 L150,180 L240,180", - selector:"M90,60 L90,60 L60,60 L60,90 M60,210 L60,210 L60,240 L90,240 M210,240 L210,240 L240,240 L240,210 M240,90 L240,90 L240,60 L210,60", - dom: "M150,60 L150,60 L60,150 L150,240 L240,150 Z", - element: "M150,60 L150,60 L240,150 L150,240 L60,150 Z M120,150 L120,150 L180,150 M150,120 L150,120 L150,180", -}- \ No newline at end of file diff --git a/scripts/lib/riven.js b/scripts/lib/riven.js @@ -205,3 +205,19 @@ function Node(id,rect={x:0,y:0,w:2,h:2}) var PORT_TYPES = {default:"default",input:"input",output:"output",request:"request",answer:"answer"} var ROUTE_TYPES = {default:"default",request:"request"} +var NODE_GLYPHS = { + default: "M150,60 L150,60 L60,150 L150,240 L240,150 Z", + router:"M60,120 L60,120 L150,120 L240,60 M60,150 L60,150 L240,150 M60,180 L60,180 L150,180 L240,240", + parser:"M60,60 L60,60 L240,60 M120,120 A30,30 0 0,1 150,150 M150,150 A30,30 0 0,0 180,180 M180,180 L180,180 L240,180 M120,120 L120,120 L60,120 M60,240 L60,240 L240,240 M240,120 L240,120 L180,120 M60,180 L60,180 L120,180", + entry:"M60,150 L60,150 L240,150 L240,150 L150,240 M150,60 L150,60 L240,150", + bang:"M150,60 L150,60 L150,180 M150,240 L150,240 L150,240", + value:"M60,60 L60,60 L240,60 L240,240 L60,240 Z M60,150 L60,150 L240,150", + equal:"M60,60 L60,60 L240,60 M60,120 L60,120 L240,120 M60,180 L60,180 L240,180 M60,240 L60,240 L240,240", + render:"M60,60 L60,60 L240,60 L240,240 L60,240 Z M240,150 L240,150 L150,150 L150,240", + database:"M60,60 L60,60 L240,60 L240,240 L60,240 Z M120,120 L120,120 L180,120 M120,180 L120,180 L180,180 M120,150 L120,150 L180,150", + cache:"M60,60 L60,60 L240,60 L240,240 L60,240 Z", + builder:"M60,60 L60,60 L150,120 L240,120 M60,150 L60,150 L240,150 M60,240 L60,240 L150,180 L240,180", + selector:"M90,60 L90,60 L60,60 L60,90 M60,210 L60,210 L60,240 L90,240 M210,240 L210,240 L240,240 L240,210 M240,90 L240,90 L240,60 L210,60", + dom: "M150,60 L150,60 L60,150 L150,240 L240,150 Z", + element: "M150,60 L150,60 L240,150 L150,240 L60,150 Z M120,150 L120,150 L180,150 M150,120 L150,120 L150,180", +}+ \ No newline at end of file diff --git a/scripts/nodes/database.js b/scripts/nodes/database.js @@ -2,7 +2,7 @@ function DatabaseNode(id,rect) { Node.call(this,id,rect); - this.glyph = NODE_GLYPHS.cache + this.glyph = NODE_GLYPHS ? NODE_GLYPHS.cache : "" this.cache = null; diff --git a/scripts/nodes/dom.js b/scripts/nodes/dom.js @@ -5,29 +5,34 @@ function DomNode(id,rect) this.glyph = NODE_GLYPHS.dom this.el = document.createElement("yu") + this.el.id = this.id this.is_installed = false; - this.receive = function(page) + this.receive = function(content) { if(!this.is_installed){ this.install(this.request()); } - - this.update(page); + + if(content[this.id]){ + this.update(content[this.id]); + this.send(content[this.id]) + } } this.install = function(elements) { + this.is_installed = true; for(id in elements){ - var el = elements[id]; - this.el.appendChild(el) + this.el.appendChild(elements[id]) } document.body.appendChild(this.el) - this.is_installed = true; } - this.update = function() + this.update = function(content) { - + if(typeof content == "string"){ + this.el.innerHTML = content; + } } } \ No newline at end of file diff --git a/scripts/nodes/template.js b/scripts/nodes/template.js @@ -2,5 +2,18 @@ function TemplateNode(id,rect) { Node.call(this,id,rect); - this.glyph = NODE_GLYPHS.builder + this.glyph = NODE_GLYPHS.parser + + this.cache = null; + + this.receive = function(q) + { + var dom = { + header:{ + search:"test" + }, + footer:"hello" + } + this.send({main:dom}) + } } \ No newline at end of file