Ejemplos de tree-view en JavaScript

Ejemplo n.º 1

Archivo: index.js Proyecto: Shipwrecked/adventure-time

module.exports = function(opts) {
  if (!opts || !opts.guide || !opts.id || !opts.server) throw new Error('Must specify guide, server and id options')

  var editorDiv = document.querySelector('.editor')
  var treeDiv = document.querySelector('.tree')
  var guideDiv = document.querySelector('.guide')
  var consoleDiv = document.querySelector('.console')
  var defaultConsole = 'terminal.html?server=' + opts.server + '&id=' + opts.id
  var guideFrame = iframe({src: opts.guide, container: guideDiv})
  var consoleFrame = iframe({src: opts.console || defaultConsole, container: consoleDiv})

  var actions = {
    "toggle-bottom": function() {
      elementClass(editorDiv).toggle('hidden')
      elementClass(treeDiv).toggle('hidden')
      elementClass(consoleDiv).toggle('tall')
      elementClass(guideDiv).toggle('tall')
    },
    "show-bottom": function() {
      elementClass(editorDiv).remove('hidden')
      elementClass(treeDiv).remove('hidden')
      elementClass(consoleDiv).remove('tall')
      elementClass(guideDiv).remove('tall')
    },
    "hide-bottom": function() {
      elementClass(editorDiv).add('hidden')
      elementClass(treeDiv).add('hidden')
      elementClass(consoleDiv).add('tall')
      elementClass(guideDiv).add('tall')
    }
  }
  // instantiate the editor
  var cm = edit({
    container: editorDiv,
    autofocus: false
  })

  var tree = treeView()
  tree.appendTo(treeDiv)

  var readdir = function(path, cb) {
    xhr({
      method: 'GET',
      url: 'http://'+opts.server+'/files/'+opts.id+path,
      json: true
    }, function(err, response) {
      if (err) return cb(err)
      cb(null, response.body)
    })
  }

  var cd = function(path) {
    readdir(path, function(err, files) {
      if (err) return onerror(err)
      tree.directory(path, files)
    })
  }

  var updateTree = throttle(1000, function(cb) {
    var dirs = Object.keys(tree.directories)

    dirs.forEach(function(path) {
      readdir(path, function(err, files) {
        if (err) return onerror(err)
        if (tree.directories[path]) tree.directory(path, files)
      })
    })

    cb()
  })

  var filename = null
  var save = throttle(1000, function(cb) {
    if (!filename) return cb()
    xhr({
      method: 'PUT',
      url: 'http://'+opts.server+'/files/'+opts.id+encodeURI(filename),
      body: cm.getValue()
    }, cb)
  })

  // autosave for now
  cm.on('change', save)

  var onmessage = function(e) {
    if (e.data === 'ready') return cd('/')
    if (e.data === 'update') return updateTree()
    // if (e.data === 'connectionError') // do stuff
  }

  tree.on('directory', cd)
  tree.on('file', function(path) {
    xhr({
      method: 'GET',
      url: 'http://'+opts.server+'/files/'+opts.id+path
    }, function(err, response) {
      if (err) return onerror(err)
      filename = path
      cm.setValue(response.responseText)
      cm.focus()
    })
  })

  on(document.body, '.buttons a', 'click', function(e) {
    e.preventDefault()
    var action = e.target.attributes['data-action']
    if (action) {
      if (actions[action.value]) actions[action.value]()
    }
    return false
  })


  window.addEventListener('message', onmessage, false)
}

Ejemplo n.º 2

Archivo: index.js Proyecto: mafintosh/docker-registry-ui

var xhr = require('xhr')
var tree = require('tree-view')
var highlight = require('highlight.js')

var browser = tree()
var image = window.location.hash.slice(1) || 'fe4f71a4d666f85558a9fd638b6e3482b44ff25c367724a029011e6de86f09bb'

var onerror = function(err) {
  throw err
}

var cd = function(p) {
  xhr({
    timeout: 60*1000,
    method: 'GET',
    url: 'http://localhost:8000/v1/images/'+image+'/tree'+p,
    json: true
  }, function(err, response) {
    if (err) return onerror(err)
    browser.directory(p, response.body)
  })
}

var cat = function(p) {
  xhr({
    timeout: 60*1000,
    method: 'GET',
    url: 'http://localhost:8000/v1/images/'+image+'/blobs'+p
  }, function(err, response) {
    if (err) return onerror(err)