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