-
Notifications
You must be signed in to change notification settings - Fork 0
/
menu.htc
225 lines (221 loc) · 10.7 KB
/
menu.htc
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
<PUBLIC:COMPONENT TAGNAME="menu" LIGHTWEIGHT>
<PUBLIC:ATTACH EVENT="oncontentready" ONEVENT="cReady();" />
<PUBLIC:ATTACH EVENT="onclick" ONEVENT="menuClick();" />
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="menuItemOver();" />
<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="menuItemOut();" />
<PUBLIC:EVENT NAME="onsubmenu_click" ID="propId" />
<PUBLIC:DEFAULTS style="cursor:default" />
<PUBLIC:PROPERTY NAME="backColor" VALUE="menu"/>
</PUBLIC:COMPONENT>
<script language="jscript">
////////////////////////////////////////////////////////////////////////////////////
// Global Variables
////////////////////////////////////////////////////////////////////////////////////
var minMenuWidth = 50; // Minumum width for the children of the popUp
var mColor = "menu"; // Default color used for the backgroundColor
var menuHeight = 23; // Menu height
var defaultWidth; // Variable to store the width of the text for an element
var srcElem = null; // Object to the source element which generated the click event
var ix = ""; // Left position of the pop-up window
var iy = ""; // Top position of the pop-up window
var iHeight = ""; // Height of the pop-up window
var iWidth = ""; // Width of the pop-up window
var popUp; // The pop-up window object
var menuWidth = 0; // Temporary variable to store the width of each menu item
var maxMenuWidth = 0; // Variable to store the maximum menuWidth
////////////////////////////////////////////////////////////////////////////////////
// Function : cReady
// Executed : Executes when oncontentready fires on the HTC document.
// Usage : Oncontentready is used to set initial values and styles once the content
// of the HTC is parsed.
////////////////////////////////////////////////////////////////////////////////////
function cReady(){
// Define the style for the current element.
if(backColor == null || backColor == ""){
element.style.backgroundColor = mColor;
}else{
mColor = backColor;
element.style.backgroundColor = mColor;
}
element.style.fontFamily = "Verdana";
element.style.height = menuHeight;
element.style.padding = 4;
element.style.fontSize = "10px";
element.style.border = "1px solid";
element.style.borderColor = mColor;
// Hide all the first-level children for the Behavior.
if(element.children.length > 0){
for(var i = 0; i < element.children.length; i++){
element.children[i].style.fontSize = "10px";
element.children[i].style.display = "none";
element.children[i].style.visibility = "hidden";
element.children[i].style.height = menuHeight;
}
}
}
////////////////////////////////////////////////////////////////////////////////////
// Function : menuClick
// Executed : When the onclick event fires on the custom Element.
// Usage : Creates the pop-up window with the first-level children of the current
// element and displays the pop-up window with the first-level elements.
// Each child element will have its own events attached to it using the attach method.
////////////////////////////////////////////////////////////////////////////////////
function menuClick(){
ix = 0;
iy = 0;
iHeight = 0;
iWidth = 0;
// Retrieve the source element which fired the event.
srcElem = event.srcElement;
srcElem.style.borderRight = "1px inset white";
srcElem.style.borderTop = "1px inset black";
srcElem.style.borderLeft = "1px inset black";
srcElem.style.borderBottom = "1px inset white";
// Hide the popup.
hidePopup();
// Create the popup for the current parent menu item.
popUp = window.createPopup();
var oPopBody = popUp.document.body;
// Does the custom element have any children?
if(srcElem.children.length > 0){
ix = 0;
iy = srcElem.offsetHeight;
// Get pop-up window Height and Width
iHeight = 23 * srcElem.children.length + 4;
iWidth = defaultWidth;
// Empty string to store the innerText of the current element's child.
var sz = "";
for(var j = 0; j < element.children.length; j++){
// Store the innerText of the current element.
sz = InnerText(element.children[j].innerHTML);
// Set the menuWidth variable to the length of the sz string.
menuWidth = sz.length;
if(menuWidth > maxMenuWidth)
maxMenuWidth = menuWidth;
}
iWidth = maxMenuWidth * 10;
if(iWidth < minMenuWidth)
iWidth = 60;
// Create an opening string of a SPAN Tag.
var popupHTML = "<SPAN style='position:absolute;" + "top:0px;" + "left:0px; height:" + iHeight + "px; width:" + iWidth + "px'>";
// Go through all the first-level children elements and get their outerHTML and append it to the DIV Element as children.
for(j = 0; j < element.children.length; j++){
// Assign the ID of the current child element to its innerText.
element.children[j].id = element.children[j].id;
popupHTML += element.children[j].outerHTML + "\n";
element.children[j].style.width = iWidth + "px";
}
// Add the closing SPAN Tag to the popupHTML string variable.
popupHTML += "</" + "SPAN>";
// Assign the HTML from above into the body of the pop-up window.
oPopBody.innerHTML = popupHTML;
// Assign events to each of the children in the pop-up, then show the custom elements in the pop-up.
for(j = 0; j < oPopBody.children[0].children.length; j++){
// Attach events to the children of the menu.
oPopBody.children[0].children[j].onmouseover = menuChildmouseOver;
oPopBody.children[0].children[j].onclick = menuChildClick;
// Define the current child's style to display.
oPopBody.children[0].children[j].style.display = "block";
oPopBody.children[0].children[j].style.visibility = "visible";
}
// Define the popUp's style.
oPopBody.style.borderLeft = "2 outset white";
oPopBody.style.borderTop = "2 outset white";
oPopBody.style.borderRight = "1 outset black";
oPopBody.style.borderBottom = "1 outset black";
oPopBody.style.position = "absolute";
oPopBody.style.backgroundColor = mColor;
oPopBody.style.fontFamily = "Verdana";
// Call the hidePop function upon onmouseleave firing.
popUp.document.body.onmouseleave = hidePopup;
// Show the popUp using the show method.
popUp.show( ix , iy , iWidth , iHeight, srcElem);
}
}
////////////////////////////////////////////////////////////////////////////////////
function menuChildmouseOver(){
// Cancel the event so that it does not bubble up to its parent.
popUp.document.parentWindow.event.cancelBubble = true;
// Retrieve the source element from the pop-up which fired the event.
srcElem = popUp.document.parentWindow.event.srcElement;
// Define the current element's style.
srcElem.style.color = "white";
srcElem.style.background = "highlight";
window.status = srcElem.innerHTML;
}
////////////////////////////////////////////////////////////////////////////////////
var oEvent;
function menuChildClick(){
// Cancel the event so that it does not bubble up to its parent.
popUp.document.parentWindow.event.cancelBubble = true;
// Retrieve the source element from the pop-up which fired the event.
srcElem = popUp.document.parentWindow.event.srcElement;
// Create a new event object.
oEvent = createEventObject();
// Assign the event object's result property to the ID of the custom element's ID which fired this event.
oEvent.result = srcElem.id;
// Fire the custom element's event.
propId.fire (oEvent);
// Hide the pop-up.
hidePopup();
}
////////////////////////////////////////////////////////////////////////////////////
// Function : HidePopup
// Executed : When the onmouseleave event fires on the custom Element.
// Usage : Hides the pop-up window for the menu.
////////////////////////////////////////////////////////////////////////////////////
function hidePopup(){
if(popUp)
if(popUp.isOpen)
popUp.hide();
}
////////////////////////////////////////////////////////////////////////////////////
// Function : menuItemOver
// Executed : When the onmouseover event fires on the custom Element.
// Usage : Changes the background color & font color of the Element.
////////////////////////////////////////////////////////////////////////////////////
function menuItemOver(){
// Retrieve the source element.
srcElem = event.srcElement;
window.status = srcElem.id;
// Set the element's style.
srcElem.style.borderRight = "1px outset black";
srcElem.style.borderTop = "1px outset white";
srcElem.style.borderLeft = "1px outset white";
srcElem.style.borderBottom = "1px outset black";
}
////////////////////////////////////////////////////////////////////////////////////
// Function : menuItemOut
// Executed : When the onmouseout event fires on the custom Element.
// Usage : Restores the background color & font color of the Element
// to the defaults.
////////////////////////////////////////////////////////////////////////////////////
function menuItemOut(){
// Retrieve the source element.
srcElem = event.srcElement;
// Set the element's style.
srcElem.style.backgroundColor = mColor;
srcElem.style.color = "black";
srcElem.style.border = "1px solid";
srcElem.style.borderColor = mColor;
}
////////////////////////////////////////////////////////////////////////////////////
// Function : InnerText
// Parameter : string
// Executed : Called from the mouseClick function.
// Usage : InnerText function gets the innerHTML of the custom element, which can
// contain Text + HTML; example, innerHTML of the first custom element looks like
// Start <ie:menu>Run</ie:menu>.... The function strips out the text until the
// first instance of "<" and returns the string.
////////////////////////////////////////////////////////////////////////////////////
function InnerText(szText){
var startTag = szText.indexOf("<");
if(szText.substr(0, startTag) == "")
return szText;
else
return szText.substr(0,startTag);
}
</script>
<BODY>
</BODY>
</HTML>