mobile.system 33 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858
  1. <html>
  2. <head>
  3. <title>ArOZ Online Mobile</title>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <link rel="manifest" href="manifest.webmanifest">
  7. <link rel="stylesheet" href="script/semantic/semantic.css">
  8. <link rel="stylesheet" href="script/ao.css">
  9. <script type="text/javascript" src="script/jquery.min.js"></script>
  10. <script type="text/javascript" src="script/semantic/semantic.js"></script>
  11. <script type="text/javascript" src="script/ao_module.js"></script>
  12. <style>
  13. document, body{
  14. height: 100%;
  15. }
  16. .themeColor{
  17. background-color:#1c1c1c;
  18. }
  19. .taskBar{
  20. position:fixed;
  21. top:0px;
  22. left:0px;
  23. width:30px;
  24. height:100%;
  25. overflow: visible !important;
  26. z-index:999;
  27. }
  28. #mainFrame{
  29. width: calc(100% - 30px);
  30. position:fixed;
  31. top:0px;
  32. right:0px;
  33. overflow: hidden;
  34. }
  35. .toggleTaskBar{
  36. position:absolute;
  37. bottom:0px;
  38. right:0px;
  39. margin-right:-20px;
  40. width:30px;
  41. height:90px;
  42. border-radius: 0px 10px 10px 0px;
  43. }
  44. #listMenu{
  45. z-index:1000;
  46. position:fixed;
  47. top:0px;
  48. left:0px;
  49. width:100%;
  50. height:100%;
  51. padding:12px;
  52. background-color: #fcffff;
  53. box-shadow: 3px 3px 5px 0px rgba(207, 207, 207, 0.37);
  54. }
  55. #listMenu .searchBar {
  56. width: 100%;
  57. border-bottom: 2px solid #34b7eb;
  58. }
  59. #listMenu .listItemWrapper {
  60. overflow: hidden;
  61. }
  62. #listMenu .listItemWrapper .groups {
  63. background-color: #f5f5f5;
  64. width: 120px;
  65. height: calc(100% - 40px);
  66. display: inline-block;
  67. overflow-y: auto;
  68. padding-top: 8px;
  69. }
  70. #listMenu .listItemWrapper .groups .item {
  71. padding-left: 7px;
  72. padding-bottom: 6px;
  73. padding-top: 6px;
  74. cursor: pointer;
  75. }
  76. #listMenu .listItemWrapper .groups .item.selected {
  77. color: #34b7eb;
  78. }
  79. #listMenu .listItemWrapper .groups .item:hover {
  80. background-color: #dedede;
  81. }
  82. #listMenuItem{
  83. width: calc(100% - 130px) !important;
  84. float: right;
  85. overflow-y: auto;
  86. height: calc(100% - 40px) !important;
  87. }
  88. #listMenuItem img{
  89. width: 50px;
  90. }
  91. .module.item{
  92. padding:8px;
  93. }
  94. .hideListMenuButton{
  95. position: absolute;
  96. bottom:22px;
  97. left:32px;
  98. cursor:pointer;
  99. }
  100. .hideListMenuButton img{
  101. left:12px;
  102. width:50px;
  103. }
  104. .listMenuLauncher{
  105. position:absolute;
  106. bottom:12px;
  107. left:12px;
  108. cursor:pointer;
  109. }
  110. .blurred{
  111. filter: blur(3px);
  112. }
  113. #backdrop {
  114. background-repeat: no-repeat;
  115. background-size: cover;
  116. background-position: center;
  117. background-image: url('img/desktop/bg/init.jpg');
  118. width: 100%;
  119. height: 100%;
  120. overflow-x: hidden;
  121. pointer-events: none;
  122. }
  123. #windowButtonWrapper{
  124. padding-top:6px;
  125. }
  126. .floatWindowButton{
  127. padding: 5px;
  128. }
  129. .floatWindowButton .minimizedIcon{
  130. width: 20px;
  131. height:20px;
  132. }
  133. .floatWindowButton .normalElements{
  134. padding:8px;
  135. border-bottom: 1px solid #4a4a4a;
  136. cursor:pointer;
  137. vertical-align:middle;
  138. position: relative;
  139. }
  140. .floatWindowButton .normalizedIcon{
  141. width:40;
  142. height:40px;
  143. margin-right:12px;
  144. }
  145. .normalElements .windowTitle{
  146. display:inline-block;
  147. width:200px !important;
  148. vertical-align:middle;
  149. white-space: nowrap;
  150. overflow: hidden;
  151. text-overflow: ellipsis;
  152. }
  153. .fwtab{
  154. position: absolute;
  155. top:0px;
  156. right: 0px;
  157. width: 100%;
  158. height: 100%;
  159. }
  160. #windowWrapper{
  161. height: 100%;
  162. width: 100%;
  163. position: absolute;
  164. top:0px;
  165. right:0px;
  166. }
  167. .floatWindowWrapper{
  168. width: 100%;
  169. height: 100%;
  170. }
  171. .floatWindow{
  172. width: 100%;
  173. height: 100%;
  174. position: absolute;
  175. }
  176. .fwtab iframe{
  177. border: 0px solid transparent;
  178. height: 100%;
  179. }
  180. .floatWindowButton .closebutton{
  181. position: absolute;
  182. font-size: 120%;
  183. color:white;
  184. right: 4px;
  185. top: 4px;
  186. }
  187. </style>
  188. </head>
  189. <body>
  190. <div class="taskBar themeColor" >
  191. <div class="toggleTaskBar themeColor" shown="false" onclick="toggleTaskBar(this);">
  192. <img class="ui image sidebararrow" style="margin-top:8px; margin-left: -10px;" src="img/mobile/keyboard_arrow_right-white-48dp.svg"></img>
  193. </div>
  194. <div class="listMenuLauncher" onclick="showListMenu();">
  195. <img src="img/mobile/apps-white-48dp.svg" style="width: 30px;"/>
  196. </div>
  197. <div id="windowButtonWrapper">
  198. </div>
  199. </div>
  200. <div id="listMenu" style="left:-100%;">
  201. <div class="searchBar" onkeydown="searchModule(event);">
  202. <div class="ui icon fluid input" style="border-radius: 0px !important;">
  203. <input id="searchBar" type="text" placeholder="Search">
  204. <i class="search icon"></i>
  205. </div>
  206. </div>
  207. <dib class="listItemWrapper">
  208. <div class="groups">
  209. <div id="searchResults" class="item" style="display:none;">Search Results</div>
  210. <div class="item groupType selected" group="All">All</div>
  211. <div class="item groupType" group="Media">Media</div>
  212. <div class="item groupType" group="Office">Office</div>
  213. <div class="item groupType" group="Download">Download</div>
  214. <div class="item groupType" group="Files">Files</div>
  215. <div class="item groupType" group="Internet">Internet</div>
  216. <div class="item groupType" group="System Settings">System Settings</div>
  217. <div class="item groupType" group="System Tools">System Tools</div>
  218. <div class="item groupType" group="Utilities">Utilities</div>
  219. <div class="item groupType" group="Other">Other</div>
  220. <div class="hideListMenuButton" onclick="closeListMenu();">
  221. <img class="ui image" src="img/mobile/cancel-black-48dp.svg"></img>
  222. <p>Close Menu</p>
  223. </div>
  224. </div>
  225. <div id="listMenuItem" class="items" align="left">
  226. </div>
  227. </div>
  228. </div>
  229. <div id="mainFrame">
  230. <div id="backdrop">
  231. </div>
  232. <div id="windowWrapper">
  233. </div>
  234. </div>
  235. <script>
  236. var isDesktopMode = true; //Try to emulate Desktop mode
  237. var moduleInstalled = []; //List of installed modules on the system
  238. var desktopThemeList = []; //List of themes installed, same as desktop theme
  239. //initiation Functions
  240. initModuleList();
  241. bindGroupTypeEvents();
  242. initBackdropImage();
  243. //Bind background click
  244. $("#mainFrame").on("touchstart", function(evt){
  245. if ($(this).hasClass("blurred") && $(".taskBar").find(".toggleTaskBar").attr("shown") == "true"){
  246. //hide the taskbar
  247. hideTaskBar();
  248. }
  249. });
  250. //Initialize background image
  251. function initBackdropImage(){
  252. $.get("system/desktop/theme", function(data) {
  253. //Return a list of theme stored on the system
  254. desktopThemeList = data;
  255. $.get("system/desktop/theme?get=true", function(data) {
  256. //Get the user theme settings
  257. changeDesktopTheme(data);
  258. });
  259. });
  260. }
  261. function changeDesktopTheme(themename){
  262. //Match the given theme to the themename
  263. for (var i =0; i < desktopThemeList.length ; i++){
  264. if (desktopThemeList[i].Theme == themename){
  265. var targetImage = desktopThemeList[i].Bglist[0];
  266. $("#backdrop").css("background-image", `url(img/desktop/bg/${themename}/${targetImage})`)
  267. }
  268. }
  269. }
  270. function toggleFullScreen() {
  271. var doc = window.document;
  272. var docEl = doc.documentElement;
  273. var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
  274. var cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;
  275. if(!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement) {
  276. requestFullScreen.call(docEl);
  277. }
  278. else {
  279. cancelFullScreen.call(doc);
  280. }
  281. }
  282. //Sidebar
  283. function toggleTaskBar(obj){
  284. if ($(obj).attr("shown") == "true"){
  285. hideTaskBar();
  286. }else{
  287. showTaskBar();
  288. }
  289. }
  290. function hideTaskBar(){
  291. //Hide the taskBar
  292. $(".taskBar").animate({
  293. width: "30px"
  294. },300, "swing");
  295. $(".taskBar").find('.sidebararrow').attr("src","img/mobile/keyboard_arrow_right-white-48dp.svg");
  296. $(".taskBar").find(".toggleTaskBar").attr("shown","false");
  297. $("#mainFrame").removeClass("blurred");
  298. //Minimize all fwbuttons
  299. $(".floatWindowButton").each(function(){
  300. $(this).find(".minimizedElements").show();
  301. $(this).find(".normalElements").hide();
  302. });
  303. }
  304. function showTaskBar(){
  305. //Show the taskbar
  306. $(".taskBar").animate({
  307. width: "300px"
  308. }, 300, "swing", function(){
  309. //Switch all fwbuttons to normal size
  310. $(".floatWindowButton").each(function(){
  311. $(this).find(".minimizedElements").hide();
  312. $(this).find(".normalElements").show();
  313. });
  314. });
  315. $(".taskBar").find('.sidebararrow').attr("src","img/mobile/keyboard_arrow_left-white-48dp.svg");
  316. $(".taskBar").find(".toggleTaskBar").attr("shown","true");
  317. $("#mainFrame").addClass("blurred");
  318. }
  319. //List all modules
  320. function initModuleList(){
  321. $.ajax({
  322. url: "system/modules/list",
  323. success: function(data) {
  324. moduleInstalled = data;
  325. listModulesType("All");
  326. }
  327. });
  328. }
  329. //ListMenu group classification events
  330. function bindGroupTypeEvents(){
  331. $(".groupType").on("click",function(evt){
  332. //Clear all serach results
  333. $("#searchResults").slideUp('fast');
  334. listModulesType($(this).attr("group"));
  335. $(".groupType.selected").removeClass("selected");
  336. $(this).addClass("selected");
  337. /*
  338. var classificationObject = this;
  339. if ($(this).attr("group") == "All"){
  340. $('.item.module').show();
  341. } else if ($(this).attr("group") == "Other"){
  342. var excludeList = ["Media", "Office", "Download", "Files", "Internet", "System Settings", "System Tools", "Utilties"];
  343. $('.item.module').each(function(){
  344. if (excludeList.includes($(this).attr("group")) == false){
  345. $(this).show();
  346. }else{
  347. $(this).hide();
  348. }
  349. });
  350. }else{
  351. $('.item.module').each(function(){
  352. if ($(this).attr("group") == $(classificationObject).attr("group")){
  353. $(this).show();
  354. }else{
  355. $(this).hide();
  356. }
  357. });
  358. }
  359. */
  360. });
  361. }
  362. function searchModule(event) {
  363. if (event.which == 13) {
  364. var keyword = $("#searchBar").val().toLowerCase();
  365. var results = [];
  366. var lessAccurateResults = [];
  367. $(".groupType.selected").removeClass("selected");
  368. $("#searchResults").addClass("selected").slideDown('fast');
  369. //Load all search results
  370. for (var i = 0; i < moduleInstalled.length; i++) {
  371. var thisModule = moduleInstalled[i];
  372. var pathInfo = thisModule["StartDir"].split("/");
  373. for (var j = 0; j < pathInfo.length; j++) {
  374. pathInfo[j] = pathInfo[j].toLowerCase();
  375. }
  376. if (thisModule["Name"].toLowerCase().includes(keyword)) {
  377. results.push(thisModule);
  378. } else if (pathInfo.includes(keyword.toLowerCase()) || pathInfo.includes(keyword.split(" ").join("_").toLowerCase())) {
  379. lessAccurateResults.push(thisModule);
  380. }
  381. }
  382. results = results.concat(lessAccurateResults);
  383. //Append the results to list
  384. $("#listMenuItem").html("");
  385. for (var i = 0; i < results.length; i++) {
  386. generateListMenuItem(results[i]);
  387. }
  388. if (results.length == 0) {
  389. //Append a custom no results div to the content
  390. $("#listMenuItem").append(`<div class="item module"><span><img class="ui middle aligned tiny image" src="img/system/not found.png" style="padding-right: 12px;">No Results</span></div>`);
  391. }
  392. }
  393. }
  394. function listModulesType(groupType) {
  395. var listingItems = [];
  396. if (groupType == "All") {
  397. //List all of the items
  398. for (var i = 0; i < moduleInstalled.length; i++) {
  399. if (moduleInstalled[i]["StartDir"] != "") {
  400. listingItems.push(moduleInstalled[i]);
  401. }
  402. }
  403. } else if (groupType == "Other") {
  404. var excludeList = ["Media", "Office", "Download", "Files", "Internet", "System Settings", "System Tools", "Utilties"];
  405. //List the Other groups
  406. for (var i = 0; i < moduleInstalled.length; i++) {
  407. if (excludeList.includes(moduleInstalled[i]["Group"]) == false && moduleInstalled[i]["StartDir"] != "") {
  408. listingItems.push(moduleInstalled[i]);
  409. }
  410. }
  411. } else {
  412. //List the given group
  413. for (var i = 0; i < moduleInstalled.length; i++) {
  414. if (moduleInstalled[i]["Group"] == groupType && moduleInstalled[i]["StartDir"] != "") {
  415. listingItems.push(moduleInstalled[i]);
  416. }
  417. }
  418. }
  419. //List the item to the listmenu
  420. $("#listMenuItem").html("");
  421. for (var i = 0; i < listingItems.length; i++) {
  422. var thisModule = listingItems[i];
  423. generateListMenuItem(thisModule);
  424. }
  425. if (listingItems.length == 0) {
  426. $("#listMenuItem").html(`<div class="item module"><span><img class="ui middle aligned tiny image" src="img/system/not found.png" style="padding-right: 12px;">No WebApp found</span></div>`)
  427. }
  428. }
  429. function generateListMenuItem(thisModule) {
  430. var icon = thisModule["IconPath"];
  431. if (icon == "") {
  432. //Use default system icon
  433. icon = "img/system/service.png";
  434. }
  435. var name = thisModule["Name"];
  436. var startdir = thisModule["StartDir"];
  437. var group = thisModule["Group"];
  438. var fwsupport = "false";
  439. if (thisModule["SupportFW"]) {
  440. fwsupport = "true";
  441. }
  442. $("#listMenuItem").append(`<div class="item module" module="${name}" startdir="${startdir}" fw="${fwsupport}" group="${group}" onclick="openModuleFromMenu(this);">
  443. <span>
  444. <img class="ui middle aligned tiny image" src="${icon}" style="padding-right: 12px;"></img>
  445. ${name}
  446. </span>
  447. </div>`);
  448. }
  449. function closeListMenu(callback = undefined){
  450. $("#listMenu").animate({
  451. left: window.innerWidth * -1
  452. },300,"swing", function(){
  453. $(".taskBar").animate({
  454. width: "300px",
  455. },300,"swing", function(){
  456. if (typeof callback != "undefined"){
  457. callback();
  458. }
  459. });
  460. });
  461. }
  462. //Bind swip events
  463. document.addEventListener('touchstart', handleTouchStart, false);
  464. document.addEventListener('touchmove', handleTouchMove, false);
  465. var xDown = null;
  466. var yDown = null;
  467. var swipeTarget = null;
  468. var targetType = "fw";
  469. function getTouches(evt) {
  470. return evt.touches || // browser API
  471. evt.originalEvent.touches; // jQuery
  472. }
  473. function handleTouchStart(evt) {
  474. const firstTouch = getTouches(evt)[0];
  475. if ($(evt.target).hasClass("taskBar")){
  476. swipeTarget = evt.target;
  477. targetType = "taskbar"
  478. }else{
  479. swipeTarget = getFloatWindowObjectFromPath(evt.path);
  480. }
  481. xDown = firstTouch.clientX;
  482. yDown = firstTouch.clientY;
  483. };
  484. function getFloatWindowObjectFromPath(path){
  485. var targetObject = undefined;
  486. targetType = undefined
  487. path.forEach(object => {
  488. if ($(object).hasClass("floatWindowButton")){
  489. targetObject = object
  490. targetType = "fw"
  491. }
  492. })
  493. return targetObject;
  494. }
  495. function handleTouchMove(evt) {
  496. if ( ! xDown || ! yDown ) {
  497. return;
  498. }
  499. var xUp = evt.touches[0].clientX;
  500. var yUp = evt.touches[0].clientY;
  501. var xDiff = xDown - xUp;
  502. var yDiff = yDown - yUp;
  503. if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
  504. if ( xDiff > 0 ) {
  505. /* left swipe */
  506. if (swipeTarget !== undefined && targetType == "fw"){
  507. closeFloatWindow($(swipeTarget).attr("windowId"));
  508. }else if (swipeTarget !== undefined && targetType == "taskbar"){
  509. hideTaskBar();
  510. }
  511. } else {
  512. /* right swipe */
  513. if (swipeTarget !== undefined && targetType == "fw"){
  514. //Allow left or right swipe to remove fw
  515. closeFloatWindow($(swipeTarget).attr("windowId"));
  516. }else if (swipeTarget !== undefined && targetType == "taskbar"){
  517. //Right swipe on taskbar
  518. if ($(swipeTarget).find(".toggleTaskBar").attr("shown") == "true"){
  519. //Already shown. Toggle list menu
  520. showListMenu();
  521. }else{
  522. showTaskBar();
  523. }
  524. }
  525. }
  526. } else {
  527. if ( yDiff > 0 ) {
  528. /* up swipe */
  529. } else {
  530. /* down swipe */
  531. }
  532. }
  533. /* reset values */
  534. xDown = null;
  535. yDown = null;
  536. swipeTarget = null;
  537. };
  538. function showListMenu(callback = undefined){
  539. if ($(".taskBar").find(".toggleTaskBar").attr("shown") == "false"){
  540. $(".taskBar").find(".toggleTaskBar").attr("shown", "true");
  541. $(".taskBar").find('.sidebararrow').attr("src","img/mobile/keyboard_arrow_left-white-48dp.svg");
  542. $("#mainFrame").addClass("blurred");
  543. }
  544. $(".taskBar").animate({
  545. width: window.innerWidth,
  546. },300, "swing", function(){
  547. //Switch all fwbuttons to normal size
  548. $(".floatWindowButton").each(function(){
  549. $(this).find(".minimizedElements").hide();
  550. $(this).find(".normalElements").show();
  551. });
  552. //Show list menu
  553. $("#listMenu").animate({
  554. left: 0
  555. },300,"swing", function(){
  556. if (typeof callback != "undefined"){
  557. callback();
  558. }
  559. });
  560. })
  561. }
  562. function openModule(moduleName) {
  563. $.get("system/modules/getLaunchPara?module=" + moduleName, function(data) {
  564. console.log(data);
  565. if (data.error !== undefined) {
  566. //Something went wrong.
  567. console.log("Unable to open module " + moduleName);
  568. if (data.error == "Not logged in."){
  569. //Session expired
  570. window.location.href = "login.system";
  571. }
  572. }else {
  573. //Launch the given module
  574. var url = data["StartDir"];
  575. var size = [undefined, undefined];
  576. var icon = "img/system/favicon.png";
  577. if (data["IconPath"] != "") {
  578. icon = data["IconPath"];
  579. }
  580. var title = data["Name"];
  581. //Check if the module support fw mode. If yes, launch with fwmode url. IF not, launch to index
  582. if (data["SupportFW"] == true) {
  583. if (data["LaunchFWDir"] != null) {
  584. url = data["LaunchFWDir"];
  585. }
  586. if (data["InitFWSize"] != null) {
  587. size = data["InitFWSize"];
  588. }
  589. }
  590. //Launch the given module
  591. newFloatWindow({
  592. url: url,
  593. width: size[0],
  594. height: size[1],
  595. appicon: icon,
  596. title: title
  597. });
  598. closeListMenu(function(){
  599. hideTaskBar();
  600. });
  601. }
  602. });
  603. }
  604. function openModuleFromMenu(object) {
  605. var moduleName = $(object).attr("module");
  606. openModule(moduleName);
  607. }
  608. //Ask for confirmation before window close
  609. function exitConfirm() {
  610. if (!loggingOut){
  611. return 'Your data might not been saved. Are you sure you want to quit?';
  612. }
  613. }
  614. window.onbeforeunload = exitConfirm;
  615. //In mobile interface, there will be some option ignored by default
  616. function newFloatWindow(options){
  617. //Hide all other floatWindows
  618. $(".floatWindowWrapper").fadeOut("fast");
  619. //Construct the new window
  620. var windowID = Date.now();
  621. var parent = options.parent || "";
  622. var callback = options.callback || "";
  623. //Create a new iframe
  624. $("#windowWrapper").append(` <div class="floatWindowWrapper" windowId="${windowID}">
  625. <div class="floatWindow" windowId="${windowID}" parent="${parent}" callback="${callback}">
  626. <div class="fwtab">
  627. <iframe src="${options.url}" style="width: 100%; height: 100%;"></iframe>
  628. </div>
  629. </div>
  630. </div>`);
  631. //Create the button
  632. var title = options.title || "New FloatWindow";
  633. $("#windowButtonWrapper").append(`
  634. <div class="floatWindowButton" windowID="${windowID}" onclick="focusTab(this)">
  635. <div class="minimizedElements">
  636. <img class="minimizedIcon" src="${options.appicon}">
  637. </div>
  638. <div class="normalElements" style="display:none;">
  639. <img class="ui normalizedIcon middle aligned image" src="${options.appicon}">
  640. <span class="windowTitle" style="color:white;">${title}</span>
  641. <div class="closebutton" onclick="closefw(this);"><i class="remove icon"></i></div>
  642. </div>
  643. </div>
  644. `);
  645. }
  646. ///Functions realted to window resize and auto scaling
  647. function updateWindowDimensions(){
  648. $("#backdrop").css({
  649. width: window.innerWidth,
  650. height: window.innerHeight
  651. });
  652. }
  653. updateWindowDimensions();
  654. $(window).on("resize", function(data){
  655. updateWindowDimensions();
  656. })
  657. //Float Window APIs
  658. function setFloatWindowTitle(id, title){
  659. $(".floatWindowButton").each(function(){
  660. if ($(this).attr("windowId") == id){
  661. $(this).find(".windowTitle").text(title);
  662. }
  663. })
  664. }
  665. function getFloatWindowByID(id){
  666. var targetObejct = undefined;
  667. $(".floatWindowWrapper").each(function(){
  668. if ($(this).attr("windowId") == id){
  669. targetObejct = $(this);
  670. }
  671. });
  672. return targetObejct;
  673. }
  674. function MoveFloatWindowToTop(targetfw){
  675. //Check if this windows is already topped
  676. if ($(targetfw).is(":visible")){
  677. //Already topped
  678. return;
  679. }
  680. $(".floatWindowWrapper").each(function(){
  681. $(this).fadeOut("fast");
  682. });
  683. console.log(targetfw);
  684. $(targetfw).parent().fadeIn("fast");
  685. }
  686. function focusTab(object){
  687. var windowID = $(object).attr("windowId");
  688. //Hide all other flowWindows
  689. $(".floatWindowWrapper").fadeOut("fast");
  690. //Show the target fw
  691. var fw = getFloatWindowByID(windowID);
  692. fw.fadeIn("fast", function(){
  693. hideTaskBar();
  694. });
  695. }
  696. function getFloatWindowByID(id){
  697. var targetObejct = undefined;
  698. $(".floatWindowWrapper").each(function(){
  699. if ($(this).attr("windowId") == id){
  700. targetObejct = $(this);
  701. }
  702. });
  703. return targetObejct;
  704. }
  705. function setFloatWindowResizePolicy(id, allowResize){
  706. //Disabled in mobile mode
  707. }
  708. function closeFloatWindow(windowID){
  709. //Get the content iframe with that windowID
  710. var contentWindow = getFloatWindowByID(windowID).find("iframe")[0].contentWindow;
  711. console.log(contentWindow);
  712. try {
  713. if (contentWindow.ao_module_close === undefined) {
  714. //This module do not use ao_module wrapper. Close it directly.
  715. closeFwProcess(windowID);
  716. } else {
  717. //Pass the closing events to the window itself
  718. contentWindow.ao_module_close();
  719. }
  720. } catch (ex) {
  721. //Problems of closing floatWindow. Force closing.
  722. closeFwProcess(windowID);
  723. }
  724. }
  725. function closefw(object){
  726. var windowID = $(object).parent().parent().attr("windowID");
  727. closeFloatWindow(windowID);
  728. }
  729. function closeFwProcess(windowID){
  730. //Remove the window object
  731. $(".floatWindowWrapper").each(function(){
  732. if ($(this).attr("windowId") == windowID){
  733. $(this).fadeOut("fast",function(){
  734. $(this).remove();
  735. });
  736. }
  737. });
  738. //Remove the button object
  739. $(".floatWindowButton").each(function(){
  740. if ($(this).attr("windowId") == windowID){
  741. $(this).fadeOut("fast",function(){
  742. $(this).remove();
  743. });
  744. }
  745. });
  746. }
  747. </script>
  748. </body>
  749. </html>