Pipeos UI / Loredana Cirstea

Loredana Cirstea

https://github.com/loredanacirstea https://twitter.com/lorecirstea

Workspace

Published

Edited

Dec 24, 2019

Importers

url = FileAttachment("graph.png").url()

$ = require("jquery")

setPipeosMenu(document.getElementById('PipelineMenu'))

// Inspired by https://github.com/morgan3d/misc/blob/master/jsmenu

setPipeosMenu = (notebookdom) => {

var bgcolor = '#FFF'

var toc = []

if (document.body.classList.contains("observablehq--dark")) {bgcolor = '#333';}

let sections =d3.selectAll("h2").on("click", function() {goto("menubar")}).selectAll(function(a,b) {

toc.push(`<a href="#" onclick="goto('${this.id}')"><i class="material-icons icon">filter_${b+1}</i> `+shorten(this.innerHTML, 30)+"</a>")

});

//.each(x=>console.log(x))

console.log(sections)

const innerHTML = `

<div>

<span class="menuLabel"><i class="material-icons icon">widgets</i> Demos</span>

<a href="https://observablehq.com/@loredanacirstea/pipeos-web3-env" target="blank"><i class="material-icons icon">filter_1</i>Pipeos Web3 Env</a>

</div>

<span class="menuLabel"><i class="material-icons icon">settings</i> Tools</span>

<a href="https://github.com/pipeos-one/pipeline/tree/development/packages/packages/pipejs" target="blank"><i class="material-icons icon">settings</i>pipejs</a>

<a href="https://github.com/pipeos-one/pipeline/tree/development/packages/packages/pipecanvas" target="blank"><i class="material-icons icon">settings</i>pipecanvas</a>

<a href="https://github.com/pipeos-one/pipeline/tree/development/packages/packages/pipesource" target="blank"><i class="material-icons icon">settings</i>pipesource</a>

<a href="https://observablehq.com/@loredanacirstea/dtype-2" target="blank"><i class="material-icons icon">settings</i>guiType</a>

</div>

<span class="menuLabel"><i class="material-icons icon">help</i> About</span>

<a href="https://gitter.im/pipeos-one/pipeline" target="blank"><i class="material-icons icon">chat</i>Gitter Chat</a>

<a href="https://www.youtube.com/playlist?list=PL323JufuD9JAyaYCEvrnQ5yOAc3ukuNyF" target="blank"><i class="material-icons icon">video_library</i>Youtube Demos</a>

<a href="https://twitter.com/lorecirstea" target="blank"><i class="material-icons icon">record_voice_over</i>Twitter</a>

<a href="https://github.com/pipeos-one/pipeline" target="blank"><i class="material-icons icon">code</i>Github</a>

<a href="https://github.com/pipeos-one/pipeline/issues" target="blank"><i class="material-icons icon">bug_report</i>Report Issues</a>

<a href="https://github.com/pipeos-one/pipeline/blob/master/client/LICENSE" target="blank"><i class="material-icons icon">copyright</i>GPLv.3 License</a>

</div>

<style>

h1, h2, h3, h4, h5, h6 {

font-family:Roboto Condensed;

}

#menubar {font-size:18px; user-select:none; color:var(--syntax_normal;); font-family:Roboto Condensed;

border-top: 1px solid var(--syntax_normal); border-bottom: 1px solid var(--syntax_normal);

padding-top: 5px; padding-bottom: 5px;

padding-left: 40px; width: 100%;

}

.material-icons { vertical-align: middle; }

#menubar div{display:inline-block; vertical-align:top}

/* Menu label (no hover) */

#menubar .menuLabel{padding:4px 4px 4px 4px;margin-right:10px;margin-left:-8px}

/* Menu label (hover) */

#menubar .menuLabel:hover{background: var(--selection)}

/* Drop-down menu */

#menubar div div{position:absolute;display:block;min-width:220px;overflow:auto;background:${bgcolor};box-shadow:0px 2px 6px 0px var(--syntax_normal);z-index:4;padding:4px 2px 2px 30px;margin-left:-8px;margin-top:4px}

/* Drop-down menu (hidden) */

#menubar span:not(.activeMenu) + div{visibility:hidden}

/* Menu item */

#menubar div div a{color:var(--syntax_normal);text-decoration:none;display:block;padding:4px;margin:4px 0 4px}

/* Left-aligned icon within a menu item */

#menubar div div a .icon{position:absolute;left:9px}

/* Hotkey documentation in a menu item */

#menubar div div a .hotkey{position:absolute;right:9px;color:var(--syntax_normal)}

/* Google's icon font within the menu */

#menubar div div a .material-icons{font-size:120%;color:var(--syntax_normal)}

#menubar div div a:hover, #menubar div div a:focus {background: var(--selection);}

/* Line between menu items */

#menubar div div hr{border:none;height:1px;background:var(--syntax_normal);margin:5px -2px 5px -30px}

</style>

console.log('notebookdom', notebookdom)

notebookdom.innerHTML = innerHTML;

if (HTMLCollection.prototype.forEach === undefined) {HTMLCollection.prototype.forEach = [].forEach }

function closeAllMenus() {

document.getElementsByClassName('activeMenu').forEach(

function (node) {node.classList.remove('activeMenu')}

)}

function showMenu(e) {

closeAllMenus();

this.classList.add('activeMenu');

e.stopPropagation();

// Move the dropdown under the label clicked

document.getElementsByClassName('menuDropDown').forEach(menu => {

menu.style.marginLeft = (e.target.offsetLeft - 40)+'px';})

}

(function() {

function on(e,f){window.addEventListener(e,f)}

on('click', closeAllMenus, true)

on('keydown', function (event) { (event.key === "Escape") && closeAllMenus() }, true)

})();

document.getElementsByClassName('menuLabel').forEach(function(node) {node.onclick = showMenu})

function goto(id) {

console.log(id)

document.getElementById(id).scrollIntoView({ behavior: 'smooth' });

}

window.goto = goto

function shorten(txt, noChar){

let len = txt.length

if ( len < noChar) return txt;

let half = Math.floor(noChar/2)

return txt.slice(0, half)+ ".." +txt.slice(-half)

}

html `<img src='${url}' style='max-width:100%;' />`

md`## Sect5`

md`## S3`

md`## Imports0`

md`## Imports9`

md`## Imporrr`

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.

Learn more