project/static/js/views/view.js

   1 /*globals Editor render_template*/
   2 var View = Editor.Object.extend({
   3   _className: 'View',
   4   element: null,
   5   model: null,
   6   template: null,
   7   overlayClass: 'view-overlay',
   8   overlay: null,
   9
  10   init: function(element, model, template)
  11   {
  12     console.log("init for view");
  13     this.element = $(element);
  14     this.model = model;
  15     this.template = template || this.template;
  16
  17     if (this.template) this.render();
  18
  19     this._resizeHandler = this.resized.bind(this);
  20     $(window).bind('resize', this._resizeHandler);
  21     $(this.element).bind('resize', this._resizeHandler);
  22   },
  23
  24   render: function() {
  25       console.log('rendering:', this._className);
  26       this.element.html(render_template(this.template, this));
  27   },
  28
  29   frozen: function() {
  30     return !!this.overlay;
  31   },
  32
  33   freeze: function(message) {
  34     this.overlay = this.overlay
  35       || $('<div><div>' + message + '</div></div>')
  36             .addClass(this.overlayClass)
  37             .css({
  38               position: 'absolute',
  39               width: this.element.width(),
  40               height: this.element.height(),
  41               top: this.element.position().top,
  42               left: this.element.position().left,
  43               'user-select': 'none',
  44               '-webkit-user-select': 'none',
  45               '-khtml-user-select': 'none',
  46               '-moz-user-select': 'none',
  47               overflow: 'hidden'
  48             })
  49             .attr('unselectable', 'on')
  50             .appendTo(this.element.parent());
  51
  52     this.overlay.children('div').css({
  53       position: 'relative',
  54       top: this.overlay.height() / 2 - 20
  55     });
  56   },
  57
  58   unfreeze: function() {
  59     if (this.frozen()) {
  60       this.overlay.remove();
  61       this.overlay = null;
  62     }
  63   },
  64
  65   resized: function(event) {
  66     if (this.frozen()) {
  67       this.overlay.css({
  68         position: 'absolute',
  69         width: this.element.width(),
  70         height: this.element.height(),
  71         top: this.element.position().top,
  72         left: this.element.position().left
  73       }).children('div').css({
  74         position: 'relative',
  75         top: this.overlay.height() / 2 - 20
  76       });
  77     }
  78   },
  79
  80   dispose: function() {
  81     $(window).unbind('resize', this._resizeHandler);
  82     $(this.element).unbind('resize', this._resizeHandler);
  83     this.unfreeze();
  84     this.element.contents().remove();
  85   }
  86 });