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