How to use the basis.ui.Node function in basis

To help you get started, we’ve selected a few basis examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github rempl / rempl / server / client / src / ui / endpoint-list.js View on Github external
/* eslint-env browser */
/* global resource, basis */

var Node = require('basis.ui').Node;
var Value = require('basis.data').Value;
var Endpoint = require('../type.js').Endpoint;
var endpoint = require('../endpoint.js');

module.exports = new Node({
    template: resource('./template/endpoint-list.tmpl'),

    active: true,
    dataSource: Endpoint.all,
    childClass: {
        disabled: Value.query('data.publishers.itemCount').as(basis.bool.invert),

        template: resource('./template/endpoint.tmpl'),
        binding: {
            title: {
                events: 'update',
                getter: function(node) {
                    return node.data.title || '';
                }
            },
            isBrowser: Value.query('data.type').as(function(type) {
github basisjs / basisjs-tools / lib / server / modules / devtool / client / src / ui / sandbox.js View on Github external
},
  destroy: function(){
    // teardown socket connection
    var destroyApi = this.apiId && sandboxApi[this.apiId];
    if (destroyApi)
      destroyApi();

    // teardown document
    this.element.setAttribute('srcdoc', '');
    this.element.setAttribute('src', '');

    Node.prototype.destroy.call(this);
  }
});

module.exports = new Node({
  loading: new basis.Token(false),
  error: new basis.Token(false),

  template: resource('./template/sandbox.tmpl'),
  binding: {
    hasClient: Value.query('target').as(Boolean),
    loading: 'loading',
    error: 'error',
    online: 'data:',
    title: 'data:',
    location: 'data:',
    frame: 'satellite:'
  },
  action: {
    drop: function(){
      this.owner.dropSelection();
github basisjs / basisjs / tour / slide / ui_loose_coupling / app.js View on Github external
// load our components as modules
var editor = require('./editor.js');
var list = require('./list.js');

// link editor & list together
// all we need to know, that both are basis.ui.Node, and list has selection
list.selection.addHandler({
  itemsChanged: function(sender){
    editor.setDelegate(sender.pick());
    editor.focus();
  }
});

// create view that host nested components
var view = new Node({
  container: document.body,
  template:
    '<div>' +
      '' +
      '' +
    '</div>',
  binding: {
    editor: editor,
    list: list
  }
});
github basisjs / basisjs / tour / slide / ui_node / app.js View on Github external
var Node = require('basis.ui').Node;
var HtmlTemplate = require('basis.template.html').Template;

// create an UI node
var node = new Node({
  template: new HtmlTemplate(
    'Hello world'
  )
});

// append it's element to document body
document.body.appendChild(node.element);
github rempl / rempl / server / client / src / ui / sandbox.js View on Github external
publisherConnected.link(sandbox, sandbox.setConnected);

    // return destroy function
    return function destroySandboxApi() {
        clearTimeout(retryTimer);
        sessionOpenned.destroy();
        sessionId.unlink(subscribers);
        online.unlink(subscribers);
        sandbox.destroy();
        sandbox = null;
        socket.close();
        socket = null;
    };
}

module.exports = new Node({
    destroySandbox: null,
    loading: new basis.Token(false),
    error: new basis.Token(false),

    template: resource('./template/sandbox.tmpl'),
    binding: {
        hasPublisher: Value.query('data.id').as(Boolean),
        nonExclusiveMode: transport.exclusivePublisher.as(basis.bool.invert),
        loading: 'loading',
        error: 'error',
        online: 'data:',
        title: 'data:',
        isBrowser: Value.query('data.type').as(function(type) {
            return type == 'browser';
        }),
        isNode: Value.query('data.type').as(function(type) {
github basisjs / basisjs / demo / apps / todomvc / basis / list / list.js View on Github external
var Node = require('basis.ui').Node;
var Value = require('basis.data').Value;
var Expression = require('basis.data.value').Expression;
var setAccumulateState = require('basis.data').Dataset.setAccumulateState;
var Task = require('../task');
var Item = require('../item/item');
var route = require('../route');

module.exports = new Node({
  template: resource('./list.tmpl'),
  dataSource: route.as(function(mode){
    if (mode === 'active') {
      return Task.active;
    }
    else if (mode === 'completed') {
      return Task.completed;
    }

    return Task.all;
  }),
  sorting: 'data.created',
  childClass: Item,
  action: {
    toggle: function(){
      setAccumulateState(true);
github basisjs / basisjs / tour / slide / ui_node_communication / app.js View on Github external
var Node = require('basis.ui').Node;

var editor = new Node({
  container: document.body,
  template:
    '',
  binding: {
    title: 'data:'
  },
  action: {
    update: function(event){
      this.update({
        title: event.sender.value
      });
    }
  }
});

var list = new Node({
github smelukov / webpack-runtime-analyzer / src / ui / src / pages / home / index.js View on Github external
var Value = require('basis.data').Value;
var sum = require('basis.data.index').sum;
var Node = require('basis.ui').Node;
var Page = require('app.ui').Page;
var type = require('app.type');
var utils = require('app.utils');
var AssetsTable = require('app.ui').Assets;
var ModulesTable = require('app.ui.modulesTable').Table;
var SplitView = require('app.ui').SplitView;

module.exports = new Page({
    className: 'Page.Home',
    satellite: {
        content: new Node({
            template: resource('./template/page.tmpl'),
            binding: {
                modules: 'satellite:'
            },
            satellite: {
                modules: new SplitView({
                    autoDelegate: true,
                    template: resource('./template/split.tmpl'),
                    binding: {
                        modulesCount: Value.query(type.Module.allWrapper, 'itemCount'),
                        modulesSize: sum(type.Module.allWrapper, 'update', 'data.size').as(utils.formatSize),

                        assetsCount: Value.query(type.Asset.all, 'itemCount'),
                        assetsSize: sum(type.Asset.all, 'update', 'data.size').as(utils.formatSize)
                    },
                    satellite: {
github basisjs / basisjs / src / devpanel / view / file-graph / view / graph / index.js View on Github external
var fileLink = FileLink.get({
          from: link[0],
          to: link[1]
        });
        if (fileLink)
        {
          graph.addLink.apply(graph, link);
          break;
        }
      }
    }
    setTimeout(popNode, speedSlider.value);
  })();
})();

module.exports = new Node({
  template: resource('./template/view.tmpl'),
  binding: {
    graph: svgGraphics,
    speedSlider: speedSlider
  }
});
github basisjs / basisjs / tour / src / slide / index.js View on Github external
var l10n = require('basis.l10n');
var router = require('basis.router');
var count = require('basis.data.index').count;
var Node = require('basis.ui').Node;
var Slide = require('app:type/slide');

var view = new Node({
  autoDelegate: true,

  template: resource('./template/view.tmpl'),
  binding: {
    viewer: 'satellite:',
    title: 'data:',
    num: 'data:',
    slideCount: count(Slide.all),
    description: {
      events: 'update',
      getter: function(node){
        return node.data.id
          ? l10n.dictionary('./slide/' + node.data.id + '/description.l10n').token('text')
          : null;
      }
    }