system.js

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