OSDN Git Service

Fix a Bug about "kit-src" Attribute and Update an App [0.2.0]
[kit/kit.git] / system.js
1 "use strict";
2
3 //   _    _ _   
4 //  | | _(_) |_ 
5 //  | |/ / | __|
6 //  |   <| | |_ 
7 //  |_|\_\_|\__|
8 //
9 // THIS IS THE KIT KERNEL AND KIT WINDOW SYSTEM
10 // http://web.kitit.ml/
11 // https://github.com/mtsgi/kit
12
13
14 $( document ).ready( kit );
15
16 function kit() {
17     S = System;
18
19     if( !localStorage.getItem( "kit-pid" ) ) processID = 0;
20     else processID = localStorage.getItem( "kit-pid" );
21
22     if( !localStorage.getItem( "kit-username" ) ) localStorage.setItem( "kit-username", "ユーザー" );
23     $( "#kit-header-username" ).text( localStorage.getItem( "kit-username" ) );
24
25     if( localStorage.getItem( "kit-lock" ) == null ) localStorage.setItem( "kit-lock", "false" );
26
27     if( System.bootopt.get("safe") ) $( "#kit-wallpaper" ).css( "background","#404040" );
28     else if( localStorage.getItem( "kit-wallpaper" ) ) $( "#kit-wallpaper" ).css( "background", localStorage.getItem( "kit-wallpaper" ) ).css( "background-size", "cover" ).css( "background-position", "center" );
29
30     if( !localStorage.getItem( "kit-default-browser" ) ) localStorage.setItem( "kit-default-browser", "browser" );
31
32     if( localStorage.getItem("kit-fusen") ){
33         this.list = JSON.parse(localStorage.getItem("kit-fusen"));
34         for( let i in this.list ){
35             KWS.fusen.add(this.list[i]);
36         }
37     }
38     
39     if( localStorage.getItem("kit-darkmode") == "true" ){
40         KWS.darkmode = true;
41         $("#kit-darkmode").attr("href", "system/theme/kit-darkmode.css");
42         $(".winc-darkmode").addClass("kit-darkmode");
43     }
44
45     if( System.bootopt.get("safe") ){
46         $("#kit-theme-file").attr("href", "./system/theme/theme-light.css" );
47     }
48     else{
49         if( !localStorage.getItem( "kit-theme" ) ) localStorage.setItem( "kit-theme", "theme-default.css" );
50         $("#kit-theme-file").attr("href", "./system/theme/" + localStorage.getItem("kit-theme") );
51     }
52
53     if( !localStorage.getItem( "kit-appdir" ) ) localStorage.setItem( "kit-appdir", "./app/" );
54     S.appdir = localStorage.getItem( "kit-appdir" );
55
56     if( localStorage.getItem( "kit-installed" ) ) System.installed = JSON.parse( localStorage.getItem( "kit-installed" ) );
57
58     if( localStorage["kit-userarea"] ) System.userarea = JSON.parse(localStorage["kit-userarea"]);
59     if( localStorage["kit-recycle"] ) System.recycle = JSON.parse(localStorage["kit-recycle"]);
60
61     System.moveDesktop( "1" );
62
63     var clockmove;
64     if( System.bootopt.get("safe") ) clockmove = setInterval( System.clock, 1000 );
65     else  clockmove = setInterval( System.clock, 10 );
66
67     Notification.push( "kitへようこそ", localStorage["kit-username"] + "さん、こんにちは。", "system" );
68     //スタートアップ
69     if( localStorage.getItem( "kit-startup" ) == undefined ) {
70         localStorage.setItem( "kit-startup", new Array( "welcome" ) );
71     }
72     System.startup = localStorage.getItem( "kit-startup" ).split( "," );
73     if( System.bootopt.get("safe") ){
74         Notification.push( "セーフブート", "現在、kitをセーフモードで起動しています。", "system" );
75         System.alert( "セーフブート", "現在、kitをセーフモードで起動しています。<br><a class='kit-hyperlink' onclick='System.reboot()'>通常モードで再起動</a>", "system" );
76     }
77     else for( let i of System.startup ) if( i != "" ) launch( i );
78     
79     $("#kit-header-fullscreen").hide();
80
81     //イベントハンドラ
82     $( "#desktops" ).click( function() {
83         $( "#desktop-" + currentDesktop ).toggleClass( "selected-section" );
84     } ).mousedown( function() {
85         $( ".window" ).css( "opacity", "0.6" );
86     } ).mouseup( function() {
87         $( ".window" ).css( "opacity", "1.0" );
88     } );
89     //タスク一覧
90     $( "#footer-tasks" ).click( function() {
91         if( $( "#kit-tasks" ).is( ":visible" ) ) {
92             $( "#kit-tasks" ).html( "" ).fadeOut( 300 );
93         }
94         else {
95             $( "#task-ctx" ).fadeOut( 200 );
96             $( "#kit-tasks" ).html( $( "#tasks" ).html() ).fadeIn( 300 ).css( "z-index", "9997" );
97         }
98     } );
99     //デスクトップアイコン
100     $.getJSON("config/desktop.json", (data) => {
101         for( let i in data ){
102             $(".desktop-icons").append("<div class='desktop-icon' data-launch='" + i + "'><img src='" + data[i].icon + "'>" + data[i].name + "</div>");
103         }
104         $(".desktop-icon").on("click", function(){
105             launch( $(this).attr("data-launch") );
106         });
107     }).fail( function() {
108         Notification.push( "読み込みに失敗", "デスクトップ(config/desktop.json)の読み込みに失敗しました。", "system" );
109     } );
110     //ランチャー
111     $.getJSON("config/apps.json", System.initLauncher).fail( function() {
112         Notification.push( "ランチャー初期化失敗", "アプリケーション一覧(config/apps.json)の読み込みに失敗しました。", "system" );
113     } );
114     $( "#kit-tasks" ).delegate( ".task", "click", function() {
115         System.close( this.id.slice( 1 ) );
116         $( this ).hide();
117     } );
118     //通知バー
119     $( "#footer-noti" ).click( function() {
120         $( "#last-notification" ).hide( "drop", {direction: "right"}, 300 );
121         if( $( "#notifications" ).is( ":visible" ) ) {
122             $( "#notifications" ).hide( "drop", {direction: "right"}, 300 );
123         }
124         else {
125             $( "#notifications" ).show( "drop", {direction: "right"}, 300 );
126         }
127     } );
128     $( "#last-notification-close" ).click( function() {
129         $( "#last-notification" ).hide( "drop", {direction: "right"}, 300 );
130     } );
131     $("#notifications-dnp").prop("checked", false).on("change", ()=>{
132         if( $("#notifications-dnp").is(":checked") ){
133             Notification.goodnight = true;
134         }
135         else Notification.goodnight = false;
136     });
137     //電源管理
138     $( ".power-button" ).click( function() {
139         $( "#notifications" ).hide( "drop", {direction: "right"}, 300 );
140         $( "#last-notification" ).hide( "drop", {direction: "right"}, 300 );
141         $( "#kit-wallpaper" ).css( "filter", "blur(5px)" );
142         $( "footer, header, #launcher, #task-ctx, .dropdown, #desktop-" + currentDesktop ).hide();
143         $( "#kit-power" ).show();
144     } );
145     $( "#kit-power-back" ).click( function() {
146         $( "section, header, footer, #kit-wallpaper, .dropdown" ).css( "filter", "none" );
147         $( "footer, header, #desktop-" + currentDesktop ).show();
148         $( "#kit-power" ).hide();
149     } );
150     $( "#kit-power-shutdown" ).click( function() {
151         System.shutdown();
152     } );
153     $( "#kit-power-reboot" ).click( function() {
154         System.reboot();
155     } );
156     $( "#kit-power-suspend" ).click( function() {
157         $( "section, header, footer, #kit-wallpaper" ).css( "filter", "none" );
158         $( "#kit-power" ).fadeOut( 300 );
159         System.alert("サスペンド機能", "サスペンド機能はこのバージョンのkitではサポートされていません。");
160     } );
161     $( "#kit-power-lock" ).click( function() {
162         System.lock();
163     } );
164     $( "#lock-password" ).on( 'keypress', function( e ) {
165         if( e.which == 13 ) $( "#lock-unl" ).click();
166     } );
167     $( "#lock-unl" ).on( 'click', function() {
168         if( !localStorage.getItem( "kit-password" ) || $( "#lock-password" ).val() == localStorage.getItem( "kit-password" ) ) {
169             $( "header, footer" ).show();
170             $( "section, header, footer, #kit-wallpaper" ).css( "filter", "none" );
171             $( "#lock-password" ).val( "" );
172             System.moveDesktop(1);
173         }
174         else $( "#lock-password" ).effect( "bounce", {distance: 12, times: 4}, 500 );
175     } ).hover( function() {
176         $( "#lock-unl span" ).removeClass( "fa-lock" ).addClass( "fa-lock-open" );
177     }, function() {
178         $( "#lock-unl span" ).removeClass( "fa-lock-open" ).addClass( "fa-lock" );
179     } );
180     //ランチャー起動
181     $( "#launch" ).click( function() {
182         $( "#notifications" ).hide( "drop", {direction: "right"}, 300 );
183         if( $( "#launcher" ).is( ":visible" ) ) {
184             $( "#kit-wallpaper" ).css( "filter", "none" );
185             $( "#desktop-" + currentDesktop ).show();
186             $( "#launcher" ).hide();
187         }
188         else {
189             $( "#kit-wallpaper" ).css( "filter", "blur(5px)" )
190             $( "section, #task-ctx" ).hide();
191             $( "#launcher" ).show();
192         }
193     } );
194
195     //検索バー
196     $( "#milp" ).val( "" ).on( "focus", function() {
197         $( "#kit-milp" ).show();
198     } ).on( "blur", function() {
199         $( "#kit-milp" ).fadeOut( 200 );
200     } ).on( 'keydown keyup keypress change', function() {
201         $( "#kit-milp-text" ).text( $( this ).val() );
202     } ).keypress( function( e ) {
203         if( e.which == 13 ) $( "#kit-milp-launch" ).click();
204     } );
205     $( "#kit-milp-launch" ).click( function() {
206         if( $("#milp").val() == "kit" ){
207             System.alert("", "<div style='text-align:left;'> _    _ _ <br>| | _(_) |_ <br>| |/ / | __|<br>|   〈| | |_ <br>|_|\_ \ _\__|</div><hr>", S.version);
208             return;
209         }
210         let _app = $( "#milp" ).val().split(",")[0];
211         let _args = null;
212         try {
213             if( $( "#milp" ).val().split(",")[1] ){
214                 _args = JSON.parse( $( "#milp" ).val().split(",").slice(1).join() );
215             }
216         }
217         catch(error) {
218             Notification.push("引数の解釈に失敗", error, "system");
219         }
220         launch( _app, _args );
221     } );
222     $( "#kit-milp-search" ).click( function() {
223         launch( "browser", { "url" : "https://www.bing.com/search?q=" + $( "#milp" ).val() } );
224     } );
225     $( "#kit-milp-wikipedia" ).click( function() {
226         launch( "browser", { "url" : "https://ja.wikipedia.org/wiki/" + $( "#milp" ).val() } );
227     } );
228
229     //サウンドドロップダウン
230     $("#dropdown-sound-slider").slider({
231         min: 0, max: 100, step: 1, value: 100,
232         change: (e, ui) => {
233             System.audio.level = ui.value;
234             $("#dropdown-sound-level").text(ui.value);
235             localStorage.setItem("kit-audio-level", ui.value);
236             for( let i in System.audio.list ){
237                 System.audio.list[i].volume = System.audio.level / 100;
238             }
239             if( ui.value == 0 ) $("#kit-header-sound-icon").removeClass("fa-volume-up").addClass("fa-volume-mute");
240             else $("#kit-header-sound-icon").removeClass("fa-volume-mute").addClass("fa-volume-up");
241         }
242     });
243     if( localStorage["kit-audio-level"] ) System.audio.volume( localStorage["kit-audio-level"] );
244
245     $("#dropdown-sound-silent").prop("checked", false).on("change", ()=>{
246         if( $("#dropdown-sound-silent").is(":checked") ){
247             System.audio.silent = true;
248             $("#kit-header-sound-icon").removeClass("fa-volume-up").addClass("fa-volume-mute");
249         }
250         else{
251             System.audio.silent = false;
252             $("#kit-header-sound-icon").removeClass("fa-volume-mute").addClass("fa-volume-up");
253         }
254     });
255
256     $("#kit-header-user").on("click", ()=>{
257         launch("user");
258     });
259
260     //コンテキストメニュー
261     $(":root section:not(#desktop-l)").on("contextmenu", function() {
262         let _ptelem = $( document.elementFromPoint(S.mouseX, S.mouseY) );
263         S.selectedElement = _ptelem;
264         S.selectedText = window.getSelection();
265         $( "#kit-context-input" ).val( S.selectedText );
266         if( $( "#kit-context-input" ).val() == "" ) $("#kit-contextgroup-text").hide();
267         else $("#kit-contextgroup-text").show();
268         if( _ptelem[0].id == "desktop-" + currentDesktop ){
269             $("#kit-contextgroup-desktop").show();
270             $("#kit-contextgroup-elem").hide();
271         }
272         else{
273             $("#kit-contextgroup-desktop").hide();
274             $("#kit-contextgroup-elem").show();
275         }
276         $( "#kit-context-elem" ).text( _ptelem.prop("tagName").toLowerCase() + "要素" );
277         $("#kit-contextgroup-custom").hide();
278
279         let  _ctxid = _ptelem.attr("data-kit-contextid") || _ptelem.attr("kit-context");
280         if( _ctxid ){
281             $("#kit-contextgroup-custom").show().html('<div id="kit-context-custom"></div>');
282             let  _ctxname = KWS.context[_ctxid].name || _ctxid; 
283             $("#kit-context-custom").text( _ctxname );
284             for( let i in KWS.context[_ctxid]){
285                 if( i == "name" ) continue;
286                 $("#kit-contextgroup-custom").append("<a id='kit-context-" + _ctxid + "-" + i + "'><span class='fa " + KWS.context[_ctxid][i].icon + "'></span> " + KWS.context[_ctxid][i].label +"</a>");
287                 $("#kit-context-" + _ctxid + "-" + i).on("click", () => {
288                     KWS.context[_ctxid][i].function();
289                     $("#kit-context").fadeOut(300);
290                 });
291             }
292         }
293         if( _ptelem[0].id ) $( "#kit-context-elem" ).append( "#" + _ptelem[0].id );
294         $( "#kit-context-size" ).text( _ptelem[0].clientWidth + "✕" + _ptelem[0].clientHeight );
295         $("#kit-context").toggle().css("left", S.mouseX).css("top", S.mouseY);
296         return false;
297     });
298     $("#kit-context-open").on("click", function(){
299         S.alert("要素", S.selectedElement.clone());
300     });
301     $("#kit-context-save").on("click", function(){
302         S.obj2img( S.selectedElement , true );
303     });
304     $( "#kit-context-search" ).on("click", function(){
305         $("#kit-context").fadeOut(300);
306         launch( "browser", { "url" : "https://www.bing.com/search?q=" + $( "#kit-context-input" ).val() } );
307     });
308     $( "#kit-context-input" ).keypress( function( e ) {
309         if( e.which == 13 ) $( "#kit-context-search" ).click();
310     } );
311     $("#kit-context a").on("click", function(){
312         $("#kit-context").fadeOut(300);
313     });
314     $("#kit-context-vacuum").on("click", function(){
315         for( let i in process ){
316             KWS.vacuum( S.mouseX, S.mouseY );    
317         }
318         setTimeout(() => {
319             $(".window").css("transition", "none");
320         }, 500);
321     });
322     $("#kit-context-fusen").on("click", function(){
323         KWS.fusen.add("");
324     });
325
326
327     $("section").on("click", function(){
328         $("#kit-context").fadeOut(300);
329     })
330
331     $( document ).delegate( "a", "click", function() {
332         if( this.href ) {
333             launch( localStorage.getItem( "kit-default-browser" ), { "url" : this.href } );
334             return false;
335         }
336     } ).on("mousemove", function(event){
337         System.mouseX = event.clientX;
338         System.mouseY = event.clientY;
339     }).delegate( ".textbox", "keypress", function( e ) {
340         if( e.which == 13 && this.id ){
341             if( $("#" + this.id + " + .kit-button").length ){
342                 Notification.push("debug", this.id, "system");
343                 $("#" + this.id + " + .kit-button").click();
344             }
345             else if( $("#" + this.id + " + kit-button").length ){
346                 Notification.push("debug", this.id, "system");
347                 $("#" + this.id + " + kit-button").click();
348             }
349         }
350     } );
351
352     window.onresize = () => {
353         System.display.width = window.innerWidth;
354         System.display.height = window.innerWidth;
355
356         if( KWS.fullscreen.pid ){
357             KWS.resize( KWS.fullscreen.pid, System.display.width, System.display.height - 30 );
358         }
359     }
360
361     if( localStorage.getItem( "kit-lock" ) == "true" ){
362         $("section").hide();
363         setTimeout(() =>  System.lock(), 100);
364     }
365 }
366
367 function launch( str, args, dir ) {
368     pid = processID;
369     System.args[pid] = args;
370     System.launchpath[pid] = dir || System.appdir + str;
371
372     if( System.appCache[str] ) {
373         if( KWS.fullscreen.pid ) KWS.unmax(KWS.fullscreen.pid);
374         //app[str].open();
375         appData( System.appCache[str] );
376     }
377     else {
378         try{
379             $.getJSON( S.launchpath[pid] + "/define.json", appData ).fail( function() {
380                 Notification.push("kitアプリをロードできません", str + "を展開できませんでした。アプリが存在しないか、クロスオリジン要求がブロックされている可能性があります。詳細:https://kitdev.home.blog/", "system");
381                 //System.alert( "起動エラー", "アプリケーションの起動に失敗しました<br>アプリケーション" + str + "は存在しないかアクセス権がありません(pid:" + processID + ")。ヘルプは<a class='kit-hyperlink' href='https://kitdev.home.blog/'>こちら</a>" );
382             } );
383         }
384         catch(error){
385             Notification.push( "System Error", error, "system" );
386         }
387     }
388 }
389
390 function appData( data ) {
391     var pid = processID;
392     process[String( pid )] = {
393         id: data.id,
394         time: System.time.obj.toLocaleString(),
395         isactive: false,
396         preventclose: false,
397         title: data.name
398     };
399     System.appCache[data.id] = data;
400     let _taskAppend = "<span id='t" + pid + "'>";
401     if( data.icon && data.icon != "none" ) _taskAppend += "<img src='" + S.launchpath[pid] + "/" + data.icon + "'>";
402     _taskAppend += "<span id='tname" + pid + "'>" + data.name + "<span></span>";
403     $( "#tasks" ).append( _taskAppend );
404     //タスクバーのクリック挙動
405     $( "#t" + pid ).addClass( "task" ).click( function() {
406         if( $(this).hasClass("t-active") || $(this).hasClass("task-min") ) KWS.min( pid );
407         else{
408             $("#w"+pid).css("z-index", KWS.windowIndex + 1);
409             KWS.refreshWindowIndex();
410         }
411     } );
412     $( "#t" + pid ).addClass( "task" ).on( "mouseenter", function() {
413         $( "#task-ctx-name" ).text( data.name );
414         if( data.icon && data.icon != "none" ) $( "#task-ctx-img" ).attr( "src", System.launchpath[pid] + "/" + data.icon );
415         else $( "#task-ctx-img" ).hide();
416         $( "#task-ctx-ver" ).text( data.version + "/pid:" + pid );
417         $( "#task-ctx-info" ).off().on( "click", function() { System.appInfo( pid )} );
418         $( "#task-ctx-sshot" ).off().on( "click", function() { S.screenshot(pid, true) } );
419         $( "#task-ctx-min" ).off().on( "click", function() { KWS.min( String(pid) ) } );
420         if( $(this).hasClass("t-active") ) $( "#task-ctx-front" ).hide();
421         else $( "#task-ctx-front" ).show();
422         $( "#task-ctx-front" ).off().on( "click", function() {
423             $("#w"+pid).css("z-index", KWS.windowIndex + 1);
424             KWS.refreshWindowIndex();
425         } );
426         $( "#task-ctx-close" ).off().on( "click", () => { System.close( String(pid) ) } );
427         $( "#task-ctx-kill" ).off().on( "click", () => { System.kill( String(data.id) ) } );
428         const _ctxleft = $( "#t" + pid ).offset().left;
429         const _ctxtop = window.innerHeight - $( "#t" + pid ).offset().top;
430         if( _ctxleft != $( "#task-ctx" ).offset().left ) {
431             $( "#task-ctx" ).hide();
432         }
433         $( "#task-ctx" ).css( "left", _ctxleft ).css( "bottom", _ctxtop ).show();
434     } );
435     $( "section, #kit-tasks" ).on( "mouseenter", function() {
436         $( "#task-ctx" ).fadeOut( 200 );
437     } );
438     $( "#t" + pid ).hover( function() {
439         prevWindowIndex = $( "#w" + pid ).css( "z-index" );
440         $( "#w" + pid ).addClass( "win-highlight" );
441     }, function() {
442         $( "#w" + pid ).removeClass( "win-highlight" );
443     } );
444     let _windowAppend = "<div id='w" + pid + "'><div id='wt" + pid + "' class='wt'><i class='wmzx'><span id='wm" + pid + "'></span>";
445     if( data.support && data.support['fullscreen'] == true ) _windowAppend += "<span id='wz" + pid + "'></span>";
446     _windowAppend += "<span id='wx" + pid + "'></span></i>";
447     if( data.icon && data.icon != "none" ) _windowAppend += "<img src='" + S.launchpath[pid] + "/" + data.icon + "'>";
448     _windowAppend += "<span id='wtname" + pid + "'>" + data.name + "</span></div><div class='winc winc-" + data.id + "' id='winc" + pid + "'></div></div>";
449     $( "#desktop-" + currentDesktop ).append( _windowAppend );
450
451     if( data.support && data.support['darkmode'] == true ) $("#winc"+pid).addClass("winc-darkmode");
452     if( KWS.darkmode ) $("#winc"+pid).addClass("kit-darkmode");
453
454     if( data.size ){
455         $("#winc"+pid).css("width", data.size.width).css("height", data.size.height);
456     }
457     if( data.resize ){
458         let _minwidth = 200, _minheight = 40;
459         if( data.resize.minWidth ) _minwidth = data.resize.minWidth;
460         if( data.resize.minHeight ) _minheight = data.resize.minHeight;
461         $("#winc"+pid).windowResizable({
462             minWidth: _minwidth,
463             minHeight: _minheight
464         });
465     }
466
467     let windowPos = 50 + ( pid % 10 ) * 20;
468     KWS.windowIndex ++;
469     $( "#w"+pid ).addClass( "window" ).pep({
470         elementsWithInteraction: ".winc, .ui-resizable-handle",
471         useCSSTranslation: false,
472         disableSelect: false,
473         shouldEase:     true,
474         initiate: function(){
475             $(this.el).addClass("ui-draggable-dragging");
476             KWS.windowIndex ++;
477             this.el.style.zIndex = KWS.windowIndex;
478             KWS.refreshWindowIndex();
479         },
480         stop: function(){
481             this.el.style.transition = "none";
482             $(this.el).removeClass("ui-draggable-dragging");
483         }
484     }).on( "mousedown", function(){
485         $(".window").css( "transition", "none" );
486         $(this).css("z-index", KWS.windowIndex + 1);
487         KWS.refreshWindowIndex();
488     } ).css( "left", windowPos + "px" ).css( "top", windowPos + "px" ).css( "z-index",  KWS.windowIndex );
489     KWS.refreshWindowIndex();
490     $( "#wm" + pid ).addClass( "wm fa fa-window-minimize" ).click( () => KWS.min( String(pid) ) );
491     $( "#wz" + pid ).addClass( "wz fas fa-square" ).click( () => KWS.max( String(pid) ) );
492     $( "#wx" + pid ).addClass( "wx fa fa-times" ).click( () => System.close( String(pid) ) );
493     $( "#winc" + pid ).resizable( {
494         minWidth: "200"
495     } ).load( System.launchpath[pid] + "/" + data.view, (r, s, x) =>{
496         if( s == "error" ){
497             Notification.push("起動に失敗:" + x.status, x.statusText);
498             return false;
499         }
500         if( !data.script || data.script != "none" ) $.getScript( System.launchpath[pid] + "/" + data.script, () => {
501             if( !data.support || data.support['kaf'] != false ) App.kaf(pid);
502         } ).fail( () =>  App.kaf(pid) );
503         else if( !data.support || data.support['kaf'] != false ) App.kaf(pid);
504         if( data.css != "none" && $("#kit-style-"+data.id).length == 0 ){
505             $( "head" ).append( '<link href="' + System.launchpath[pid] + '/' + data.css + '" rel="stylesheet" id="kit-style-' + data.id + '"></link>' );
506         }        
507         processID++;
508         localStorage.setItem( "kit-pid", processID );
509     } );
510 }
511
512 //非推奨メソッド
513 function close( str ) {
514     System.close( str )
515 }
516
517 //非推奨メソッド
518 function kill( str ) {
519     System.kill(str)
520 }
521
522 const System = new function() {
523     this.version = "0.2.0";
524     this.username = localStorage.getItem("kit-username");
525     this.appdir = localStorage.getItem("kit-appdir");
526
527     this.bootopt = new URLSearchParams(location.search);
528
529     this.mouseX = 0;
530     this.mouseY = 0;
531
532     this.display = {
533         "width": window.innerWidth,
534         "height": window.innerHeight
535     }
536
537     this.selectedElement = null;
538     this.selectedText = null;
539
540     this.dom = function(_pid, ..._elems) {
541         let q = "";
542         if( !_elems.length ) q = ",#winc" + _pid;
543         else for( let i of _elems ){
544             q += ",#winc" + _pid + " " + i;
545         }
546         return $( q.substring(1) );
547     }
548
549     this.qs = ( _pid, ..._elems ) => {
550         let q = "";
551         if( !_elems.length ) q = ",#winc" + _pid;
552         else for( let i of _elems ) q += ",#winc" + _pid + " " + i;
553         return document.querySelectorAll( q.substring(1) )
554     }
555
556     this.userarea = new Object();
557     this.recycle = new Object();
558
559     this.appCache = {};
560     //アプリ引数
561     this.args = {};
562     //アプリ起動パス
563     this.launchpath = {};
564
565     this.support = $.support;
566     this.debugmode = false;
567
568     this.battery = null;
569
570     this.log = new Array();
571     this.noop = () => {}
572
573     this.setBattery = function(){
574         if( navigator.getBattery ) navigator.getBattery().then((e)=>{
575             let _lv =  e.level * 100;
576             System.battery = _lv;
577             return _lv;
578         });
579     }
580
581     this.screenshot = function( _pid, _popup ){
582         let _elem = document.querySelector("body");
583         if( _pid ) _elem = document.querySelector("#w"+_pid);
584         html2canvas( _elem ).then(canvas => {
585             if( _popup ){
586                 canvas.style.border = "1px solid #909090";
587                 S.save( canvas.toDataURL("image/png"), "image" );
588             }
589             return canvas;
590         });
591     }
592
593     this.obj2img = function( _obj, _popup ){
594         let _elem = _obj[0];
595         html2canvas( _elem ).then(canvas => {
596             if( _popup ){
597                 canvas.style.border = "1px solid #909090";
598                 S.save( canvas.toDataURL("image/png"), "image" );
599             }
600             return canvas;
601         });
602     }
603
604     this.save = function(data, type){
605         launch("fivr", { "save" : data, "type" : type });
606     }
607
608     this.open = function(filename){
609         launch("fivr", { "open" : filename });
610     }
611
612     this.preventClose = function( _pid ){
613         if( !process[_pid] ) return false;
614         process[_pid].preventclose = true;
615         return true;
616     }
617     
618     this.shutdown = function(_opt) {
619         $( "#last-notification-close" ).click();
620         $( "#kit-power-back" ).click();
621         for( let i in process ) {
622             if( process[i].preventclose == true ){
623                 S.dialog( "シャットダウンの中断", "pid" + System.appCache[process[i].id].name + "がシャットダウンを妨げています。<br>強制終了してシャットダウンを続行する場合は[OK]を押下してください。", () => {
624                     process[i].preventclose = false;
625                     System.shutdown();
626                 } );
627                 return false;
628             }
629             else System.close( i );
630         }
631         $( "section" ).hide();
632         $( "body" ).css( "background-color", "black" );
633         $( "header, footer" ).fadeOut( 300 );
634         $( "#kit-wallpaper" ).fadeOut( 1500 );
635         if( _opt == "reboot" ) location.href = "autorun.html";
636     }
637
638     this.reboot = function() {
639         System.shutdown("reboot");
640     }
641
642     this.lock = function(){
643         System.moveDesktop( "l" );
644
645         $( "#lock-user-icon" ).css( "background", localStorage.getItem( "kit-user-color" ) );
646         $( "section, header, footer" ).css( "filter", "none" );
647         $( "#kit-wallpaper" ).css( "filter", "blur(20px)" );
648         $( "header, footer, #kit-power" ).hide();
649
650         $( "#lock-username" ).text( localStorage.getItem( "kit-username" ) );
651         if( localStorage.getItem( "kit-password" ) ) $( "#lock-password" ).show();
652         else $( "#lock-password" ).hide();
653     }
654
655     this.alert = function( title, content, winname ) {
656         launch( "alert", [title, content, winname] );
657     }
658
659     this.dialog = function( title, content, func ){
660         launch("dialog", {
661             "title": title,
662             "content": content,
663             "func": func
664         })
665     }
666
667     this.appInfo = function( _pid ){
668         let _title = "", _content = "";
669         let ac = System.appCache[process[_pid].id];
670         let _lp = System.launchpath[_pid];
671         if( ac ){
672             _title = ac.name + " " + ac.version;
673             if( ac.icon && ac.icon != "none" ) _content = "<img style='height: 96px' src='" + _lp + "/" + ac.icon + "'><br>";
674             for( let i in ac ){
675                 if( typeof ac[i] != "object" ) _content += "<div><span style='font-weight: 100'>" + i + " </span>" + ac[i] + "</div>";
676             }
677             _content += "<br><span style='font-weight: 100'>起動パス " + _lp + "</span><br><br>"
678         }
679         else _title = "取得に失敗しました";
680         System.alert( _title, _content );
681     }
682
683     this.installed = new Array();
684  
685     //非推奨です(削除予定)。
686     this.min = function( _str ) {
687         KWS.min( _str );
688     }
689
690     this.close = function( _str ) {
691         let _pid = String( _str );
692         $( "#w" + _pid ).remove();
693         $( "#t" + _pid ).remove();
694         $( "#task-ctx" ).hide();
695         delete process[_pid];
696         KWS.refreshWindowIndex();
697     }
698
699     this.kill = function( _str ){
700         for( let pid in process ) {
701             if( process[pid] && process[pid].id == _str ) System.close( pid );
702         }
703     }
704     
705     this.vacuum = function( _left, _top ){
706         KWS.vacuum( _left, _top ); //非推奨です(削除予定)。
707     }
708
709     this.time = {
710         "obj" : new Date(),
711         "y" : "1970",
712         "m" : "1",
713         "d" : "1",
714         "h" : "00",
715         "i" : "00",
716         "s" : "00",
717         "ms" : "0"
718     }
719
720     this.clock = function() {
721         let DD = new Date();
722         S.time.obj = DD;
723         let Year = DD.getFullYear();
724         S.time.day = DD.getDay();
725         S.time.y = Year;
726         let Month = ( "00" + Number(DD.getMonth()+1) ).slice( -2 );
727         S.time.m = Month;
728         let DateN = ( "00" + DD.getDate() ).slice( -2 );
729         S.time.d = DateN;
730         let Hour = ( "00" + DD.getHours() ).slice( -2 );
731         S.time.h = Hour;
732         let Min = ( "00" + DD.getMinutes() ).slice( -2 );
733         S.time.i = Min;
734         let Sec = ( "00" + DD.getSeconds() ).slice( -2 );
735         S.time.s = Sec;
736         $( ".os-time" ).text( Hour + ":" + Min + ":" + Sec );
737         let MS = DD.getMilliseconds();
738         S.time.ms = MS;
739         let circle = {
740             outer: { radius: .9, color: "transparent" },
741             inner: { radius: .85, color: "transparent" }
742         }
743         let lines = {
744             long: { from: .8, to: .7, width: 2, color: "#303030" },
745             short: { from: .8, to: .75, width: 1, color: "#a0a0a0" }
746         }
747         let hands = {
748             hour: { length: .4, width: 3, cap: "butt", color: "#303030", ratio: .2 },
749             minute: { length: .67, width: 2, cap: "butt", color: "#303030", ratio: .2 },
750             second: { length: .67, width: 1, cap: "butt", color: "dodgerblue", ratio: .2 }
751         }
752         let canvas = $(".dropdown-clock-canvas")[0];
753         canvas.width = "200", canvas.height = "200";
754         let context = canvas.getContext("2d");
755         let center = { x: Math.floor(canvas.width / 2), y: Math.floor(canvas.height / 2) };
756         let radius = Math.min(center.x, center.y), angle, len;
757         context.beginPath();context.fillStyle = circle.outer.color;
758         context.arc(center.x, center.y, radius * circle.outer.radius, 0, Math.PI * 2, false);
759         context.fill();context.beginPath();context.fillStyle = circle.inner.color;
760         context.arc(center.x, center.y, radius * circle.inner.radius, 0, Math.PI * 2, false);
761         context.fill();
762         for( let i=0; i<60; i++ ){
763             angle = Math.PI * i / 30;
764             context.beginPath();
765             let line = ( i%5 == 0 ) ? lines.long : lines.short;
766             context.lineWidth = line.width, context.strokeStyle = line.color;
767             context.moveTo(center.x + Math.sin(angle) * radius * line.from, center.y - Math.cos(angle) * radius * line.from)
768             context.lineTo(center.x + Math.sin(angle) * radius * line.to, center.y - Math.cos(angle) * radius * line.to);
769             context.stroke();
770         }
771         angle = Math.PI * ( Number(Hour)+Number(Min)/60 ) / 6, len = radius * hands.hour.length;
772         context.beginPath(), context.lineWidth = hands.hour.width;
773         context.lineCap = hands.hour.cap, context.strokeStyle = hands.hour.color;
774         context.moveTo(center.x - Math.sin(angle) * len * hands.hour.ratio, center.y + Math.cos(angle) * len * hands.hour.ratio);
775         context.lineTo(center.x + Math.sin(angle) * len, center.y - Math.cos(angle) * len), context.stroke();
776         angle = Math.PI * ( Number(Min)+Number(Sec) / 60) / 30, len = radius * hands.minute.length;
777         context.beginPath(), context.lineWidth = hands.minute.width;
778         context.lineCap = hands.minute.cap, context.strokeStyle = hands.minute.color;
779         context.moveTo(center.x - Math.sin(angle) * len * hands.minute.ratio, center.y + Math.cos(angle) * len * hands.minute.ratio);
780         context.lineTo(center.x + Math.sin(angle) * len, center.y - Math.cos(angle) * len), context.stroke();
781         angle = Math.PI * Number(Sec) / 30, len = radius * hands.second.length;
782         context.beginPath(), context.lineWidth = hands.second.width;
783         context.lineCap = hands.second.cap, context.strokeStyle = hands.second.color;
784         context.moveTo(center.x - Math.sin(angle) * len * hands.second.ratio, center.y + Math.cos(angle) * len * hands.second.ratio);
785         context.lineTo(center.x + Math.sin(angle) * len, center.y - Math.cos(angle) * len), context.stroke();
786     }
787
788     this.changeWallpaper = function( str ) {
789         $( "#kit-wallpaper" ).css( "background", str ).css( "background-size", "cover" );
790         localStorage.setItem( "kit-wallpaper", str )
791     }
792
793     this.moveDesktop = function( str ) {
794         str = String( str );
795         $( "section" ).hide();
796         $( "#desktop-" + str ).show();
797         $( "#desktops" ).html( "<span class='far fa-clone'></span>Desktop" + str );
798         currentDesktop = str;
799     }
800
801     this.avoidMultiple = function( _pid, _alert ) {
802         let _id = process[_pid].id;
803         let _cnt = 0;
804         for( let i in process ) {
805             if( process[i].id == _id ) _cnt += 1;
806         }
807         Notification.push( "debug", _cnt );
808         if( _cnt > 1 ) {
809             System.close( _pid );
810             if( !_alert ){
811                 System.alert( "多重起動", "アプリケーション" + _id + "が既に起動しています。このアプリケーションの多重起動は許可されていません。" );
812             }
813         }
814         return _cnt;
815     }
816
817     this.resizable = function( _pid, _elem, _width, _height ){
818         let E = ".winc";
819         if( _elem ) E = String( _elem );
820         if( !_width ) _width = null;
821         if( !_height ) _height = "100";
822         $("#w" + _pid).resizable({
823             alsoResize: "#w" + _pid + " " + E,
824             minWidth: _width,
825             minHeight: _height
826         });
827     }
828
829     this.initLauncher = function(data){
830         $("#launcher-apps").html("");
831         for( let i in data ){
832             $("#launcher-apps").append("<div class='launcher-app' data-launch='" + i + "'><img src='" + data[i].icon + "'>" + data[i].name + "</div>");
833         }
834         if( !System.bootopt.get("safe") ){
835             for( let i of System.installed ){
836                 $("#launcher-apps").append("<div class='launcher-app' data-define-path='" + i.path + "' data-define-id='" + i.id + "'><img src='" + i.icon + "'>" + i.name + "</div>");
837             }
838         }
839         $(".launcher-app").on("click", function(){
840             $("#launch").click();
841             if( $(this).attr("data-launch") ) launch( $(this).attr("data-launch") );
842             else if( $(this).attr("data-define-path") ){
843                 launch( $(this).attr("data-define-id"), null, $(this).attr("data-define-path") );
844             };
845         });
846     }
847
848     this.clip = new function(){
849         this.content = null;
850         this.history = new Array();
851
852         this.set = function( content ){
853             this.content = content;
854             this.history.push(content);
855             return content;
856         }
857         this.get = ()=>{ return this.content }
858     }
859
860     this.config = new function(){
861         this.apps = new Object();
862     }
863
864     this.audio = new function(){
865         this.level = localStorage["kit-audio-level"] || 100;
866         this.silent = false;
867
868         this.list = new Array();
869
870         this.volume = function( _level ){
871             $("#dropdown-sound-slider").slider("value", _level);
872         }
873
874         this.play = function( _audioid, _src ){
875             if( !System.audio.list[_audioid] ){
876                 System.audio.list[_audioid] = new Audio(_src);
877                 System.audio.list[_audioid].volume = System.audio.level / 100;
878             }
879             System.audio.list[_audioid].play();
880         }
881
882         this.get = function( _audioid ){
883             return System.audio.list[_audioid];
884         }
885
886         this.pause = function( _audioid ){
887             System.audio.list[_audioid].pause();
888         }
889
890         this.stop = function( _audioid ){
891             System.audio.list[_audioid].pause();
892             System.audio.list[_audioid] = null;
893         }
894
895         this.seek = function( _audioid, _time ){
896             System.audio.list[_audioid].fastSeek(_time);
897         }
898
899         this.mute = function( _audioid, _bool ){
900             System.audio.list[_audioid].muted = _bool;
901         }
902     }
903 }
904
905 const KWS = new function(){
906     this.version = "3.2.2";
907     this.active = null;
908
909     this.darkmode = false;
910
911     this.changeWindowTitle = function( _pid, _str ){
912         $("#tname"+_pid).text( _str );
913         $("#wtname"+_pid).text( _str );
914     }
915
916     this.min = function( _str ) {
917         let _pid = String( _str );
918         if( $( "#w" + _pid ).is( ":visible" ) ) {
919             $( "#w" + _pid ).css("transition", "none").hide( "drop", {direction: "down"}, 300 );
920             $( "#task-ctx" ).effect( "bounce", {distance: 12, times: 1}, 400 );
921             $( "#t" + _pid ).addClass( "task-min" );
922         }
923         else {
924             $( "#w" + _pid ).show( "drop", {direction: "down"}, 300 );
925             $( "#task-ctx" ).effect( "bounce", {distance: 12, times: 1}, 400 );
926             $( "#t" + _pid ).removeClass( "task-min" );
927         }
928     }
929
930     this.fullscreen = {
931         "pid": null,
932         "prevWidth": null,
933         "prevHeight": null,
934         "prevTop": 0,
935         "prevLeft": 0
936     }
937
938     this.max = function( _pid ){
939         if( KWS.fullscreen.pid ){
940             Notification.push("最大化に失敗", "最大化しているウィンドウがあります。");
941             return;
942         }
943         $( "#wt"+_pid ).addClass("wtmaximize");
944         $( "#w"+_pid ).css({
945             "top": "0px",
946             "left": "0px"
947         })
948         .addClass("windowmaximize")
949         .css("z-index", KWS.windowIndex + 1);
950         KWS.refreshWindowIndex();
951
952         KWS.fullscreen.prevWidth = $("#winc"+_pid).outerWidth();
953         KWS.fullscreen.prevHeight = $("#winc"+_pid).outerHeight();
954         KWS.fullscreen.prevTop = $("#w"+_pid).offset().top;
955         KWS.fullscreen.prevLeft = $("#w"+_pid).offset().left;
956
957         KWS.resize( _pid, System.display.width, System.display.height - 30 );
958         $("footer").hide();
959         $("#kit-header-fullscreen").show().on("click", () => {
960             KWS.unmax( _pid );
961         });
962         KWS.fullscreen.pid = _pid;
963     }
964
965     this.unmax = function( _pid ){
966         if( _pid != KWS.fullscreen.pid ){
967             Notification.push("最大化解除に失敗", "対象がフルスクリーンウィンドウではありません。");
968             return;
969         }
970         $( "#wt"+_pid ).removeClass("wtmaximize");
971         $( "#w"+_pid ).css({
972             "top": KWS.fullscreen.prevTop,
973             "left": KWS.fullscreen.prevLeft
974         })
975         .removeClass("windowmaximize");
976         $("footer").show();
977         $("#kit-header-fullscreen").hide().off();
978         KWS.resize( _pid, KWS.fullscreen.prevWidth, KWS.fullscreen.prevHeight );
979         KWS.fullscreen.pid = null;
980         KWS.fullscreen.prevWidth = null;
981         KWS.fullscreen.prevHeight = null;
982         KWS.fullscreen.prevTop = null;
983         KWS.fullscreen.prevLeft = null;
984     }
985
986     this.vacuum = function( _left, _top ){
987         for( let i in process ){
988             $("#w"+i).css("transition", ".5s all ease").css("left", _left ).css("top", _top );
989         }
990         setTimeout(() => {
991             $(".window").css("transition", "none");
992         }, 500);
993     }
994
995     this.active = null;
996     this.windowIndex = 1;
997
998     this.refreshWindowIndex = function(){
999         let num = $(".window").length;
1000         let array = new Array();
1001         let obj = new Object();
1002         for( let i = 0; i < num; i++ ){
1003             obj = { id: $(".window")[i].id, zindex: $(".window")[i].style.zIndex };
1004             array.push( obj );
1005         };
1006         array.sort( (a,b) => {
1007             return Number(a.zindex - b.zindex);
1008         } );
1009         for( let i in array ){
1010             document.getElementById(array[i].id).style.zIndex = i;
1011             if( i == num-1 ){
1012                 $("#"+array[i].id).addClass("windowactive");
1013                 $("#t"+String(array[i].id).substring(1)).addClass("t-active");
1014                 KWS.active = String(array[i].id).substring(1);
1015                 process[array[i].id.substring(1)].isactive = true;
1016             }
1017             else{
1018                 $("#"+array[i].id).removeClass("windowactive");
1019                 $("#t"+String(array[i].id).substring(1)).removeClass("t-active");
1020                 process[array[i].id.substring(1)].isactive = false;
1021             }
1022         }
1023         KWS.windowIndex = num;
1024     }
1025
1026     this.resize = function( _pid, _width, _height ){
1027         if( _width ) $("#winc"+_pid).css("width", _width)
1028         if( _height ) $("#winc"+_pid).css("height", _height);
1029     }
1030
1031     this.fusen = new function(){
1032         this.fid = 0;
1033         this.list = new Object();
1034
1035         this.add = function(_text){
1036             KWS.fusen.list[KWS.fusen.fid] = String(_text);
1037             $("#desktop-"+currentDesktop).append("<div class='kit-fusen' id='kit-f"+KWS.fusen.fid+"'><i class='fa fa-quote-left'></i><textarea class='kit-fusen-textarea kit-selectable' data-fid='"+KWS.fusen.fid+"' kit-context='fusen'>"+_text+"</textarea></div>");
1038             $("#kit-f"+KWS.fusen.fid).css({
1039                 "left": Number(KWS.fusen.fid)*40 + 20,
1040                 "top": Number(KWS.fusen.fid)*10 + 100,
1041             }).pep({
1042                 elementsWithInteraction: ".kit-fusen-textarea",
1043                 useCSSTranslation: false,
1044                 disableSelect: false,
1045                 shouldEase:     true,
1046                 initiate: function(){
1047                     $(this.el).css("ui-opacity", "0.7");
1048                 },
1049                 stop: function(){
1050                     this.el.style.transition = "none";
1051                     $(this.el).css("ui-opacity", "1.0");
1052                 }
1053             })
1054             $(".kit-fusen-textarea").off().on("change",function(){
1055                 Notification.push($(this).attr("data-fid"), $(this).val(), "debug");
1056                 KWS.fusen.list[$(this).attr("data-fid")] = $(this).val();
1057                 localStorage.setItem("kit-fusen", JSON.stringify( KWS.fusen.list ));
1058             });
1059             localStorage.setItem("kit-fusen", JSON.stringify( KWS.fusen.list ));
1060             KWS.fusen.fid++;
1061         }
1062
1063         this.remove = function(_fid){
1064             delete KWS.fusen.list[_fid];
1065             localStorage.setItem("kit-fusen", JSON.stringify( KWS.fusen.list ));
1066             $("#kit-f"+_fid).remove();
1067         }
1068     }
1069
1070     this.addCustomContext = function( _elem, _contextid, _obj ){
1071         KWS.context[_contextid] = _obj;
1072     }
1073
1074     this.context = {
1075         "fusen" : {
1076             "name" : "ふせん",
1077             "delete" : {
1078                 "label" : "ふせんを削除",
1079                 "icon" : "fa-trash-alt",
1080                 "function" : function(){
1081                     KWS.fusen.remove( S.selectedElement.attr("data-fid") );
1082                 }
1083             },
1084             "copy" : {
1085                 "label" : "ふせんを複製",
1086                 "icon" : "fa-copy",
1087                 "function" : function(){
1088                     KWS.fusen.add( KWS.fusen.list[S.selectedElement.attr("data-fid")] );
1089                 }
1090             }
1091         }
1092     }
1093 }
1094
1095 const Notification = new function() {
1096     this.nid = 0;
1097     this.list = new Object();
1098
1099     this.goodnight = false;
1100     this.sound = null;
1101
1102     this.push = function( _title, _content, _app ) {
1103         if( !System.debugmode && ( _title == "debug" || _app == "debug" ) ){
1104             return false;
1105         }
1106         this.list[this.nid] = {
1107             "title" : _title,
1108             "content" : _content,
1109             "app" : _app,
1110             "time" : System.time.obj.toLocaleString()
1111         };
1112         if( !this.goodnight ){
1113             if( this.sound ) System.audio.play( "n" + this.nid, this.sound );
1114             $( "#last-notification-title" ).text("").text( _title );
1115             $( "#last-notification-content" ).text("").text( _content );
1116             $( "#last-notification-app" ).text("").text( _app );
1117             $( "#last-notification" ).hide().show( "drop", {direction: "right"}, 300 );
1118         }
1119         $( "#notifications" ).append( "<div class='notis' id='nt" + this.nid + "'><span class='notis_close' id='nc" + this.nid + "'></span><span><span class='fas fa-comment-alt'></span>" + _title + "</span>" + _content + "<div class='notis_time'>" + System.time.obj.toLocaleString() + "</div></div>" );
1120         $("#nc" + this.nid).on("click", function(){
1121             let _nid = this.id.slice(2);
1122             $("#nt" + _nid).fadeOut(300);
1123             return false;
1124         } );
1125         $("#nt" + this.nid).on("click", function(){
1126             let _nid = this.id.slice(2);
1127             if( Notification.list[ _nid ].app != "system" ){
1128                 launch(Notification.list[ _nid ].app);
1129             }
1130         } );
1131         this.nid ++;
1132         return (this.nid - 1);
1133     }
1134 }
1135
1136 const App = new function() {
1137     this.changeWindowTitle = ( _pid, _t ) => {
1138         $( "#tname"+_pid ).text( _t );
1139         $( "#wtname"+_pid ).text( _t );
1140         process[_pid].title = _t;
1141         return App;
1142     }
1143
1144     this.context = ( _cid, _obj ) => {
1145         KWS.context[ _cid ] = _obj;
1146         return App;
1147     }
1148
1149     this.d = new Object();
1150
1151     this.data = ( _pid, _name, _value ) => {
1152         if( _value !== undefined ) {
1153             S.dom(_pid, `[kit-bind=${_name}]`).val( _value );
1154             S.dom(_pid, `[kit-observe=${_name}]`).text( _value );
1155             return App.d[_pid][_name] = _value;
1156         }
1157         else if( _name ) return App.d[_pid][_name];
1158         else return App.d[_pid];
1159     }
1160
1161     this.e = new Object();
1162
1163     this.event = ( _pid, _name, _event ) => {
1164         if( !App.e[_pid] ) App.e[_pid] = new Object();
1165         App.e[_pid][_name] = _event;
1166         return App;
1167     }
1168
1169     this.getPath = ( _pid, _path ) => System.launchpath[_pid] + _path;
1170
1171     this.kaf = ( _pid ) => {
1172         let attrs = [
1173             "[kit-ref]",
1174             "[kit-e]",
1175             "[kit-src]",
1176             "[kit-alert]",
1177             "[kit-launch]",
1178             "[kit-close]",
1179             "[kit-text]",
1180             "[kit-html]",
1181             "[kit-bind]",
1182             "[kit-observe]"
1183         ]
1184         const PID = _pid;
1185         const DATA = App.data(_pid);
1186         const ARGS = System.args[_pid];
1187         for( let i of S.dom(_pid, ...attrs) ){
1188             if( i.hasAttribute("kit-ref") ){
1189                 $(i).on("click", () => App.load(_pid, i.getAttribute("kit-ref")) );
1190             }
1191             if( i.hasAttribute("kit-e") ){
1192                 let _eqs = i.getAttribute("kit-e").split(",");
1193                 for( let k of _eqs ){
1194                     let _eq = k.split(" ");
1195                     $(i).on( _eq[1]||"click", App.e[_pid][_eq[0]] );
1196                 }
1197             }
1198             if( i.hasAttribute("kit-src") ){
1199                 $(i).attr("src", System.launchpath[_pid] +"/"+ i.getAttribute("kit-src") )
1200             }
1201             if( i.hasAttribute("kit-alert") ){
1202                 $(i).on("click", ()=> System.alert( System.appCache[ process[_pid].id ].name, i.getAttribute("kit-alert") ) );
1203             }
1204             if( i.hasAttribute("kit-launch") ){
1205                 $(i).on("click", ()=> launch( i.getAttribute("kit-launch") ) );
1206             }
1207             if( i.hasAttribute("kit-close") ){
1208                 $(i).on("click", ()=> System.close( i.getAttribute("kit-close") || _pid ) );
1209             }
1210             if( i.hasAttribute("kit-text") ){
1211                 $(i).text( eval(i.getAttribute("kit-text")) );
1212             }
1213             if( i.hasAttribute("kit-html") ){
1214                 $(i).html( eval(i.getAttribute("kit-html")) );
1215             }
1216             if( i.hasAttribute("kit-bind") ){
1217                 if( App.d[_pid] == undefined ) App.d[_pid] = new Object();
1218                 $(i).on('keydown keyup keypress change', () => {
1219                     App.d[_pid][i.getAttribute("kit-bind")] = i.value;
1220                     S.dom(_pid, `[kit-observe=${i.getAttribute("kit-bind")}]`).text( i.value );
1221                 } );
1222             }
1223             if( i.hasAttribute("kit-observe") ){
1224                 $(i).text( App.d[_pid][i.getAttribute("kit-observe")] );
1225             }
1226         }
1227     }
1228
1229     this.load = ( _pid, _path ) => {
1230         S.dom(_pid).load( System.launchpath[_pid] +"/"+ _path, () => {
1231             App.kaf(_pid);
1232         } );
1233         return App;
1234     }
1235
1236     this.preventClose = ( _pid, _bool ) => {
1237         process[_pid].preventclose = _bool || true;
1238         return App;
1239     }
1240 }
1241
1242 var process = {}, processID = 0, pid, currentDesktop = 1, currentCTX = "", prevWindowIndex, S;