Example #1
0
function renderLeaf(leafInfos, linksDom){
  return h("div.main-container", [
      h("div.navigate-content", linksDom),
      h("div.breadcrumb", [h("div", leafInfos.leaf.name)]),
      renderShare("http://arbre-integral.net", leafInfos.leaf.content)
    ])
}
Example #2
0
File: poem.js Project: mmai/poemaze
function renderLeaf(leafInfos, linksDom){
  return h("div.main-container", [
      h("div.navigate-content", linksDom),
      h("div.breadcrumb", [h("div", leafInfos.leaf.name)]),
      renderShare("http://mmai.github.io/poemaze/", leafInfos.leaf.content)
    ])
}
Example #3
0
export function renderNeighorLink(id, neighbor){
  let links = [];
  if (neighbor && neighbor.leaf){
    let classUp = isUp(neighbor.leaf)?"ai-up":"ai-down";
    links.push(h(`a.${classUp}`, {attrs:{href: neighbor.leaf.id + "?trace=" + neighbor.fromId}}, neighbor.leaf.word));
  }  
  if (links.length === 0) {
    links = [h("a.txt-transparent", ".")]
  }
  return h("span.item-" + id, links);
}
const svgDropDownIcon = color =>
  h('svg', {
    attrs: {
      fill: color,
      height: 16,
      viewBox: '0 0 16 16',
      width: 16,
    },
  }, [
    h('path', {attrs: {d: 'M7 10l5 5 5-5z'}}),
    h('path', {attrs: {d: 'M0 0h24v24H0z', fill: 'none'}}),
  ])
    const vtree$ = visitedLeaf$.map(leafInfos => {
        if (leafInfos.history.length < pathsVtree.length - 1) {
          // console.log(`[svgComponent ${debugName}] history:${leafInfos.history.length} pathsVtree: ${pathsVtree.length}`)
          //Reset
          pathsVtree = []
        } else if (pathsVtree.length === 0) {
          //Redraw from localstorage history
          pathsVtree = makePathsFromHistory(leafInfos.history)
        }

        const newLeaf = leafInfos.leaf;
        if (leafInfos.isNewLeaf) {
          const fromLeaf = AI.getLeaf(leafInfos.fromId);
          pathsVtree.push( makeJoinLine(fromLeaf, newLeaf))
        }

        let transform = `translate(${width/2},${height/2})`

        const {rotation, animationClass} = getRotationAnimationInfo(leafInfos)
        if (fixedSize === 'none' && rotation !== 0) {
          transform += `, rotate(${rotation})`
        }

        let mainAttributes = {}
        if (!clickable){
          mainAttributes["pointer-events"] = "none"
        }

        if (fixedSize === 'none'){
          mainAttributes.class = animationClass
          if (viewBox !== false) {
            mainAttributes.viewBox = viewBox
          } else {
            mainAttributes.width = width
            mainAttributes.height = height
          }
        } else {
          mainAttributes.width = fixedSize
          mainAttributes.height = fixedSize
          mainAttributes.viewBox = viewBox
        }

        return h('svg', {attrs: mainAttributes}, [
            skeletonVtree,
            h('g', {attrs:{transform}}, [
                ...pathsVtree,
                ...currentPositionVtree(newLeaf),
                ...neighborsVtree(leafInfos),
              ]),
          ])
      })
Example #6
0
File: poem.js Project: mmai/poemaze
 return [].map.call(wrapper.childNodes, (el => {
     switch (el.nodeName){
     case "#text": return el.nodeValue;
     case "EM": return h('em', el.innerHTML);
     default: return undefined;
     }
   }))
export default ({title, className, iconName, clickable}) =>
  h('div.row.' + className, {style: style(clickable)}, [
    Col({type: 'xs-10'},[title]),
    iconName ?
      Col(
        {type: 'xs-1', style: {width: '48px', 'font-size': '32px'}},
        [icon(iconName, 'white')]
      ) : null,
  ])
