diff options
Diffstat (limited to 'docroot/classes/bezel.class.js')
-rwxr-xr-x | docroot/classes/bezel.class.js | 154 |
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 | |||
12 | var Bezel = Class.create(); | ||
13 | Object.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 | ||