proxy.local

webix.proxy.local

webix.proxy.local helper.

Please look into the linked official documentation.

References

helpers

assert(), copy(), delay(), extend(), markup, offline, ui(), hasMethod(), uid().

External references

Official documentation page.

Code

webix.proxy.local = {
    init:function(){
        webix.extend(this, webix.proxy.offline);
    },
    cache:true,
    data:[]
};

if (window.angular)

(function(){

  function id_helper($element){
    //we need uniq id as reference
    var id = $element.attr("id");
    if (!id){
      id = webix.uid();
      $element.attr("id", id);
    }
    return id;
  }

  function locate_view_id($element){
    if (typeof $element.attr("webix-ui") != "undefined")
      return $element.attr("id");
    return locate_view_id($element.parent());
  }




//creates webix ui components
angular.module("webix", [])
  .directive('webixUi', [ "$parse", function($parse) {
    return {
      restrict: 'A',
      scope: false,
      link:function ($scope, $element, $attrs, $controller){
        var dataname = $attrs["webixUi"];
        var callback = $attrs["webixReady"];
        var watch = $attrs["webixWatch"];
        var wxRoot = null;
        var id = id_helper($element);

        $element.ready(function(){
          if (wxRoot) return;

          if (callback)
            callback = $parse(callback);

          //destruct components
          $element.bind('$destroy', function() {
            if(wxRoot) wxRoot.destructor();
          });

          //webix-ui attribute has some value - will try to use it as configuration
          if (dataname){
            //configuration
            var watcher = function(data){
              if (wxRoot) wxRoot.destructor();
              if ($scope[dataname]){
                var config = webix.copy($scope[dataname]);
                config.$scope =$scope;
                $element[0].innerHTML = "";
                wxRoot = webix.ui(config, $element[0]);
                if (callback)
                  callback($scope, { root: wxRoot });
              }
            };
            if (watch !== "false")
              $scope.$watch(dataname, watcher);
            watcher();
          } else {
          //if webix-ui is empty - init inner content as webix markup
            if (!$attrs["view"])
              $element.attr("view", "rows");

            var ui = webix.markup;
            var tmp_a = ui.attribute; ui.attribute = "";
            //FIXME - memory leaking, need to detect the moment of dom element removing and destroy UI
            if (typeof $attrs["webixRefresh"] != "undefined")
              wxRoot = ui.init($element[0], $element[0], $scope);
            else
              wxRoot = ui.init($element[0], null, $scope);

            ui.attribute = tmp_a;

            if (callback)
              callback($scope, { root: wxRoot });
          }

          //size of ui
          $scope.$watch(function() {
            return $element[0].offsetWidth + "." + $element[0].offsetHeight;
          }, function() {
            if (wxRoot) wxRoot.adjust();
          });

        });
      }
    };
  }])

  .directive('webixShow', [ "$parse", function($parse) {
    return {
      restrict: 'A',
      scope: false,

      link:function ($scope, $element, $attrs, $controller){
        var attr = $parse($attrs["webixShow"]);
        var id = id_helper($element);

        if (!attr($scope))
            $element.attr("hidden", "true");

        $scope.$watch($attrs["webixShow"], function(){
          var view = webix.$$(id);
          if (view){
            if (attr($scope)){
              webix.$$(id).show();
              $element[0].removeAttribute("hidden");
            } else
              webix.$$(id).hide();
          }
        });

      }
    };
  }])

  .directive('webixEvent', [ "$parse", function($parse) {
    var wrap_helper = function($scope, view, eventobj){
      var ev = eventobj.split("=");
      var action = $parse(ev[1]);
      var name = ev[0].trim();
      view.attachEvent(name, function(){
        return action($scope, { id:arguments[0], details:arguments });
      });
    };

    return {
      restrict: 'A',
      scope: false,

      link:function ($scope, $element, $attrs, $controller){
        var events = $attrs["webixEvent"].split(";");
        var id = id_helper($element);

        setTimeout(function(){
          var first = $element[0].firstChild;
          if (first && first.nodeType == 1)
            id = first.getAttribute("view_id") || id;

          var view = webix.$$(id);
          for (var i = 0; i < events.length; i++) {
            wrap_helper($scope, view, events[i]);
          }
        });

      }
    };
  }])

  .directive('webixElements', [ "$parse", function($parse) {
    return {
      restrict: 'A',
      scope: false,

      link:function ($scope, $element, $attrs, $controller){

        var data = $attrs["webixElements"];
        var id = id_helper($element);

        if ($scope.$watchCollection)
          $scope.$watchCollection(data, function(collection){
            setTimeout(function(){
              var view = webix.$$(id);
              if (view){
                view.define("elements", collection);
                view.refresh();
              }
            },1);
          });
      }

    };
  }])

  .directive('webixData', [ "$parse", function($parse) {
    return {
      restrict: 'A',
      scope: false,

      link:function ($scope, $element, $attrs, $controller){

        var data = $attrs["webixData"];
        var id = id_helper($element);

        if ($scope.$watchCollection)
          $scope.$watchCollection(data, function(collection){
            if (collection){
              setTimeout(function(){
                loadData($element, id, collection, 0);
              },1);
            }
          });
      }

    };
  }]);

  function loadData($element, id, collection, num){
    if (num > 10) return;
    var first = $element[0].firstChild;
    if (first && first.nodeType == 1)
    id = first.getAttribute("view_id") || id;

    var view = webix.$$(id);
    if (view){
      if (view.options_setter){
        view.define("options", collection);
        view.refresh();
      }else{
        if (view.clearAll)
          view.clearAll();
        view.parse(collection);
      }
    } else {
      webix.delay(loadData, this, [$element, id, collection], 100, num+1);
    }
  }

})();
if (window.Backbone)
(function(){

    var cfg = {
        use_id : false
    };

    function _start_ext_load(cal){
        cal._backbone_loading = true;
        cal.callEvent("onBeforeLoad", []);
        cal.blockEvent();
    }
    function _finish_ext_load(cal){
        cal.unblockEvent();
        cal._backbone_loading = false;
        cal.refresh();
    }

webix.attachEvent("onUnSyncUnknown", function(wData, bData){
    var whandlers = wData._sync_events;
    var handlers = wData._sync_backbone_events;

    for (var i = 0; i < whandlers.length; i++)
        wData.detachEvent(whandlers[i]);

    for (var i = 0; i < handlers.length; i++)
        bData.off.apply(bData, handlers[i]);
});

webix.attachEvent("onSyncUnknown", function(wData, bData, config){
    if (config) cfg = config;
    if (cfg.get && typeof cfg.get == "string")
        cfg.get = cfg.get.split(",");

    //remove private properties
    function sanitize(ev){
        if (cfg.use_id)
            return ev;

        var obj = {};
        for (var key in ev)
            if (key != "id")
                obj[key] = ev[key];

        return obj;
    }

    function _get_id(model){
        return cfg.use_id ? model.id : model.cid;
    }

    function datareset(wData, bData){
        var data = [];
        for (var i = 0; i < bData.models.length; i++){
            var model = bData.models[i];
            var cid = _get_id(model);
            var ev =  copymodel(model);
            ev.id = cid;
            data.push(ev);
        }
        wData.clearAll();
        wData._parse(data);
    }

    function copymodel(model){
        if (cfg.get){
            var data = {};
            for (var i = 0; i < cfg.get.length; i++){
                var key = cfg.get[i];
                data[key] = model.get(key);
            }
            return data;
        }
        return model.toJSON();
    }

    var handlers = [
        ["change", function(model, info){
            var cid = _get_id(model);
            var ev = wData.pull[cid] = copymodel(model);
            ev.id = cid;

            if (wData._scheme_update)
                wData._scheme_update(ev);
            wData.refresh(ev.id);
        }],
        ["remove", function(model, changes){
            var cid = _get_id(model);
            if (wData.pull[cid])
                wData.remove(cid);
        }],
        ["add", function(model, changes){
            var cid = _get_id(model);
            if (!wData.pull[cid]){
                var ev =  copymodel(model);
                ev.id = cid;
                if (wData._scheme_init)
                    wData._scheme_init(ev);
                wData.add(ev);
            }
        }],
        ["reset", function(model, changes){
            datareset(wData, bData);
        }],
        ["request", function(obj){
            if (obj instanceof Backbone.Collection)
                _start_ext_load(wData);
        }],
        ["sync", function(obj){
            if (obj instanceof Backbone.Collection)
                _finish_ext_load(wData);
        }],
        ["error", function(obj){
            if (obj instanceof Backbone.Collection)
                _finish_ext_load(wData);
        }]
    ];

    for (var i = 0; i < handlers.length; i++)
        bData.bind.apply(bData, handlers[i]);


    var whandlers = [
        wData.attachEvent("onAfterAdd", function(id){
            if (!bData.get(id)){
                var data = sanitize(wData.getItem(id));
                var model = new bData.model(data);

                var cid = _get_id(model);
                if (cid != id)
                    this.changeId(id, cid);

                bData.add(model);
                bData.trigger("webix:add", model);
            }
            return true;
        }),
        wData.attachEvent("onDataUpdate", function(id){
            var ev = bData.get(id);
            var upd = sanitize(wData.getItem(id));

            ev.set(upd);
            bData.trigger("webix:change", ev);

            return true;
        }),
        wData.attachEvent("onAfterDelete", function(id){
            var model = bData.get(id);
            if (model){
                bData.trigger("webix:remove", model);
                bData.remove(id);
            }
            return true;
        })
    ];

    wData._sync_source = bData;
    wData._sync_events = whandlers;
    wData._sync_backbone_events = handlers;

    if (bData.length || wData.count()){
        datareset(wData, bData);
    }
});

window.WebixView = Backbone.View.extend({
    //starting from backbone 1.1, this.options is not saved automatically
    initialize : function (options) {
        this.options = options || {};
    },
    render:function(){
        if (this.beforeRender) this.beforeRender.apply(this, arguments);

        var config = this.config || this.options.config;
        var el;

        if (!config.view || !webix.ui.hasMethod(config.view, "setPosition")){
            el = window.$ ? $(this.el)[0] : this.el;
            //clear previous content if any
            if (el && !el.config) el.innerHTML = "";
        }

        var ui = webix.copy(config);
        ui.$scope = this;
        this.root = webix.ui(ui, el);

        if (this.afterRender) this.afterRender.apply(this, arguments);
        return this;
    },
    destroy:function(){
        if (this.root) this.root.destructor();
    },
    getRoot:function(){
        return this.root;
    },
    getChild:function(id){
        webix.assert(this.root.$$, "You need to set isolate property for top view");
        return this.root.$$(id);
    }
});

})();