/**
 * Draw dots at each final tree node
 */
 function drawSkeleton(){
   //If pdf cover visualization : no skeleton
   if  (fixedSize !== 'none') { return  h('g'); }

   let points = []
   for (let circ = 0; circ < 7; circ++){
     const nbLeafs = Math.pow(2, circ);
     for (let pos = 1; pos <= nbLeafs; pos++){
       const {x, y} = getCoordsFromPos({circ, pos});
       points[points.length] = h('circle', {attrs:{cx:x, cy:y, r:leafRadius, fill:color_skeleton}})
       // circle.stroke = color_skeleton;
     }
   }

   return h('g', {attrs:{transform:`translate(${width/2},${height/2})`}}, [
       h('circle', {attrs:{ fill: color_background, cx: 0, cy: 0, r: circleRadius * 7 }}),
       ...points
     ]);
 }
Example #9
0
File: poem.js Project: mmai/poemaze
function renderLeafUpside(leafInfos){
  return renderLeaf(leafInfos, [
        renderNeighorLink("nw", leafInfos.neighbors.leftChild),
        renderNeighorLink("ne", leafInfos.neighbors.rightChild),
        renderNeighorLink("w", leafInfos.neighbors.leftBrother),
        h("blockquote", getHtmlContents(leafInfos.leaf.content)),
        renderNeighorLink("e", leafInfos.neighbors.rightBrother),
        renderNeighorLink("s", leafInfos.neighbors.parent)
      ])
}
Example #10
0
function renderLeafUpside(leafInfos){
  let classUp = (leafInfos.type === "UP") ? "ai-up" : "ai-down";
  let circleLevel = leafInfos.leaf.id.split('').length - 1;
  return renderLeaf(leafInfos, [
        renderNeighorLink("nw", leafInfos.neighbors.leftChild),
        renderNeighorLink("ne", leafInfos.neighbors.rightChild),
        renderNeighorLink("w", leafInfos.neighbors.leftBrother),
        h("blockquote", getHtmlContents(leafInfos.leaf.content)),
        renderNeighorLink("e", leafInfos.neighbors.rightBrother),
        renderNeighorLink("s", leafInfos.neighbors.parent)
      ])
}
  /**
   * Virtual DOM of a SVG circle for a neighbor
   *
   * @param {leaf} neighbor
   * @return {vdom tree}
   */
  function makeNeighborLeaf (neighbor){
    const leaf = neighbor.leaf
    const coords = AI.getCoords(leaf);
    const {x, y} = getCoordsFromPos(coords);

    const type = AI.getType(leaf);
    const color = (type == 'UP')?color_up:color_down;

    return h('circle', {attrs:{
        cx: x, cy: y, r: leafRadius * 2,
        stroke: color, fill: color, class: 'viz-neighbor',
        'data-neighbor-href': `${leaf.id}-${neighbor.fromId}`
      }}
    )
  }
Example #12
0
export function renderPoem(isUpside, leafInfos){
  let circlesView = h("div");
  switch(leafInfos.type){
  case 'ROOT':
    circlesView = renderRoot(leafInfos);
    break;
  case 'DOWN': 
    circlesView = isUpside?renderLeafReversed(leafInfos):renderLeafUpside(leafInfos);
    break;
  default: 
    circlesView = isUpside?renderLeafUpside(leafInfos):renderLeafReversed(leafInfos);
  }

  return circlesView;
}
Example #13
0
export function renderJourney(journey){
  return h("div.main-container", [
      h("div.journey-content", journey.map(leaf => {
            return h("div", `${leaf.content}`) 
          }
        )),
      h("div.breadcrumb", [ h("div", "Journey")]),
      h("div.ai-last-restart", [ h("a", {attrs:{href: "/reset"}}, "Restart")]),
    ])
}
  function makeArcBetweenLeafs (from, to, color){
    const posfrom = getCoordsFromPos(from);
    const posto = getCoordsFromPos(to);

    const radius = Math.sqrt(Math.pow(posto.x - origin.x, 2) + Math.pow(posto.y - origin.y, 2));

    let polarfrom = cartesianToPolar({x: posfrom.x - origin.x, y:origin.y - posfrom.y});
    let polarto = cartesianToPolar({x: posto.x - origin.x, y:origin.y - posto.y});

    return h('path', {attrs:{
        d: describeSvgArc(radius, 0 - polarfrom.angle, 0 - polarto.angle),
        stroke: color,
        // fill: color_background,
        'fill-opacity': 0,
        'stroke-width': 1
      }})
  }
