31:T8d8,viz = { const width = 400 const height = 700 const body = d3.select(this || DOM.element('div')) .attr('class', 'body') .style('height', height + 'px') .style('width', width + 'px') const container = createOnce(body, 'div', 'container') .style('height', 0.9*height + 'px') .style('width', 0.9*width + 'px') .style('top', 0.05*height + 'px') .style('left', 0.05*width + 'px') const nItems = 20 const menuItems = lorem.generateWords(nItems).split(' ') const menu = createOnce(container, 'div', 'menu') .style('left', '-70%') .html(`

${menuItems[e]}

`) .on('click', function(){ d3.select(this) .transition() .style('left', () => d3.select(this).style('left') === '0%' ? '-70%' : '0%' ) }) function updater(p){ p.select('h3').html(lorem.generateWords(4)); p.select('.desc').html(lorem.generateSentences(3)); p.selectAll('.bar').each(function(){ d3.select(this).style('height', Math.random()*100+'%'); // run once per }); p.style('background-color', () => ["#f38b00", "#f3ce13", "#71a850", "#4ec1e0", "#d95c72"][Math.floor(Math.random()*5)]) } const content = createOnce(container, 'div', 'content') .style('background-color', '#71a850') .html(`

${lorem.generateWords(4)}

${lorem.generateSentences(3)}

${[0,1].map(e => `

`).join('')}

`) .each(function(d){ const that = this; var hammertime = new Hammer(that, {}); hammertime.on('pan', function(ev) { if (ev.isFinal) { updater(d3.select(that)); } }); }) menu.selectAll('li') .on('click', function(){ updater(content); }) const tabs = createMerge(menu, 'div', 'tab', d3.range(0, 5), d => d) .style('top', d => (5 + 19*d)+'%') .style('right', '0px') return body.node() }32:T550,html` `33:[] 2f:{"title":"Mobile Nav Prototype 2","cells":[{"id":0,"value":"md`# Mobile Nav Prototype 2`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"createOnce = (parent, el, cl) => createMerge(parent, el, cl, [null])","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"createMerge = (parent, el, cl, data, acc) =>{\n\tconst sel = parent.selectAll(el+ (cl ? cl.split(' ').map(c => '.'+c).join('') : ''))\n\t\t.data(data, (d,i) => acc && acc(d,i))\n\tsel.exit().remove()\n\treturn sel\n\t\t.enter().append(el)\n\t\t.attr('class',cl)\n\t\t.merge(sel)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"Hammer = require('hammerjs')","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"lorem = new LoremIpsum({\n sentencesPerParagraph: {\n max: 8,\n min: 4\n },\n wordsPerSentence: {\n max: 16,\n min: 4\n }\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"LoremIpsum = {\n const lib = await require('https://bundle.run/lorem-ipsum@2.0.1');\n return lib.LoremIpsum\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}