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