summaryrefslogtreecommitdiff
path: root/docroot/classes/bezel.class.js
diff options
context:
space:
mode:
Diffstat (limited to 'docroot/classes/bezel.class.js')
-rwxr-xr-xdocroot/classes/bezel.class.js154
1 files changed, 154 insertions, 0 deletions
diff --git a/docroot/classes/bezel.class.js b/docroot/classes/bezel.class.js
new file mode 100755
index 0000000..d29ed4f
--- /dev/null
+++ b/docroot/classes/bezel.class.js
@@ -0,0 +1,154 @@
1/*
2 * Material Experience - Bezel Class
3 *
4 * EYEMG - Interactive Media Group
5 * Created by Mike Crute (mcrute@eyemg.com)
6 * Updated by Mike Crute (mcrute@eyemg.com) on 9/26/07
7 *
8 * Notification bezel class mimics the notification bezel in BBEdit
9 * (and to a lesser extent, OS X).
10 */
11
12var Bezel = Class.create();
13Object.extend(Bezel.prototype,
14{
15 /*
16 * Creates the bezel HTML elements and adds them to the document body.
17 */
18 initialize: function()
19 {
20 this.options = Object.extend(
21 {
22 background: "black", // Background color of the bezel
23 opacity: 0.8, // % Opacity of the bezel
24 fontSize: "2em", // Font Size
25 fadeTime: 2, // Fade Time
26 destroy: true, // Destroy bezel on fade out
27 displayTime: 1, // How long to display the bezel - 0 is "sticky"
28 onShow: Prototype.emptyFunction, // After show callback
29 afterHide: Prototype.emptyFunction // After hide callback
30 }, arguments[0] || {});
31
32 this.visible = false;
33
34 var Rounder = new RoundedCorners(this.options.background);
35
36 this.bezel = Element.extend(document.createElement("div"));
37 this.message = Element.extend(document.createElement("div"));
38
39 this.bezel.appendChild(Rounder.get(Rounder.directions.top));
40 this.bezel.appendChild(this.message);
41 this.bezel.appendChild(Rounder.get(Rounder.directions.bottom));
42
43 document.body.appendChild(this.bezel);
44
45 this.bezel.setStyle(
46 {
47 opacity: this.options.opacity,
48 zIndex: 9999999,
49 position: "absolute",
50 display: "none",
51 width: "auto",
52 cursor: "pointer"
53 });
54
55 this.message.setStyle(
56 {
57 background: this.options.background,
58 fontSize: this.options.fontSize,
59 color: "white",
60 padding: "0px 1em",
61 textAlign: "center"
62 });
63
64 // IE does not properly size the bezel so we must constrain it
65 if (Prototype.Browser.IE)
66 {
67 this.bezel.setStyle({ width: "50%" });
68 }
69
70 this.bezel.onclick = function()
71 {
72 this.hide();
73 }.bind(this);
74 },
75
76 /*
77 * Displays the notification bezel with the requested message.
78 */
79 show: function(message)
80 {
81 // Sets the bezel message
82 this.message.innerHTML = message;
83 this.visible = true;
84
85 // Center the bezel
86 var mysize = this.bezel.getDimensions();
87 mysize = window.calcCordsToCenter(mysize.height, mysize.width);
88
89 // Set the position of the bezel
90 this.bezel.setStyle(
91 {
92 top: mysize.top + "px",
93 left: mysize.left + "px"
94 });
95
96 this.bezel.show();
97
98 if (typeof this.options.onShow == "function")
99 {
100 this.options.onShow();
101 }
102
103 if (this.options.displayTime > 0)
104 {
105 new PeriodicalExecuter(function(executer)
106 {
107 this.hide();
108 executer.stop();
109 }.bind(this), this.options.displayTime);
110 }
111
112 return this;
113 },
114
115 /*
116 * Removes the bezel from the DOM.
117 */
118 destroy: function()
119 {
120 try
121 {
122 document.body.removeChild(this.bezel);
123 }
124 catch (e)
125 {
126 // Ignore errors
127 }
128 },
129
130 /*
131 * Fades out the notification bezel. If this is not a sticky bezel
132 * (displayTime > 0) then this function will be called automatically
133 * by the show routine.
134 */
135 hide: function()
136 {
137 new Effect.Fade(this.bezel,
138 {
139 duration: this.options.fadeTime,
140
141 afterFinish: function()
142 {
143 this.visible = false;
144
145 if (this.options.destroy)
146 {
147 this.destroy();
148 }
149
150 this.options.afterHide(this);
151 }.bind(this)
152 });
153 }
154}); \ No newline at end of file
© 2015 Mike Crute