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     if (this.frozen()) {
  35       this.unfreeze();
  36     }
  37     this.overlay = this.overlay
  38       || $('<div><div>' + message + '</div></div>')
  39             .addClass(this.overlayClass)
  40             .css({
  41               position: 'absolute',
  42               width: this.element.width(),
  43               height: this.element.height(),
  44               top: this.element.position().top,
  45               left: this.element.position().left,
  46               'user-select': 'none',
  47               '-webkit-user-select': 'none',
  48               '-khtml-user-select': 'none',
  49               '-moz-user-select': 'none',
  50               overflow: 'hidden'
  51             })
  52             .attr('unselectable', 'on')
  53             .appendTo(this.element.parent());
  54
  55     this.overlay.children('div').css({
  56       position: 'relative',
  57       top: this.overlay.height() / 2 - 20
  58     });
  59   },
  60
  61   unfreeze: function() {
  62     if (this.frozen()) {
  63       this.overlay.remove();
  64       this.overlay = null;
  65     }
  66   },
  67
  68   resized: function(event) {
  69     if (this.frozen()) {
  70       this.overlay.css({
  71         position: 'absolute',
  72         width: this.element.width(),
  73         height: this.element.height(),
  74         top: this.element.position().top,
  75         left: this.element.position().left
  76       }).children('div').css({
  77         position: 'relative',
  78         top: this.overlay.height() / 2 - 20
  79       });
  80     }
  81   },
  82
  83   dispose: function() {
  84     $(window).unbind('resize', this._resizeHandler);
  85     $(this.element).unbind('resize', this._resizeHandler);
  86     this.unfreeze();
  87     this.element.contents().remove();
  88   }
  89 });