system.js

   1 //THIS IS THE KIT KERNEL AND KIT WINDOW SYSTEM
   2
   3 $( document ).ready( Load );
   4
   5 function Load() {
   6
   7     if( !localStorage.getItem( "kit-pid" ) ) processID = 0;
   8     else processID = localStorage.getItem( "kit-pid" );
   9
  10     if( !localStorage.getItem( "kit-username" ) ) localStorage.setItem( "kit-username", "ユーザー" );
  11     $( "#kit-header-username" ).text( localStorage.getItem( "kit-username" ) );
  12
  13     if( localStorage.getItem( "kit-wallpaper" ) ) $( "#kit-wallpaper" ).css( "background", localStorage.getItem( "kit-wallpaper" ) ).css( "background-size", "cover" );
  14
  15     if( !localStorage.getItem( "kit-default-browser" ) ) localStorage.setItem( "kit-default-browser", "browser" );
  16
  17     System.moveDesktop( "1" );
  18
  19     var clockmove = setInterval( System.clock, 10 );
  20
  21     //スタートアップ
  22     if( localStorage.getItem( "kit-startup" ) == undefined ) {
  23         localStorage.setItem( "kit-startup", new Array( "welcome" ) );
  24     }
  25     System.startup = localStorage.getItem( "kit-startup" ).split( "," );
  26     for( i in System.startup ) {
  27         if( System.startup[i] != "" ) launch( System.startup[i] );
  28     }
  29     Notification.push( "kitへようこそ", localStorage["kit-username"] + "さん、こんにちは。", processID );
  30
  31     //イベントハンドラ定義
  32     $( "#desktops" ).click( function() {
  33         $( "#desktop-" + currentDesktop ).toggleClass( "selected-section" );
  34     } ).mousedown( function() {
  35         $( ".window" ).css( "opacity", "0.6" );
  36     } ).mouseup( function() {
  37         $( ".window" ).css( "opacity", "1.0" );
  38     } );
  39     //タスク一覧
  40     $( "#footer-tasks" ).click( function() {
  41         if( $( "#kit-tasks" ).is( ":visible" ) ) {
  42             $( "#kit-tasks" ).html( "" ).fadeOut( 300 );
  43         }
  44         else {
  45             $( "#task-ctx" ).fadeOut( 200 );
  46             $( "#kit-tasks" ).html( $( "#tasks" ).html() ).fadeIn( 300 ).css( "z-index", "9997" );
  47         }
  48     } );
  49     //ランチャー
  50     $( "#launcher-apps" ).text( "This function is not implemented yet. / kit ver" + System.version );
  51     $( "#kit-tasks" ).delegate( ".task", "click", function() {
  52         close( this.id.slice( 1 ) );
  53         $( this ).hide();
  54     } );
  55     //通知バー
  56     $( "#footer-noti" ).click( function() {
  57         $( "#last-notification" ).hide( "drop", {direction: "right"}, 300 );
  58         if( $( "#notifications" ).is( ":visible" ) ) {
  59             $( "#notifications" ).hide( "drop", {direction: "right"}, 300 );
  60         }
  61         else {
  62             $( "#notifications" ).show( "drop", {direction: "right"}, 300 );
  63         }
  64     } );
  65     $( "#last-notification-close" ).click( function() {
  66         $( "#last-notification" ).hide( "drop", {direction: "right"}, 300 );
  67     } );
  68     //電源管理
  69     $( ".power-button" ).click( function() {
  70         $( "#notifications" ).hide( "drop", {direction: "right"}, 300 );
  71         $( "section, header, footer, #kit-wallpaper" ).css( "filter", "blur(5px)" );
  72         $( "#kit-power" ).fadeIn( 300 );
  73     } );
  74     $( "#kit-power-back" ).click( function() {
  75         $( "section, header, footer, #kit-wallpaper" ).css( "filter", "none" );
  76         $( "#kit-power" ).fadeOut( 300 );
  77     } );
  78     $( "#kit-power-shutdown" ).click( function() {
  79         System.shutdown();
  80     } );
  81     $( "#kit-power-reboot" ).click( function() {
  82         System.reboot();
  83     } );
  84     $( "#kit-power-suspend" ).click( function() {
  85         System;
  86     } );
  87     $( "#kit-power-lock" ).click( function() {
  88         System.moveDesktop( "l" );
  89
  90         $( "#lock-user-icon" ).css( "background", localStorage.getItem( "kit-user-color" ) );
  91         $( "section, header, footer" ).css( "filter", "none" );
  92         $( "#kit-wallpaper" ).css( "filter", "blur(20px)" );
  93         $( "header, footer, #kit-power" ).hide();
  94
  95         $( "#lock-username" ).text( localStorage.getItem( "kit-username" ) );
  96         if( localStorage.getItem( "kit-password" ) ) $( "#lock-password" ).show();
  97         else $( "#lock-password" ).hide();
  98     } );
  99     $( "#lock-password" ).keypress( function( e ) {
 100         if( e.which == 13 ) $( "#lock-unl" ).click();
 101     } );
 102     $( "#lock-unl" ).click( function() {
 103         if( !localStorage.getItem( "kit-password" ) || $( "#lock-password" ).val() == localStorage.getItem( "kit-password" ) ) {
 104             $( "header, footer" ).show();
 105             $( "section, header, footer, #kit-wallpaper" ).css( "filter", "none" );
 106             $( "#lock-password" ).val( "" );
 107             System.moveDesktop( currentDesktop );
 108         }
 109         else $( "#lock-password" ).effect( "bounce", {distance: 12, times: 4}, 500 );
 110     } ).hover( function() {
 111         $( "#lock-unl span" ).removeClass( "fa-lock" ).addClass( "fa-lock-open" );
 112     }, function() {
 113         $( "#lock-unl span" ).removeClass( "fa-lock-open" ).addClass( "fa-lock" );
 114     } );
 115     //ランチャー起動
 116     $( "#launch" ).click( function() {
 117         $( "#notifications" ).hide( "drop", {direction: "right"}, 300 );
 118         if( $( "#launcher" ).is( ":visible" ) ) {
 119             $( "#kit-wallpaper" ).css( "filter", "none" );
 120             $( "#desktop-" + currentDesktop ).show();
 121             $( "#launcher" ).hide();
 122         }
 123         else {
 124             $( "#kit-wallpaper" ).css( "filter", "blur(5px)" )
 125             $( "section" ).hide();
 126             $( "#launcher" ).show();
 127         }
 128     } );
 129
 130     //検索バー
 131     $( "#milp" ).val( "" ).on( "focus", function() {
 132         $( "#kit-milp" ).show();
 133     } ).on( "blur", function() {
 134         $( "#kit-milp" ).fadeOut( 200 );
 135     } ).on( 'keydown keyup keypress change', function() {
 136         $( "#kit-milp-text" ).text( $( this ).val() );
 137     } );;
 138     $( "#kit-milp-launch" ).click( function() {
 139         launch( $( "#milp" ).val() );
 140     } );
 141     $( "#kit-milp-search" ).click( function() {
 142         launch( "browser", "https://www.bing.com/search?q=" + $( "#milp" ).val() );
 143     } );
 144     $( "#kit-milp-wikipedia" ).click( function() {
 145         launch( "browser", "https://ja.wikipedia.org/wiki/" + $( "#milp" ).val() );
 146     } );
 147
 148     //コンテキストメニュー
 149     //$("section").contextMenu("contextmenu", function () {
 150     //    alert("hello");
 151     //});
 152
 153     $( document ).delegate( "a", "click", function() {
 154         if( this.href ) {
 155             launch( localStorage.getItem( "kit-default-browser" ), this.href );
 156             return false;
 157         }
 158     } );
 159
 160 }
 161
 162 function launch( str, args ) {
 163     appDefine();
 164     System.args[pid] = args;
 165     //連想配列から読み込み
 166     if( System.appCache[str] ) {
 167         //app[str].open();
 168         appData( System.appCache[str] );
 169     }
 170     //jsonから読み込み
 171     else {
 172         $.getJSON( "./app/" + str + "/define.json", appData ).fail( function() {
 173             System.alert( "起動エラー", "アプリケーションの起動に失敗しました<br>詳細：アプリケーション" + str + "は存在しないかアクセス権がありません(pid:" + processID + ")" );
 174         } );
 175     }
 176 }
 177
 178 function appData( data ) {
 179     var pid = processID;
 180     process[String( pid )] = data;
 181     System.appCache[data.id] = data;
 182     $( "#tasks" ).append( "<span id='t" + pid + "'><img src='./app/" + data.id + "/" + data.icon + "'>" + data.name + "</span>" );
 183     //タスクバーのクリック挙動
 184     $( "#t" + pid ).addClass( "task" ).click( function() {
 185         System.min( pid );
 186     } );
 187     $( "#t" + pid ).addClass( "task" ).on( "mouseenter", function() {
 188         $( "#task-ctx-name" ).text( data.name );
 189         $( "#task-ctx-img" ).attr( "src", "./app/" + data.id + "/" + data.icon );
 190         $( "#task-ctx-ver" ).text( data.version + "/pid:" + pid );
 191         $( "#task-ctx-close" ).off().on( "click", function() {close( String( pid ) )} );
 192         $( "#task-ctx-min" ).off().on( "click", function() {System.min( String( pid ) )} );
 193         $( "#task-ctx-kill" ).off().on( "click", function() {kill( String( data.id ) )} );
 194         const _ctxleft = $( "#t" + pid ).offset().left;
 195         const _footertop = Number( $( "footer" ).offset().top ) - 185;
 196         if( _ctxleft != $( "#task-ctx" ).offset().left ) {
 197             $( "#task-ctx" ).hide();
 198         }
 199         $( "#task-ctx" ).css( "left", _ctxleft ).css( "top", _footertop ).show();
 200     } );
 201     $( "section, #kit-tasks" ).on( "mouseenter", function() {
 202         $( "#task-ctx" ).fadeOut( 200 );
 203     } );
 204     $( "#t" + pid ).hover( function() {
 205         prevWindowIndex = $( "#w" + pid ).css( "z-index" );
 206         $( "#w" + pid ).addClass( "win-highlight" );
 207         //$("#w"+pid).css("z-index", "9000");
 208     }, function() {
 209         $( "#w" + pid ).removeClass( "win-highlight" );
 210         //$("#w"+pid).css("z-index", prevWindowIndex);
 211     } );
 212     $( "#desktop-" + currentDesktop ).append( "<div id='w" + pid + "'><span id='wm" + pid + "'></span><span id='wx" + pid + "'></span><div id='wt" + pid + "' class='wt'><img src='./app/" + data.id + "/" + data.icon + "'>" + data.name + "</div><div class='winc winc-" + data.id + "' id='winc" + pid + "'></div></div>" );
 213     var windowPos = 50 + ( pid % 10 ) * 20;
 214     $( "#w" + pid ).addClass( "window" ).draggable( {cancel: ".winc", stack: ".window"} ).css( "left", windowPos + "px" ).css( "top", windowPos + "px" ).css( "z-index", $( ".window" ).length + 1 );
 215     $( "#wm" + pid ).addClass( "wm fa fa-window-minimize" ).click( function() {System.min( String( pid ) )} );
 216     $( "#wx" + pid ).addClass( "wx fa fa-times" ).click( function() {close( String( pid ) )} );
 217     $( "#winc" + pid ).resizable( {
 218         minWidth: "200"
 219     } ).load( "./app/" + data.id + "/" + data.view );
 220
 221     //スクリプト読み込み
 222     if( data.script != "none" ) $.getScript( "./app/" + data.id + "/" + data.script );
 223     if( data.css != "none" ) $( "head link:last" ).append( '<link href="./app/' + data.id + '/' + data.css + '" rel="stylesheet">' );
 224
 225     processID++;
 226     localStorage.setItem( "kit-pid", processID );
 227
 228 }
 229
 230 //pidからアプリケーションを閉じる
 231 function close( str ) {
 232     var _pid = String( str );
 233     $( "#w" + _pid ).remove();
 234     $( "#t" + _pid ).remove();
 235     $( "#task-ctx" ).hide();
 236     delete process[_pid];
 237 }
 238
 239 function kill( str ) {
 240     for( pid in process ) {
 241         if( process[pid] && process[pid].id == str ) close( pid );
 242     }
 243 }
 244
 245 //アプリケーションの内容を定義
 246 function appDefine() {
 247     pid = processID;
 248     //app["welcome"] = new Application("welcome", "ようこそ", "far fa-comment-dots", "<div style='text-align:center;padding:4px 12px'><div style='font-size:22px'><strong>kit</strong>Desktop <span style='color:silver'>beta</span></div>バージョン0.0<br>キットデスクトップ環境へようこそ<br><a class='button close-this' onclick='page(\detail\)'>詳細</a> <a class='button' id='close-"+pid+"' onclick='close("+pid+")'>閉じる</a></div>", "0.0.0");
 249 }
 250
 251 //システムクラス
 252 const System = new function() {
 253     this.version = "0.0.4";
 254     this.username = localStorage.getItem( "kit-username" );
 255
 256     this.appCache = {};
 257     //引数
 258     this.args = {};
 259
 260     this.shutdown = function() {
 261         $( "#kit-power-back" ).click();
 262         for( i in process ) {
 263             close( i );
 264             $( "section" ).hide();
 265         }
 266         $( "body" ).css( "background-color", "black" );
 267         $( "header, footer" ).fadeOut( 300 );
 268         $( "#kit-wallpaper" ).fadeOut( 1500 );
 269     }
 270
 271     this.reboot = function() {
 272         location.reload();
 273     }
 274
 275     this.alert = function( title, content ) {
 276         launch( "alert", [title, content] );
 277     }
 278
 279     this.min = function( str ) {
 280         var _pid = String( str );
 281         if( $( "#w" + _pid ).is( ":visible" ) ) {
 282             $( "#w" + _pid ).hide( "drop", {direction: "down"}, 300 );
 283             $( "#task-ctx" ).effect( "bounce", {distance: 12, times: 1}, 400 );
 284             $( "#t" + _pid ).addClass( "task-min" );
 285         }
 286         else {
 287             $( "#w" + _pid ).show( "drop", {direction: "down"}, 300 );
 288             $( "#task-ctx" ).effect( "bounce", {distance: 12, times: 1}, 400 );
 289             $( "#t" + _pid ).removeClass( "task-min" );
 290         }
 291     }
 292
 293     this.clock = function() {
 294         DD = new Date();
 295         var Hour = ( "00" + DD.getHours() ).slice( -2 );
 296         var Min = ( "00" + DD.getMinutes() ).slice( -2 );
 297         var Sec = ( "00" + DD.getSeconds() ).slice( -2 );
 298         $( ".os-time" ).text( Hour + ":" + Min + ":" + Sec );
 299     }
 300
 301     this.changeWallpaper = function( str ) {
 302         $( "#kit-wallpaper" ).css( "background", str ).css( "background-size", "cover" );
 303         localStorage.setItem( "kit-wallpaper", str )
 304     }
 305
 306     this.moveDesktop = function( str ) {
 307         str = String( str );
 308         $( "section" ).hide();
 309         $( "#desktop-" + str ).show();
 310         $( "#desktops" ).html( "<span class='far fa-clone'></span>Desktop" + str );
 311     }
 312
 313     this.avoidMultiple = function( _pid ) {
 314         var _id = process[_pid].id;
 315         var _cnt = 0;
 316         for( i in process ) {
 317             if( process[i].id == _id ) _cnt += 1;
 318         }
 319         console.log( _cnt );
 320         if( _cnt > 1 ) {
 321             close( _pid );
 322             System.alert( "多重起動", "アプリケーション" + _id + "が既に起動しています。このアプリケーションの多重起動は許可されていません。" );
 323         }
 324         return _cnt;
 325     }
 326 }
 327
 328 const Notification = new function() {
 329     this.push = function( _title, _content, _app ) {
 330         $( "#last-notification-title" ).text( _title );
 331         $( "#last-notification-content" ).text( _content );
 332         $( "#last-notification-app" ).text( _app );
 333         $( "#last-notification" ).show( "drop", {direction: "right"}, 300 );
 334         $( "#notifications" ).append( "<div class='notis'><span><span class='fas fa-comment-alt'></span>" + _title + "</span>" + _content + "</div>" );
 335     }
 336 }
 337
 338 var process = {};
 339 var processID = 0, currentDesktop = 1;
 340 var currentCTX = "";
 341 var prevWindowIndex;