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         console.log('disposing:', this._className);
  85         $(window).unbind('resize', this._resizeHandler);
  86         $(this.element).unbind('resize', this._resizeHandler);
  87         this.unfreeze();
  88         this.element.html('');
  89     }
  90 });