Example #15
0
  let view$ = model.loginInfo$.map( (auth) => {

    var loginInfo = auth.userInfo;

    return h('div', [
            h('form.login_form', {} ,[
              h('input.login_input', {props: {type: 'text', placeholder:'Enter Email' , name: 'email', id: 'email', value: loginInfo.email }}),
              h('input.login_input', {props: {type: 'text', placeholder:'Enter Password' , name: 'password', id:'password', value: loginInfo.password }}),
              h('button.login_button','Login'),
              h('button.cancel_button','Cancel')
            ])
          ]);
  })
Example #16
0
export const icon = (name, className) =>
  h(`i.icon-${name}.${className}`,[])
 function makeLineBetweenLeafs (from, to, color){
   const posfrom = getCoordsFromPos(from);
   const posto = getCoordsFromPos(to);
   return h('line', {attrs:{x1:posfrom.x, y1:posfrom.y, x2:posto.x, y2:posto.y, stroke:color, 'stroke-width':1 }});
 }
 /**
  * Virtual DOM of a SVG circle at the current position
  *
  * @param {AI leaf} leaf - current visited leaf
  * @return {vdom tree}
  */
 function currentPositionVtree(leaf){
   if (!displayNeighbors) return [];
   const coords = AI.getCoords(leaf);
   const {x, y} = getCoordsFromPos(coords);
   return [h('circle', {attrs:{cx:x, cy:y, r:leafRadius*2, stroke: color_current, fill:color_current}})]
 }
Example #19
0
export function renderDashboard(showDashboard, isUpside, history, progressionVtree, aiLogoSvgVtree, aiSvgVtree){
  //We can't put the link directly on a.dashboardLink due to a cycle-dom bug on internet explorer
  const currentLeafId = history.length === 0 ? "0" : history[history.length-1].id;
  return h("aside#side-panel", {class: {active: showDashboard}}, [
      h("a.dashboardLink", {attrs: {href: showDashboard?"#main":"#dashboard"}}, [h("div.svgLogoContainer", [aiLogoSvgVtree])]),
      h("div.side-panel-content", [
          h("div.location", currentLeafId),
          aiSvgVtree,
          progressionVtree,
          h("script", ` function aiOpenMenu(e){ document.getElementById(e.dataset.target).classList.toggle('active'); } `),
        h('ul.navigation', [
            h("li", [
              buttonForList("historyList", "History"),
              h('ul#historyList', history.map(url =>
                h(`li.${isUp(url)?'ai-up':'ai-down'}`, [ h(`a`, {attrs: {href: `${url.id}`}}, `${url.word} (${url.id})`) ])
              ))
            ]),
            h("li", [h("a", {attrs:{href: "reset"}}, "Restart")]),
            h("li", [h("a", {attrs:{rel: "external", href: "http://github.com/mmai/poemaze"}}, "Source code")]),
          ]),
      ])
  ])
}
Example #20
0
function buttonForList(listElement, caption){
  return h('button.trigger.reset', { attrs: { type:"button", onclick:"aiOpenMenu(this)", "data-target": listElement}}, caption)
}
Example #21
0
 h('ul#historyList', history.map(url =>
   h(`li.${isUp(url)?'ai-up':'ai-down'}`, [ h(`a`, {attrs: {href: `${url.id}`}}, `${url.word} (${url.id})`) ])
Example #22
0
 h("div.journey-content", journey.map(leaf => {
       return h("div", `${leaf.content}`) 
     }
Example #23
0
const _view = ({label}) =>
  div({class: {'tab-label-content': true}},[
    h('label',{attrs: {for: label}, style: {
      color: material.primaryFontColor},
    },[label]),
  ])