view.js revision c407dc5cd9bdc5668497f21b26b09d988ab439de
1c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch// Copyright (c) 2010 The Chromium Authors. All rights reserved. 2c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch// Use of this source code is governed by a BSD-style license that can be 3c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch// found in the LICENSE file. 4c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 5c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch/** 6c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch * Base class to represent a "view". A view is an absolutely positioned box on 7c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch * the page. 8c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch * 9c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch * @constructor 10c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch */ 11c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdochfunction View() { 12c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch this.isVisible_ = true; 13c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 14c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 15c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch/** 16c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch * Called to reposition the view on the page. Measurements are in pixels. 17c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch */ 18c407dc5cd9bdc5668497f21b26b09d988ab439deBen MurdochView.prototype.setGeometry = function(left, top, width, height) { 19c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch this.left_ = left; 20c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch this.top_ = top; 21c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch this.width_ = width; 22c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch this.height_ = height; 23c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch}; 24c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 25c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch/** 26c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch * Called to show/hide the view. 27c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch */ 28c407dc5cd9bdc5668497f21b26b09d988ab439deBen MurdochView.prototype.show = function(isVisible) { 29c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch this.isVisible_ = isVisible; 30c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch}; 31c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 32c407dc5cd9bdc5668497f21b26b09d988ab439deBen MurdochView.prototype.isVisible = function() { 33c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch return this.isVisible_; 34c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch}; 35c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 36c407dc5cd9bdc5668497f21b26b09d988ab439deBen MurdochView.prototype.getLeft = function() { 37c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch return this.left_; 38c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch}; 39c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 40c407dc5cd9bdc5668497f21b26b09d988ab439deBen MurdochView.prototype.getTop = function() { 41c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch return this.top_; 42c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch}; 43c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 44c407dc5cd9bdc5668497f21b26b09d988ab439deBen MurdochView.prototype.getWidth = function() { 45c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch return this.width_; 46c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch}; 47c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 48c407dc5cd9bdc5668497f21b26b09d988ab439deBen MurdochView.prototype.getHeight = function() { 49c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch return this.height_; 50c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch}; 51c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 52c407dc5cd9bdc5668497f21b26b09d988ab439deBen MurdochView.prototype.getRight = function() { 53c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch return this.getLeft() + this.getWidth(); 54c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch}; 55c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 56c407dc5cd9bdc5668497f21b26b09d988ab439deBen MurdochView.prototype.getBottom = function() { 57c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch return this.getTop() + this.getHeight(); 58c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch}; 59c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 60c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 61c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch//----------------------------------------------------------------------------- 62c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 63c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch/** 64c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch * DivView is an implementation of View that wraps a DIV. 65c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch * 66c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch * @constructor 67c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch */ 68c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdochfunction DivView(divId) { 69c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch View.call(this); 70c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 71c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch this.node_ = document.getElementById(divId); 72c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 73c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch // Initialize the default values to those of the DIV. 74c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch this.width_ = this.node_.offsetWidth; 75c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch this.height_ = this.node_.offsetHeight; 76c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch this.isVisible_ = this.node_.style.display != 'none'; 77c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 78c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 79c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdochinherits(DivView, View); 80c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 81c407dc5cd9bdc5668497f21b26b09d988ab439deBen MurdochDivView.prototype.setGeometry = function(left, top, width, height) { 82c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch DivView.superClass_.setGeometry.call(this, left, top, width, height); 83c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 84c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch this.node_.style.position = "absolute"; 85c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch setNodePosition(this.node_, left, top, width, height); 86c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch}; 87c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 88c407dc5cd9bdc5668497f21b26b09d988ab439deBen MurdochDivView.prototype.show = function(isVisible) { 89c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch DivView.superClass_.show.call(this, isVisible); 90c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch setNodeDisplay(this.node_, isVisible); 91c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch}; 92c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 93c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch/** 94c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch * Returns the wrapped DIV 95c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch */ 96c407dc5cd9bdc5668497f21b26b09d988ab439deBen MurdochDivView.prototype.getNode = function() { 97c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch return this.node_; 98c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch}; 99c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 100c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch//----------------------------------------------------------------------------- 101c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 102c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch/** 103c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch * Implementation of View that sizes its child to fit the entire window. 104c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch * 105c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch * @param {!View} childView 106c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch * 107c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch * @constructor 108c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch */ 109c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdochfunction WindowView(childView) { 110c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch View.call(this); 111c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch this.childView_ = childView; 112c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch window.addEventListener("resize", this.resetGeometry.bind(this), true); 113c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch} 114c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 115c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdochinherits(WindowView, View); 116c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 117c407dc5cd9bdc5668497f21b26b09d988ab439deBen MurdochWindowView.prototype.setGeometry = function(left, top, width, height) { 118c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch WindowView.superClass_.setGeometry.call(this, left, top, width, height); 119c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch this.childView_.setGeometry(left, top, width, height); 120c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch}; 121c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 122c407dc5cd9bdc5668497f21b26b09d988ab439deBen MurdochWindowView.prototype.show = function() { 123c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch WindowView.superClass_.show.call(this, isVisible); 124c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch this.childView_.show(isVisible); 125c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch}; 126c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 127c407dc5cd9bdc5668497f21b26b09d988ab439deBen MurdochWindowView.prototype.resetGeometry = function() { 128c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch this.setGeometry(0, 0, window.innerWidth, window.innerHeight); 129c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch}; 130c407dc5cd9bdc5668497f21b26b09d988ab439deBen Murdoch 131