iui_avatarclassroom.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522
  1. /*
  2. Copyright (c) 2007-9, iUI Project Members
  3. See LICENSE.txt for licensing terms
  4. */
  5. (function() {
  6. var slideSpeed = 2;
  7. var slideInterval = 0;
  8. var currentPage = null;
  9. var currentDialog = null;
  10. var currentWidth = 0;
  11. var currentHash = location.hash;
  12. var hashPrefix = "#_";
  13. var pageHistory = [];
  14. var newPageCount = 0;
  15. var checkTimer;
  16. var hasOrientationEvent = false;
  17. var portraitVal = "portrait";
  18. var landscapeVal = "landscape";
  19. // *************************************************************************************************
  20. window.iui =
  21. {
  22. animOn: true, // Slide animation with CSS transition is now enabled by default where supported
  23. showPage: function(page, backwards)
  24. {
  25. if (page)
  26. {
  27. if (currentDialog)
  28. {
  29. currentDialog.removeAttribute("selected");
  30. currentDialog = null;
  31. }
  32. if (hasClass(page, "dialog"))
  33. showDialog(page);
  34. else
  35. {
  36. var fromPage = currentPage;
  37. currentPage = page;
  38. if (fromPage)
  39. setTimeout(slidePages, 0, fromPage, page, backwards);
  40. else
  41. updatePage(page, fromPage);
  42. }
  43. }
  44. },
  45. showPageById: function(pageId)
  46. {
  47. alert('showpagebyid'+pageId);
  48. var page = iui_gid(pageId);
  49. if (page)
  50. {
  51. var index = pageHistory.indexOf(pageId);
  52. var backwards = index != -1;
  53. if (backwards)
  54. pageHistory.splice(index, pageHistory.length);
  55. iui.showPage(page, backwards);
  56. }
  57. },
  58. showPageByHref: function(href, args, method, replace, cb)
  59. {
  60. alert('showpagebyhref'+href);
  61. var req = new XMLHttpRequest();
  62. req.onerror = function()
  63. {
  64. if (cb)
  65. cb(false);
  66. };
  67. req.onreadystatechange = function()
  68. {
  69. if (req.readyState == 4)
  70. {
  71. if (replace)
  72. replaceElementWithSource(replace, req.responseText);
  73. else
  74. {
  75. var frag = document.createElement("div");
  76. frag.innerHTML = req.responseText;
  77. iui.insertPages(frag.childNodes);
  78. }
  79. if (cb)
  80. setTimeout(cb, 1000, true);
  81. }
  82. };
  83. if (args)
  84. {
  85. req.open(method || "GET", href, true);
  86. req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  87. req.setRequestHeader("Content-Length", args.length);
  88. req.send(args.join("&"));
  89. }
  90. else
  91. {
  92. req.open(method || "GET", href, true);
  93. req.send(null);
  94. }
  95. },
  96. insertPages: function(nodes)
  97. {
  98. var targetPage;
  99. for (var i = 0; i < nodes.length; ++i)
  100. {
  101. var child = nodes[i];
  102. if (child.nodeType == 1)
  103. {
  104. if (!child.id)
  105. child.id = "__" + (++newPageCount) + "__";
  106. var clone = iui_gid(child.id);
  107. if (clone)
  108. clone.parentNode.replaceChild(child, clone);
  109. else
  110. document.body.appendChild(child);
  111. if (child.getAttribute("selected") == "true" || !targetPage)
  112. targetPage = child;
  113. --i;
  114. }
  115. }
  116. if (targetPage)
  117. iui.showPage(targetPage);
  118. },
  119. getSelectedPage: function()
  120. {
  121. for (var child = document.body.firstChild; child; child = child.nextSibling)
  122. {
  123. if (child.nodeType == 1 && child.getAttribute("selected") == "true")
  124. return child;
  125. }
  126. },
  127. isNativeUrl: function(href)
  128. {
  129. for(var i = 0; i < iui.nativeUrlPatterns.length; i++)
  130. {
  131. if(href.match(iui.nativeUrlPatterns[i])) return true;
  132. }
  133. return false;
  134. },
  135. nativeUrlPatterns: [
  136. new RegExp("^http:\/\/maps.google.com\/maps\?"),
  137. new RegExp("^mailto:"),
  138. new RegExp("^tel:"),
  139. new RegExp("^http:\/\/www.youtube.com\/watch\\?v="),
  140. new RegExp("^http:\/\/www.youtube.com\/v\/"),
  141. new RegExp("^javascript:"),
  142. ]
  143. };
  144. // *************************************************************************************************
  145. addEventListener("load", function(event)
  146. {
  147. var page = iui.getSelectedPage();
  148. var locPage = getPageFromLoc();
  149. if (page)
  150. iui.showPage(page);
  151. if (locPage && (locPage != page))
  152. iui.showPage(locPage);
  153. setTimeout(preloadImages, 0);
  154. if (typeof window.onorientationchange == "object")
  155. {
  156. window.onorientationchange=orientChangeHandler;
  157. hasOrientationEvent = true;
  158. setTimeout(orientChangeHandler, 0);
  159. }
  160. setTimeout(checkOrientAndLocation, 0);
  161. checkTimer = setInterval(checkOrientAndLocation, 300);
  162. }, false);
  163. addEventListener("unload", function(event)
  164. {
  165. return;
  166. }, false);
  167. addEventListener("click", function(event)
  168. {
  169. var link = findParent(event.target, "a");
  170. if (link)
  171. {
  172. function unselect() { link.removeAttribute("selected"); }
  173. if (link.href && link.hash && link.hash != "#" && !link.target)
  174. {
  175. link.setAttribute("selected", "true");
  176. iui.showPage(iui_gid(link.hash.substr(1)));
  177. setTimeout(unselect, 500);
  178. }
  179. else if (link == iui_gid("backButton"))
  180. history.back();
  181. else if (link.getAttribute("type") == "submit")
  182. {
  183. var form = findParent(link, "form");
  184. if (form.target == "_self")
  185. {
  186. form.submit();
  187. return; // return so we don't preventDefault
  188. }
  189. submitForm(form);
  190. }
  191. else if (link.getAttribute("type") == "cancel")
  192. cancelDialog(findParent(link, "form"));
  193. else if (link.target == "_replace")
  194. {
  195. link.setAttribute("selected", "progress");
  196. iui.showPageByHref(link.href, null, null, link, unselect);
  197. }
  198. else if (iui.isNativeUrl(link.href))
  199. {
  200. return;
  201. }
  202. else if (link.target == "_webapp")
  203. {
  204. location.href = link.href;
  205. }
  206. else if (!link.target)
  207. {
  208. link.setAttribute("selected", "progress");
  209. iui.showPageByHref(link.href, null, null, null, unselect);
  210. }
  211. else
  212. return;
  213. event.preventDefault();
  214. }
  215. }, true);
  216. addEventListener("click", function(event)
  217. {
  218. var div = findParent(event.target, "div");
  219. if (div && hasClass(div, "toggle"))
  220. {
  221. div.setAttribute("toggled", div.getAttribute("toggled") != "true");
  222. event.preventDefault();
  223. }
  224. }, true);
  225. function getPageFromLoc()
  226. {
  227. var page;
  228. var result = location.hash.match(/#_([^\?_]+)/);
  229. if (result)
  230. page = result[1];
  231. if (page)
  232. page = iui_gid(page);
  233. return page;
  234. }
  235. function orientChangeHandler()
  236. {
  237. var orientation=window.orientation;
  238. switch(orientation)
  239. {
  240. case 0:
  241. setOrientation(portraitVal);
  242. break;
  243. case 90:
  244. case -90:
  245. setOrientation(landscapeVal);
  246. break;
  247. }
  248. }
  249. function checkOrientAndLocation()
  250. {
  251. if (!hasOrientationEvent)
  252. {
  253. if (window.innerWidth != currentWidth)
  254. {
  255. currentWidth = window.innerWidth;
  256. var orient = currentWidth == 320 ? portraitVal : landscapeVal;
  257. setOrientation(orient);
  258. }
  259. }
  260. if (location.hash != currentHash)
  261. {
  262. var pageId = location.hash.substr(hashPrefix.length);
  263. iui.showPageById(pageId);
  264. }
  265. }
  266. function setOrientation(orient)
  267. {
  268. document.body.setAttribute("orient", orient);
  269. setTimeout(scrollTo, 100, 0, 1);
  270. }
  271. function showDialog(page)
  272. {
  273. currentDialog = page;
  274. page.setAttribute("selected", "true");
  275. if (hasClass(page, "dialog") && !page.target)
  276. showForm(page);
  277. }
  278. function showForm(form)
  279. {
  280. form.onsubmit = function(event)
  281. {
  282. event.preventDefault();
  283. submitForm(form);
  284. };
  285. form.onclick = function(event)
  286. {
  287. if (event.target == form && hasClass(form, "dialog"))
  288. cancelDialog(form);
  289. };
  290. }
  291. function cancelDialog(form)
  292. {
  293. form.removeAttribute("selected");
  294. }
  295. function updatePage(page, fromPage)
  296. {
  297. if (!page.id)
  298. page.id = "__" + (++newPageCount) + "__";
  299. location.hash = currentHash = hashPrefix + page.id;
  300. pageHistory.push(page.id);
  301. var pageTitle = iui_gid("pageTitle");
  302. if (page.title)
  303. pageTitle.innerHTML = page.title;
  304. if (page.localName.toLowerCase() == "form" && !page.target)
  305. showForm(page);
  306. var backButton = iui_gid("backButton");
  307. if (backButton)
  308. {
  309. var prevPage = iui_gid(pageHistory[pageHistory.length-2]);
  310. if (prevPage && !page.getAttribute("hideBackButton"))
  311. {
  312. backButton.style.display = "inline";
  313. backButton.innerHTML = prevPage.title ? prevPage.title : "Back";
  314. }
  315. else {
  316. backButton.style.display = "inline";
  317. backButton.innerHTML = 'Sites';
  318. }
  319. }
  320. }
  321. function slidePages(fromPage, toPage, backwards)
  322. {
  323. var axis = (backwards ? fromPage : toPage).getAttribute("axis");
  324. clearInterval(checkTimer);
  325. if (canDoSlideAnim() && axis != 'y')
  326. {
  327. slide2(fromPage, toPage, backwards, slideDone);
  328. }
  329. else
  330. {
  331. slide1(fromPage, toPage, backwards, axis, slideDone);
  332. }
  333. function slideDone()
  334. {
  335. if (!hasClass(toPage, "dialog"))
  336. fromPage.removeAttribute("selected");
  337. checkTimer = setInterval(checkOrientAndLocation, 300);
  338. setTimeout(updatePage, 0, toPage, fromPage);
  339. fromPage.removeEventListener('webkitTransitionEnd', slideDone, false);
  340. }
  341. }
  342. function canDoSlideAnim()
  343. {
  344. return (iui.animOn) && (typeof WebKitCSSMatrix == "object");
  345. }
  346. function slide1(fromPage, toPage, backwards, axis, cb)
  347. {
  348. if (axis == "y")
  349. (backwards ? fromPage : toPage).style.top = "100%";
  350. else
  351. toPage.style.left = "100%";
  352. scrollTo(0, 1);
  353. toPage.setAttribute("selected", "true");
  354. var percent = 100;
  355. slide();
  356. var timer = setInterval(slide, slideInterval);
  357. function slide()
  358. {
  359. percent -= slideSpeed;
  360. if (percent <= 0)
  361. {
  362. percent = 0;
  363. clearInterval(timer);
  364. cb();
  365. }
  366. if (axis == "y")
  367. {
  368. backwards
  369. ? fromPage.style.top = (100-percent) + "%"
  370. : toPage.style.top = percent + "%";
  371. }
  372. else
  373. {
  374. fromPage.style.left = (backwards ? (100-percent) : (percent-100)) + "%";
  375. toPage.style.left = (backwards ? -percent : percent) + "%";
  376. }
  377. }
  378. }
  379. function slide2(fromPage, toPage, backwards, cb)
  380. {
  381. toPage.style.webkitTransitionDuration = '0ms'; // Turn off transitions to set toPage start offset
  382. // fromStart is always 0% and toEnd is always 0%
  383. // iPhone won't take % width on toPage
  384. var toStart = 'translateX(' + (backwards ? '-' : '') + window.innerWidth + 'px)';
  385. var fromEnd = 'translateX(' + (backwards ? '100%' : '-100%') + ')';
  386. toPage.style.webkitTransform = toStart;
  387. toPage.setAttribute("selected", "true");
  388. toPage.style.webkitTransitionDuration = ''; // Turn transitions back on
  389. function startTrans()
  390. {
  391. fromPage.style.webkitTransform = fromEnd;
  392. toPage.style.webkitTransform = 'translateX(0%)'; //toEnd
  393. }
  394. fromPage.addEventListener('webkitTransitionEnd', cb, false);
  395. setTimeout(startTrans, 0);
  396. }
  397. function preloadImages()
  398. {
  399. var preloader = document.createElement("div");
  400. preloader.id = "preloader";
  401. document.body.appendChild(preloader);
  402. }
  403. function submitForm(form)
  404. {
  405. iui.showPageByHref(form.action || "POST", encodeForm(form), form.method);
  406. }
  407. function encodeForm(form)
  408. {
  409. function encode(inputs)
  410. {
  411. for (var i = 0; i < inputs.length; ++i)
  412. {
  413. if (inputs[i].name)
  414. args.push(inputs[i].name + "=" + escape(inputs[i].value));
  415. }
  416. }
  417. var args = [];
  418. encode(form.getElementsByTagName("input"));
  419. encode(form.getElementsByTagName("textarea"));
  420. encode(form.getElementsByTagName("select"));
  421. return args;
  422. }
  423. function findParent(node, localName)
  424. {
  425. while (node && (node.nodeType != 1 || node.localName.toLowerCase() != localName))
  426. node = node.parentNode;
  427. return node;
  428. }
  429. function hasClass(self, name)
  430. {
  431. var re = new RegExp("(^|\\s)"+name+"(iui_gid|\\s)");
  432. return re.exec(self.getAttribute("class")) != null;
  433. }
  434. function replaceElementWithSource(replace, source)
  435. {
  436. var page = replace.parentNode;
  437. var parent = replace;
  438. while (page.parentNode != document.body)
  439. {
  440. page = page.parentNode;
  441. parent = parent.parentNode;
  442. }
  443. var frag = document.createElement(parent.localName);
  444. frag.innerHTML = source;
  445. page.removeChild(parent);
  446. while (frag.firstChild)
  447. page.appendChild(frag.firstChild);
  448. }
  449. function iui_gid(id) { return document.getElementById(id); }
  450. function ddd() { console.log.apply(console, arguments); }
  451. })();