| 1318 |
alexandre_ |
1 |
/*
|
|
|
2 |
Copyright (c) 2004-2006, The Dojo Foundation
|
|
|
3 |
All Rights Reserved.
|
|
|
4 |
|
|
|
5 |
Licensed under the Academic Free License version 2.1 or above OR the
|
|
|
6 |
modified BSD license. For more information on Dojo licensing, see:
|
|
|
7 |
|
|
|
8 |
http://dojotoolkit.org/community/licensing.shtml
|
|
|
9 |
*/
|
|
|
10 |
|
|
|
11 |
dojo.provide("dojo.widget.Show");
|
|
|
12 |
dojo.require("dojo.widget.*");
|
|
|
13 |
dojo.require("dojo.widget.HtmlWidget");
|
|
|
14 |
dojo.require("dojo.uri.Uri");
|
|
|
15 |
dojo.require("dojo.event.*");
|
|
|
16 |
dojo.require("dojo.lfx.*");
|
|
|
17 |
dojo.require("dojo.math.curves");
|
|
|
18 |
dojo.require("dojo.lang.common");
|
|
|
19 |
dojo.require("dojo.lang.func");
|
|
|
20 |
dojo.widget.defineWidget("dojo.widget.Show", dojo.widget.HtmlWidget, function () {
|
|
|
21 |
this._slides = [];
|
|
|
22 |
}, {isContainer:true, _slide:-1, body:null, nav:null, hider:null, select:null, option:null, inNav:false, debugPane:null, noClick:false, templateString:"<div class=\"dojoShow\">\n\t<div dojoAttachPoint=\"contentNode\"></div>\n\t<div class=\"dojoShowNav\" dojoAttachPoint=\"nav\">\n\t\t<div class=\"dojoShowHider\" dojoAttachPoint=\"hider\"></div>\n\t\t<span unselectable=\"on\" style=\"cursor: default;\" dojoAttachEvent=\"onClick:previousSlide\"><</span>\n\t\t<select dojoAttachEvent=\"onClick:gotoSlideByEvent\" dojoAttachPoint=\"select\">\n\t\t\t<option dojoAttachPoint=\"option\">Title</option>\n\t\t</select>\n\t\t<span unselectable=\"on\" style=\"cursor: default;\" dojoAttachEvent=\"onClick:nextSlide\">></span>\n\t</div>\n</div>\n", templateCssString:"@media screen {\n\thtml, body {\n\t\tmargin: 0px;\n\t\tpadding: 0px;\n\t\twidth: 100%;\n\t}\n\th1 {\n\t\tfont-size: 50px;\n\t}\n\tp, li {\n\t\tfont-size: 30px;\n\t}\n\t.dojoShowNav {\n\t\tbackground: #369;\n\t\toverflow: hidden;\n\t\tposition: absolute;\n\t\theight: 5px;\n\t\tbottom: 0px;\n\t\tleft: 0px;\n\t\twidth: 100%;\n\t\ttext-align: center;\n\t}\n\t.dojoShowNav input {\n\t\tmargin: 0px;\n\t}\n\t.dojoShowHider {\n\t\theight: 5px;\n\t\toverflow: hidden;\n\t\twidth: 100%;\n\t}\n\t.dojoShowPrint {\n\t\tposition: absolute;\n\t\tleft: 5px;\n\t\ttop: 0px;\n\t}\n\t.dojoShow {\n\t\tdisplay: none;\n\t}\n}\n@media print {\n\t.dojoShow {\n\t\tdisplay: none !important;\n\t}\n\t.dojoShowPrint {\n\t\tdisplay: block !important;\n\t}\n\t.dojoShowPrintSlide {\n\t\tborder: 1px solid #aaa;\n\t\tpadding: 10px;\n\t\tmargin-bottom: 15px;\n\t}\n\t.dojoShowPrintSlide, ul {\n\tpage-break-inside: avoid;\n\t}\n\th1 {\n\t\tmargin-top: 0;\n\t\tpage-break-after: avoid;\n\t}\n}\n", templateCssPath:dojo.uri.moduleUri("dojo.widget", "templates/Show.css"), fillInTemplate:function (args, frag) {
|
|
|
23 |
if (args.debugPane) {
|
|
|
24 |
var dp = this.debugPane = dojo.widget.byId(args.debugPane);
|
|
|
25 |
dp.hide();
|
|
|
26 |
dojo.event.connect(dp, "closeWindow", dojo.lang.hitch(this, function () {
|
|
|
27 |
this.debugPane = false;
|
|
|
28 |
}));
|
|
|
29 |
}
|
|
|
30 |
var source = this.getFragNodeRef(frag);
|
|
|
31 |
this.sourceNode = dojo.body().appendChild(source.cloneNode(true));
|
|
|
32 |
for (var i = 0, child; child = this.sourceNode.childNodes[i]; i++) {
|
|
|
33 |
if (child.tagName && child.getAttribute("dojotype").toLowerCase() == "showslide") {
|
|
|
34 |
child.className = "dojoShowPrintSlide";
|
|
|
35 |
child.innerHTML = "<h1>" + child.title + "</h1>" + child.innerHTML;
|
|
|
36 |
}
|
|
|
37 |
}
|
|
|
38 |
this.sourceNode.className = "dojoShowPrint";
|
|
|
39 |
this.sourceNode.style.display = "none";
|
|
|
40 |
dojo.event.connect(document, "onclick", this, "gotoSlideByEvent");
|
|
|
41 |
if (dojo.render.html.ie) {
|
|
|
42 |
dojo.event.connect(document, "onkeydown", this, "gotoSlideByEvent");
|
|
|
43 |
} else {
|
|
|
44 |
dojo.event.connect(document, "onkeypress", this, "gotoSlideByEvent");
|
|
|
45 |
}
|
|
|
46 |
dojo.event.connect(window, "onresize", this, "resizeWindow");
|
|
|
47 |
dojo.event.connect(this.nav, "onmousemove", this, "popUpNav");
|
|
|
48 |
}, postCreate:function () {
|
|
|
49 |
this._slides = [];
|
|
|
50 |
for (var i = 0, child; child = this.children[i]; i++) {
|
|
|
51 |
if (child.widgetType == "ShowSlide") {
|
|
|
52 |
this._slides.push(child);
|
|
|
53 |
this.option.text = child.title + " (" + (i + 1) + ")";
|
|
|
54 |
this.option.parentNode.insertBefore(this.option.cloneNode(true), this.option);
|
|
|
55 |
}
|
|
|
56 |
}
|
|
|
57 |
this.option.parentNode.removeChild(this.option);
|
|
|
58 |
this.domNode.style.display = "block";
|
|
|
59 |
this.resizeWindow();
|
|
|
60 |
this.gotoSlide(0, true);
|
|
|
61 |
dojo.addOnLoad(dojo.lang.hitch(this, function () {
|
|
|
62 |
var th = window.location.hash;
|
|
|
63 |
if (th.length) {
|
|
|
64 |
var parts = ("" + window.location).split(this.widgetId + "_SlideNo_");
|
|
|
65 |
if (parts.length > 1) {
|
|
|
66 |
setTimeout(dojo.lang.hitch(this, function () {
|
|
|
67 |
this.gotoSlide(parseInt(parts[1]), true);
|
|
|
68 |
}), 300);
|
|
|
69 |
}
|
|
|
70 |
}
|
|
|
71 |
}));
|
|
|
72 |
}, gotoSlide:function (slide, preventSetHash) {
|
|
|
73 |
if (slide == this._slide) {
|
|
|
74 |
return;
|
|
|
75 |
}
|
|
|
76 |
if (!this._slides[slide]) {
|
|
|
77 |
for (var i = 0, child; child = this._slides[i]; i++) {
|
|
|
78 |
if (child.title == slide) {
|
|
|
79 |
slide = i;
|
|
|
80 |
break;
|
|
|
81 |
}
|
|
|
82 |
}
|
|
|
83 |
}
|
|
|
84 |
if (!this._slides[slide]) {
|
|
|
85 |
return;
|
|
|
86 |
}
|
|
|
87 |
if (this.debugPane) {
|
|
|
88 |
if (this._slides[slide].debug) {
|
|
|
89 |
this.debugPane.show();
|
|
|
90 |
} else {
|
|
|
91 |
this.debugPane.hide();
|
|
|
92 |
}
|
|
|
93 |
}
|
|
|
94 |
if (this._slide != -1) {
|
|
|
95 |
while (this._slides[this._slide].previousAction()) {
|
|
|
96 |
}
|
|
|
97 |
}
|
|
|
98 |
if (!preventSetHash) {
|
|
|
99 |
window.location.href = "#" + this.widgetId + "_SlideNo_" + slide;
|
|
|
100 |
}
|
|
|
101 |
if (this._slides[this._slide]) {
|
|
|
102 |
this._slides[this._slide].hide();
|
|
|
103 |
}
|
|
|
104 |
this._slide = slide;
|
|
|
105 |
this.select.selectedIndex = slide;
|
|
|
106 |
var cn = this.contentNode;
|
|
|
107 |
while (cn.firstChild) {
|
|
|
108 |
cn.removeChild(cn.firstChild);
|
|
|
109 |
}
|
|
|
110 |
cn.appendChild(this._slides[slide].domNode);
|
|
|
111 |
this._slides[slide].show();
|
|
|
112 |
}, gotoSlideByEvent:function (event) {
|
|
|
113 |
var node = event.target;
|
|
|
114 |
var type = event.type;
|
|
|
115 |
if (type == "click") {
|
|
|
116 |
if (node.tagName == "OPTION" && node.parentNode == this.select) {
|
|
|
117 |
this.gotoSlide(node.index);
|
|
|
118 |
} else {
|
|
|
119 |
if (node == this.select) {
|
|
|
120 |
this.gotoSlide(node.selectedIndex);
|
|
|
121 |
} else {
|
|
|
122 |
this.nextSlide(event);
|
|
|
123 |
}
|
|
|
124 |
}
|
|
|
125 |
} else {
|
|
|
126 |
if (type == "keydown" || type == "keypress") {
|
|
|
127 |
var key = event.keyCode;
|
|
|
128 |
var ch = event.charCode;
|
|
|
129 |
if (key == 63234 || key == 37) {
|
|
|
130 |
this.previousSlide(event);
|
|
|
131 |
} else {
|
|
|
132 |
if (key == 63235 || key == 39 || ch == 32) {
|
|
|
133 |
this.nextSlide(event);
|
|
|
134 |
}
|
|
|
135 |
}
|
|
|
136 |
}
|
|
|
137 |
}
|
|
|
138 |
}, nextSlide:function (event) {
|
|
|
139 |
if (!this.stopEvent(event)) {
|
|
|
140 |
return false;
|
|
|
141 |
}
|
|
|
142 |
if (!this._slides[this._slide].nextAction(event)) {
|
|
|
143 |
if ((this._slide + 1) != this._slides.length) {
|
|
|
144 |
this.gotoSlide(this._slide + 1);
|
|
|
145 |
return true;
|
|
|
146 |
}
|
|
|
147 |
return false;
|
|
|
148 |
}
|
|
|
149 |
}, previousSlide:function (event) {
|
|
|
150 |
if (!this.stopEvent(event)) {
|
|
|
151 |
return false;
|
|
|
152 |
}
|
|
|
153 |
if (!this._slides[this._slide].previousAction(event)) {
|
|
|
154 |
if ((this._slide - 1) != -1) {
|
|
|
155 |
this.gotoSlide(this._slide - 1);
|
|
|
156 |
return true;
|
|
|
157 |
}
|
|
|
158 |
return false;
|
|
|
159 |
}
|
|
|
160 |
}, stopEvent:function (ev) {
|
|
|
161 |
if (!ev) {
|
|
|
162 |
return true;
|
|
|
163 |
}
|
|
|
164 |
if (ev.type == "click" && (this._slides[this._slide].noClick || this.noClick)) {
|
|
|
165 |
return false;
|
|
|
166 |
}
|
|
|
167 |
var target = ev.target;
|
|
|
168 |
while (target != null) {
|
|
|
169 |
if (target == this.domNode) {
|
|
|
170 |
target = ev.target;
|
|
|
171 |
break;
|
|
|
172 |
}
|
|
|
173 |
target = target.parentNode;
|
|
|
174 |
}
|
|
|
175 |
if (!dojo.dom.isDescendantOf(target, this.nav)) {
|
|
|
176 |
while (target && target != this.domNode) {
|
|
|
177 |
if (target.tagName == "A" || target.tagName == "INPUT" || target.tagName == "TEXTAREA" || target.tagName == "SELECT") {
|
|
|
178 |
return false;
|
|
|
179 |
}
|
|
|
180 |
if (typeof target.onclick == "function" || typeof target.onkeypress == "function") {
|
|
|
181 |
return false;
|
|
|
182 |
}
|
|
|
183 |
target = target.parentNode;
|
|
|
184 |
}
|
|
|
185 |
}
|
|
|
186 |
if (window.event) {
|
|
|
187 |
ev.returnValue = false;
|
|
|
188 |
ev.cancelBubble = true;
|
|
|
189 |
} else {
|
|
|
190 |
ev.preventDefault();
|
|
|
191 |
ev.stopPropagation();
|
|
|
192 |
}
|
|
|
193 |
return true;
|
|
|
194 |
}, popUpNav:function () {
|
|
|
195 |
if (!this.inNav) {
|
|
|
196 |
dojo.lfx.propertyAnimation(this.nav, {"height":{start:5, end:30}}, 250).play();
|
|
|
197 |
}
|
|
|
198 |
clearTimeout(this.inNav);
|
|
|
199 |
this.inNav = setTimeout(dojo.lang.hitch(this, "hideNav"), 2000);
|
|
|
200 |
}, hideNav:function () {
|
|
|
201 |
clearTimeout(this.inNav);
|
|
|
202 |
this.inNav = false;
|
|
|
203 |
dojo.lfx.propertyAnimation(this.nav, {"height":{start:30, end:5}}, 250).play();
|
|
|
204 |
}, resizeWindow:function (ev) {
|
|
|
205 |
dojo.body().style.height = "auto";
|
|
|
206 |
var h = Math.max(document.documentElement.scrollHeight || dojo.body().scrollHeight, dojo.html.getViewport().height);
|
|
|
207 |
dojo.body().style.height = h + "px";
|
|
|
208 |
}});
|
|
|
209 |
|