Add Window Maximize, Fullscreen Support Key and Size Key, Update Apps [0.2.0]

diff --git a/app/alert/alert.js b/app/alert/alert.js
index 413aad9..58a3949 100644 (file)
--- a/app/alert/alert.js
+++ b/app/alert/alert.js
@@ -6,10 +6,10 @@ function app_alert(_pid) {
         $("#winc" + _pid + " .alert-title").text(System.args[pid][0]);
         $("#winc" + _pid + " .alert-content").html(System.args[pid][1]);
         if( System.args[pid][2] ){
-            $("#wt" + _pid).html("<img src='./app/alert/icon.png'>"+System.args[pid][2]);
+            KWS.changeWindowTitle( _pid, System.args[pid][2] );
         }
         else{
-            $("#wt" + _pid).html("<img src='./app/alert/icon.png'>"+System.args[pid][0]);
+            KWS.changeWindowTitle( _pid, System.args[pid][0] );
         }
     }
     $("#winc" + _pid + " .kit-button").on("click", function(){

diff --git a/app/console/console.css b/app/console/console.css
index c8f23a4..ccb1756 100644 (file)
--- a/app/console/console.css
+++ b/app/console/console.css
@@ -24,11 +24,11 @@
     border : 1px solid gray;
     margin-top : 10px;
     overflow: auto;
+    min-height: 200px;
 }
 .winc-console .simple-box{
     font-size: 13px;
     padding: 2px;
-    height: 100px;
 }
 
 .winc-console .simple-box::selection{
@@ -41,4 +41,13 @@
 .winc-console .console-log::selection{
     background-color: limegreen;
     color: black;
+}
+.winc-console pre{
+    display: inline;
+       font-family: 'Noto Sans JP', sans-serif;
+}
+.winc-console pre::selection{
+    user-select: text;
+    background: limegreen;
+    color: black;
 }
\ No newline at end of file

diff --git a/app/console/console.js b/app/console/console.js
index 3f9dde0..727e3dd 100644 (file)
--- a/app/console/console.js
+++ b/app/console/console.js
@@ -7,22 +7,17 @@ function app_console(_pid) {
     let cmdHistory = [""];
     let cmdFocus = 0;
 
-    $("#w" + _pid).resizable({
-        alsoResize: "#w" + _pid + " .console-wrapper",
-        minWidth: "200"
-    });
-
     $("#winc"+_pid+" .console-exec").on("click", function(){
         let log = $("#winc"+_pid+" .simple-box").html();
         let exec = $("#winc"+_pid+" .textbox").val();
         if( exec ){
             prevCommand = exec;
             cmdFocus = cmdHistory.length;
-            cmdHistory.unshift(exec);
+            cmdHistory.shift(exec);
             Notification.push("debug", cmdHistory)
             $("#winc"+_pid+" .simple-box").html(exec+"<br><span class='fa fa-arrow-left'></span>");
             try {
-                $("#winc"+_pid+" .simple-box").append( JSON.stringify( eval(exec) )+"<br><div class='console-log'>"+log+"</div>");
+                $("#winc"+_pid+" .simple-box").append( "<pre>" + JSON.stringify( eval(exec), null, 4 )+"</pre><div class='console-log'>"+log+"</div>");
             } catch (error) {
                 console.log(error);
                 $("#winc"+_pid+" .simple-box").append( error +"<br><div class='console-log'>"+log+"</div>");

diff --git a/app/console/define.json b/app/console/define.json
index 4e42314..46b7c78 100644 (file)
--- a/app/console/define.json
+++ b/app/console/define.json
@@ -2,9 +2,15 @@
     "id": "console",
     "name": "コンソール",
     "icon": "icon.png",
-    "version": "3.0.1",
+    "version": "3.0.2",
     "author": "kit",
 
+    "support": {
+        "fullscreen": true
+    },
+
+    "resize": true,
+
     "view": "default.html",
     "script": "console.js",
     "css": "console.css"

diff --git a/app/document/define.json b/app/document/define.json
index 7e37d2d..36ffa1e 100644 (file)
--- a/app/document/define.json
+++ b/app/document/define.json
@@ -5,10 +5,18 @@
     "version": "0.2.2",
     "author": "kit",
 
+    "size": {
+        "width": 420,
+        "height": 290
+    },
+
     "support": {
-        "darkmode": true
+        "darkmode": true,
+        "fullscreen": true
     },
 
+    "resize": true,
+
     "view": "default.html",
     "script": "document.js",
     "css": "document.css"

diff --git a/app/document/document.css b/app/document/document.css
index 98c7ad0..f456e6f 100644 (file)
--- a/app/document/document.css
+++ b/app/document/document.css
@@ -1,7 +1,3 @@
-.document-content{
-    width: 420px;
-    height: 290px;
-}
 .winc-document .simple-box{
     border: 1px solid gray;
     padding: 2px;

diff --git a/app/document/document.js b/app/document/document.js
deleted file mode 100644 (file)
index 99e1302..0000000
--- a/app/document/document.js
+++ /dev/null
@@ -1,9 +0,0 @@
-app_document(pid);
-
-function app_document(_pid) {
-
-    $("#w" + _pid).resizable({
-        alsoResize: ".document-content",
-        minWidth: "200"
-    });
-}
\ No newline at end of file

diff --git a/app/fivr/fivr.js b/app/fivr/fivr.js
index 7ed6fa8..84fd5ab 100644 (file)
--- a/app/fivr/fivr.js
+++ b/app/fivr/fivr.js
@@ -5,7 +5,7 @@ function app_fivr(_pid){
     if( S.args[_pid] && S.args[_pid].open ){
         $("#winc" + _pid).load("./app/fivr/open.html");
         setTimeout(() => {
-            $("#wt" + _pid).html("<img src='./app/fivr/icon.png'>" + S.args[_pid].open);
+            KWS.changeWindowTitle( _pid, S.args[_pid].open );
             if( S.userarea[S.args[_pid].open].type == "image" ){
                 S.dom( _pid, "#fivr-open" ).html( "<img src='" + S.userarea[S.args[_pid].open].data + "'>" );
             }

diff --git a/app/pmgr/define.json b/app/pmgr/define.json
index 9144f8a..83ad010 100644 (file)
--- a/app/pmgr/define.json
+++ b/app/pmgr/define.json
@@ -2,11 +2,21 @@
     "id": "pmgr",
     "name": "プロセスマネージャー",
     "icon": "icon.png",
-    "version": "2.0.3",
+    "version": "3.0.1",
     "author": "kit",
 
+    "size": {
+        "width": "500px",
+        "height": "280px"
+    },
+
     "support": {
-        "darkmode": true
+        "darkmode": true,
+        "fullscreen": true
+    },
+
+    "resize": {
+        "minWidth": 300
     },
 
     "view": "default.html",

diff --git a/app/pmgr/pmgr.css b/app/pmgr/pmgr.css
index d237ad8..62f6cbe 100644 (file)
--- a/app/pmgr/pmgr.css
+++ b/app/pmgr/pmgr.css
@@ -1,6 +1,3 @@
-.winc-pmgr > div{
-  width: 500px;
-}
 #pmgr-t thead{
   color: #303030;
   background: #e0e0e0;

diff --git a/app/pmgr/pmgr.js b/app/pmgr/pmgr.js
index f1cc645..ccbc950 100644 (file)
--- a/app/pmgr/pmgr.js
+++ b/app/pmgr/pmgr.js
@@ -2,7 +2,6 @@
     for( let i in process ) {
         S.dom( _pid, "#pmgr-tb" ).append( "<tr><td onclick='appInfo(\""+process[i].id+"\")'><img src='./app/" + process[i].id + "/" + System.appCache[process[i].id].icon +"'>" + System.appCache[process[i].id].name + "</td><td>" + i + "</td><td>" + process[i].time + "</td><td><a class='kit-hyperlink pmgr-close' data-pmgr-close='"+i+"'>終了</a></td></tr>" );
     }
-    System.resizable(_pid, "#pmgr-box");
     setInterval( () => {
         S.dom( _pid, "#pmgr-tb" ).text("");
         for( let i in process ) {

diff --git a/app/settings/define.json b/app/settings/define.json
index 3ec8566..fbd09dc 100644 (file)
--- a/app/settings/define.json
+++ b/app/settings/define.json
@@ -6,7 +6,8 @@
     "author": "kit",
 
     "support": {
-        "darkmode": true
+        "darkmode": true,
+        "fullscreen": true
     },
 
     "view": "default.html",

diff --git a/app/settings/theme.html b/app/settings/theme.html
index f0bc63e..f198af0 100644 (file)
--- a/app/settings/theme.html
+++ b/app/settings/theme.html
@@ -27,12 +27,6 @@
 <a class='btn settings-default'><span class='fa fa-arrow-circle-left'></span>設定</a>
 <h3><span class='fa fa-palette'></span> テーマ設定</h3>
 
-<h4>ダークモード(試験的な機能)　<a onclick="S.alert('ダークモード','画面UI全体を黒色の構成にすることで目の疲れを軽減します。<br>一部のアプリやテーマで正しく機能しない場合があります。')" class="kit-hyperlink far fa-question-circle"></a></h4>
-<div class="kit-toggle">
-    <input type="checkbox" id="settings-theme-darkmode">
-    <label for="settings-theme-darkmode"></label>
-    <label for="settings-theme-darkmode">ダークモードを有効にする</label>
-</div>
 <h4>テーマを選択</h4>
 <div class='btn' onclick="settings_theme( 'theme-default.css' )">
     標準のテーマ <span class="little">theme-default.css</span>
@@ -47,7 +41,9 @@
 <input type='text' class='textbox' id='settings-theme-path' placeholder='テーマファイルのパス'>
 <a class='kit-button settings-theme-path-set'>設定</a><br>
 
-<h4><span class="fa fa-font"></span>フォント設定</h4>
-<div class='little'>システムのデフォルトフォントを指定します</div>
-<input type='text' class='textbox' id='settings-font' placeholder='フォント名(カンマ区切りで複数)'>
-<a class='kit-button settings-font-set'>設定</a>
\ No newline at end of file
+<h4>ダークモード(試験的な機能)　<a onclick="S.alert('ダークモード','画面UI全体を黒色の構成にすることで目の疲れを軽減します。<br>一部のアプリやテーマで正しく機能しない場合があります。')" class="kit-hyperlink far fa-question-circle"></a></h4>
+<div class="kit-toggle">
+    <input type="checkbox" id="settings-theme-darkmode">
+    <label for="settings-theme-darkmode"></label>
+    <label for="settings-theme-darkmode">ダークモードを有効にする</label>
+</div>
\ No newline at end of file

diff --git a/config/desktop.json b/config/desktop.json
new file mode 100644 (file)
index 0000000..2d2f661
--- /dev/null
+++ b/config/desktop.json
@@ -0,0 +1,31 @@
+{
+    "document": {
+        "name": "ドキュメント",
+        "icon": "./app/document/icon.png"
+    },
+
+    "fivr": {
+        "name": "ファイル",
+        "icon": "./app/fivr/icon.png"
+    },
+    
+    "browser": {
+        "name": "ブラウザ",
+        "icon": "./app/browser/icon.png"
+    },
+
+    "settings": {
+        "name": "設定",
+        "icon": "./app/settings/icon.png"
+    },
+
+    "console": {
+        "name": "コンソール",
+        "icon": "./app/console/icon.png"
+    },
+
+    "ytplayer": {
+        "name": "動画閲覧",
+        "icon": "./app/ytplayer/icon.png"
+    }
+}
\ No newline at end of file

diff --git a/index.html b/index.html
index d2f6188..3a0ed09 100644 (file)
--- a/index.html
+++ b/index.html
@@ -14,6 +14,7 @@
        <link href="system/noto.css" rel="stylesheet">
        <link rel="stylesheet" href="system/simplebar.css">
        <script src="system/simplebar.js"></script>
+       <script src="system/jquery.windowResizable.js"></script>
        <!-- System and Theme -->
        <script src="system.js"></script>
        <link href="system/theme/theme-default.css" rel="stylesheet" id="kit-theme-file">
@@ -29,13 +30,7 @@
        </section>
 
        <section id="desktop-1">
-                       <a onclick="launch('document')" class="home-icon"><span class="home-fa far fa-file-alt"></span>ドキュメント</a>
-                       <a onclick="launch('fivr')" class="home-icon"><span class="home-fa fa fa-folder-open"></span>ファイル</a>
-                       <a onclick="launch('browser')" class="home-icon"><span class="home-fa fa fa-globe-asia"></span>ブラウザ</a>
-                       <a onclick="launch('settings')" class="home-icon"><span class="home-fa fa fa-cogs"></span>設定</a>
-                       <a onclick="launch('grapes')" class="home-icon"><span class="home-fa fa fa-laptop-code"></span>Web作成</a>
-                       <a onclick="launch('console')" class="home-icon"><span class="home-fa fa fa-terminal"></span>コンソール</a>
-                       <a onclick="launch('ytplayer')" class="home-icon"><span class="home-fa fab fa-youtube"></span>動画閲覧</a>
+               <div class="desktop-icons"></div>
        </section>
 
        <section id="desktop-l">ロックされています<br>
@@ -77,14 +72,23 @@
 
        <div id="kit-context">
                <div id="kit-context-elem">要素</div>
-               <div id="kit-context-size"></div>
-               <a id="kit-context-open"><span class="fa fa-external-link-alt"></span> 要素を開く</a>
-               <a id="kit-context-save"><span class="fa fa-file-download"></span> 要素を保存</a>
+               <div id="kit-contextgroup-elem">
+                       <div id="kit-context-size"></div>
+                       <a id="kit-context-open"><span class="fa fa-external-link-alt"></span> 要素を開く</a>
+                       <a id="kit-context-save"><span class="fa fa-file-download"></span> 要素を保存</a>
+               </div>
+               <div id="kit-contextgroup-text">
+                       <div id="kit-context-text">テキスト</div>
+                       <a id="kit-context-copy"><span class="fa fa-copy"></span> コピー</a>
+                       <a id="kit-context-search"><span class="fa fa-search"></span> 検索する</a>
+               </div>
                <input type="text" class="textbox" placeholder="Web検索" id="kit-context-input">
-               <a id="kit-context-search"><span class="fa fa-search"></span> 検索する</a>
-               <a onclick="launch('settings', {'view': 'wallpaper'})"><span class="fa fa-image"></span> 壁紙の設定</a>
-               <a onclick="launch('pmgr')"><span class="fa fa-tachometer-alt"></span> プロセス管理</a>
-               <a id="kit-context-vacuum"><span class="fa fa-compress"></span> 吸い寄せる</a>
+               <div id="kit-contextgroup-desktop">
+                       <div id="kit-context-desktop">デスクトップ</div>
+                       <a onclick="launch('settings', {'view': 'wallpaper'})"><span class="fa fa-image"></span> 壁紙の設定</a>
+                       <a onclick="launch('pmgr')"><span class="fa fa-tachometer-alt"></span> プロセス管理</a>
+                       <a id="kit-context-vacuum"><span class="fa fa-compress"></span> 吸い寄せる</a>
+               </div>
        </div>
 
        <div id="kit-tasks"></div>
@@ -118,6 +122,7 @@
                <a id="desktops"><span class="far fa-clone"></span>Desktop</a>
                <input type="text" class="kit-selectable" id="milp" placeholder="検索" autocomplete="off">
                <div id="header-right">
+                       <a id="kit-header-fullscreen"><span class="fa fa-window-maximize"></span>最大化を解除</a>
                        <a id="kit-header-user"><span class="fa fa-user"></span><span id="kit-header-username"></span></a>
                        <a onclick="$('#dropdown-sound').toggle()"><span id="kit-header-sound-icon" class="fa fa-volume-up"></span></a>
                        <a onclick="$('#dropdown-clock').toggle()"><span class="fas fa-clock"></span><span class="os-time"></span></a>

diff --git a/system.js b/system.js
index 96e0215..753e8b9 100644 (file)
--- a/system.js
+++ b/system.js
@@ -7,6 +7,8 @@
 // THIS IS THE KIT KERNEL AND KIT WINDOW SYSTEM
 // http://web.kitit.ml/
 // https://github.com/mtsgi/kit
+"use strict";
+
 
 $( document ).ready( kit );
 
@@ -69,6 +71,8 @@ function kit() {
         System.alert( "セーフブート", "現在、kitをセーフモードで起動しています。<br><a class='kit-hyperlink' onclick='location.href=\"index.html\";'>通常モードで再起動</a>", "system" );
     }
     else for( let i of System.startup ) if( i != "" ) launch( i );
+    
+    $("#kit-header-fullscreen").hide();
 
     //イベントハンドラ
     $( "#desktops" ).click( function() {
@@ -88,6 +92,17 @@ function kit() {
             $( "#kit-tasks" ).html( $( "#tasks" ).html() ).fadeIn( 300 ).css( "z-index", "9997" );
         }
     } );
+    //デスクトップアイコン
+    $.getJSON("config/desktop.json", (data) => {
+        for( let i in data ){
+            $(".desktop-icons").append("<div class='desktop-icon' data-launch='" + i + "'><img src='" + data[i].icon + "'>" + data[i].name + "</div>");
+        }
+        $(".desktop-icon").on("click", function(){
+            launch( $(this).attr("data-launch") );
+        });
+    }).fail( function() {
+        Notification.push( "読み込みに失敗", "デスクトップ(config/desktop.json)の読み込みに失敗しました。", system );
+    } );
     //ランチャー
     $.getJSON("config/apps.json", System.initLauncher).fail( function() {
         Notification.push( "ランチャー初期化失敗", "アプリケーション一覧(config/apps.json)の読み込みに失敗しました。", system );
@@ -236,7 +251,18 @@ function kit() {
     $(":root section:not(#desktop-l)").on("contextmenu", function() {
         let _ptelem = $( document.elementFromPoint(S.mouseX, S.mouseY) );
         S.selectedElement = _ptelem;
-        $( "#kit-context-input" ).val( _ptelem.text() );
+        S.selectedText = window.getSelection();
+        $( "#kit-context-input" ).val( S.selectedText );
+        if( $( "#kit-context-input" ).val() == "" ) $("#kit-contextgroup-text").hide();
+        else $("#kit-contextgroup-text").show();
+        if( _ptelem[0].id == "desktop-" + currentDesktop ){
+            $("#kit-contextgroup-desktop").show();
+            $("#kit-contextgroup-elem").hide();
+        }
+        else{
+            $("#kit-contextgroup-desktop").hide();
+            $("#kit-contextgroup-elem").show();
+        }
         $( "#kit-context-elem" ).text( _ptelem.prop("tagName").toLowerCase() + "要素" );
         if( _ptelem[0].id ) $( "#kit-context-elem" ).append( "#" + _ptelem[0].id );
         $( "#kit-context-size" ).text( _ptelem[0].clientWidth + "✕" + _ptelem[0].clientHeight );
@@ -262,7 +288,7 @@ function kit() {
 
     $("#kit-context-vacuum").on("click", function(){
         for( let i in process ){
-            $("#w"+i).css("transition", ".5s all ease").css("left", S.mouseX - Number( $("#w"+i).innerWidth() / 2 ) ).css("top", S.mouseY - Number( $("#w"+i).innerHeight() / 2 ) );
+            KWS.vacuum( S.mouseX, S.mouseY );    
         }
         setTimeout(() => {
             $(".window").css("transition", "none");
@@ -288,6 +314,15 @@ function kit() {
         }
     } );
 
+    window.onresize = () => {
+        System.display.width = window.innerWidth;
+        System.display.height = window.innerWidth;
+
+        if( KWS.fullscreen.pid ){
+            KWS.resize( KWS.fullscreen.pid, System.display.width, System.display.height - 30 );
+        }
+    }
+
     if( localStorage.getItem( "kit-lock" ) == "true" ){
         $("section").hide();
         setTimeout(() =>  System.lock(), 100);
@@ -298,6 +333,7 @@ function launch( str, args ) {
     pid = processID;
     System.args[pid] = args;
     if( System.appCache[str] ) {
+        if( KWS.fullscreen.pid ) KWS.unmax(KWS.fullscreen.pid);
         //app[str].open();
         appData( System.appCache[str] );
     }
@@ -362,9 +398,26 @@ function appData( data ) {
     }, function() {
         $( "#w" + pid ).removeClass( "win-highlight" );
     } );
-    $( "#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>" );
+    let WINDOWAPPEND = "<div id='w" + pid + "'><div id='wt" + pid + "' class='wt'><i class='wmzx'><span id='wm" + pid + "'></span>";
+    if( data.support && data.support.fullscreen == true ) WINDOWAPPEND += "<span id='wz" + pid + "'></span>";
+    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>";
+    $( "#desktop-" + currentDesktop ).append( WINDOWAPPEND );
     if( data.support && data.support.darkmode == true ) $("#winc"+pid).addClass("winc-darkmode");
     if( KWS.darkmode ) $("#winc"+pid).addClass("kit-darkmode");
+
+    if( data.size ){
+        $("#winc"+pid).css("width", data.size.width).css("height", data.size.height);
+    }
+    if( data.resize ){
+        let _minwidth = 200, _minheight = 40;
+        if( data.resize.minWidth ) _minwidth = data.resize.minWidth;
+        if( data.resize.minHeight ) _minheight = data.resize.minHeight;
+        $("#winc"+pid).windowResizable({
+            minWidth: _minwidth,
+            minHeight: _minheight
+        });
+    }
+
     var windowPos = 50 + ( pid % 10 ) * 20;
     //$( "#w" + pid ).addClass( "window" ).draggable( {cancel: ".winc", stack: ".window"} ).css( "left", windowPos + "px" ).css( "top", windowPos + "px" ).css( "z-index", $( ".window" ).length + 1 );
     KWS.windowIndex ++;
@@ -389,8 +442,9 @@ function appData( data ) {
         KWS.refreshWindowIndex();
     } ).css( "left", windowPos + "px" ).css( "top", windowPos + "px" ).css( "z-index",  KWS.windowIndex );
     KWS.refreshWindowIndex();
-    $( "#wm" + pid ).addClass( "wm fa fa-window-minimize" ).click( function() {System.min( String( pid ) )} );
-    $( "#wx" + pid ).addClass( "wx fa fa-times" ).click( () => { System.close( String(pid) ) } );
+    $( "#wm" + pid ).addClass( "wm fa fa-window-minimize" ).click( () => KWS.min( String(pid) ) );
+    $( "#wz" + pid ).addClass( "wz fas fa-square" ).click( () => KWS.max( String(pid) ) );
+    $( "#wx" + pid ).addClass( "wx fa fa-times" ).click( () => System.close( String(pid) ) );
     $( "#winc" + pid ).resizable( {
         minWidth: "200"
     } ).load( "./app/" + data.id + "/" + data.view );
@@ -422,7 +476,7 @@ function kill( str ) {
 }
 
 const System = new function() {
-    this.version = "0.1.5";
+    this.version = "0.2.0";
     this.username = localStorage.getItem("kit-username");
     this.appdir = localStorage.getItem("kit-appdir");
 
@@ -431,7 +485,13 @@ const System = new function() {
     this.mouseX = 0;
     this.mouseY = 0;
 
+    this.display = {
+        "width": window.innerWidth,
+        "height": window.innerHeight
+    }
+
     this.selectedElement = null;
+    this.selectedText = null;
 
     this.dom = function(_pid, _elements) {
         _elements = _elements || "";
@@ -726,6 +786,10 @@ const System = new function() {
         this.get = ()=>{ return this.content }
     }
 
+    this.config = new function(){
+        this.apps = new Object();
+    }
+
     this.audio = new function(){
         this.level = localStorage["kit-audio-level"] || 100;
         this.silent = false;
@@ -773,6 +837,11 @@ const KWS = new function(){
 
     this.darkmode = false;
 
+    this.changeWindowTitle = function( _pid, _str ){
+        $("#tname"+_pid).text( _str );
+        $("#wtname"+_pid).text( _str );
+    }
+
     this.min = function( _str ) {
         let _pid = String( _str );
         if( $( "#w" + _pid ).is( ":visible" ) ) {
@@ -787,8 +856,60 @@ const KWS = new function(){
         }
     }
 
+    this.fullscreen = {
+        "pid": null,
+        "prevWidth": null,
+        "prevHeight": null,
+        "prevTop": 0,
+        "prevLeft": 0
+    }
+
     this.max = function( _pid ){
+        if( KWS.fullscreen.pid ){
+            Notification.push("最大化に失敗", "最大化しているウィンドウがあります。");
+            return;
+        }
+        $( "#wt"+_pid ).addClass("wtmaximize");
+        $( "#w"+_pid ).css({
+            "top": "0px",
+            "left": "0px"
+        })
+        .addClass("windowmaximize")
+        .css("z-index", KWS.windowIndex + 1);
+        KWS.refreshWindowIndex();
+
+        KWS.fullscreen.prevWidth = $("#winc"+_pid).outerWidth();
+        KWS.fullscreen.prevHeight = $("#winc"+_pid).outerHeight();
+        KWS.fullscreen.prevTop = $("#w"+_pid).offset().top;
+        KWS.fullscreen.prevLeft = $("#w"+_pid).offset().left;
 
+        KWS.resize( _pid, System.display.width, System.display.height - 30 );
+        $("footer").hide();
+        $("#kit-header-fullscreen").show().on("click", () => {
+            KWS.unmax( _pid );
+        });
+        KWS.fullscreen.pid = _pid;
+    }
+
+    this.unmax = function( _pid ){
+        if( _pid != KWS.fullscreen.pid ){
+            Notification.push("最大化解除に失敗", "対象がフルスクリーンウィンドウではありません。");
+            return;
+        }
+        $( "#wt"+_pid ).removeClass("wtmaximize");
+        $( "#w"+_pid ).css({
+            "top": KWS.fullscreen.prevTop,
+            "left": KWS.fullscreen.prevLeft
+        })
+        .removeClass("windowmaximize");
+        $("footer").show();
+        $("#kit-header-fullscreen").hide().off();
+        KWS.resize( _pid, KWS.fullscreen.prevWidth, "auto" );
+        KWS.fullscreen.pid = null;
+        KWS.fullscreen.prevWidth = null;
+        KWS.fullscreen.prevHeight = null;
+        KWS.fullscreen.prevTop = null;
+        KWS.fullscreen.prevLeft = null;
     }
 
     this.vacuum = function( _left, _top ){

diff --git a/system/jquery.windowResizable.js b/system/jquery.windowResizable.js
new file mode 100644 (file)
index 0000000..7b060c7
--- /dev/null
+++ b/system/jquery.windowResizable.js
@@ -0,0 +1,128 @@
+(function($){ \r
+    $.fn.windowResizable = function(userOptions){\r
+        let elements = this;\r
+        let defaults = {\r
+            minWidth: 0,\r
+            minHeight: 0,\r
+            maxWidth: 10000,\r
+            maxHeight: 10000,\r
+            mouseRange: 10,\r
+            isWidthResize:true,\r
+            isHeightResize:true\r
+        };\r
+        \r
+        let option = $.extend(defaults,userOptions);\r
+\r
+        $(this).css('resize', 'none'); \r
+        $(this).css('overflow', 'auto'); \r
+        let pos_left = $(this).offset().left;\r
+        let pos_top = $(this).get(0).offsetTop;\r
+        let pos_right = $(this).outerWidth() + pos_left;\r
+        let pos_bottom = $(this).outerHeight() + pos_top;\r
+        let right_min = pos_right - option.mouseRange;\r
+        let bottom_min = pos_bottom - option.mouseRange;\r
+        let right_flg = false;\r
+        let bottom_flg = false;\r
+        let $box = $(this);\r
+        let resize_flg = false;\r
+        \r
+        $(this).mousemove(function(e){\r
+\r
+            if(resize_flg) return;\r
+            \r
+            right_flg = false;\r
+            bottom_flg = false;\r
+\r
+            pos_left = $box.offset().left;\r
+            pos_top = $box.offset().top;\r
+            pos_right = $box.outerWidth() + pos_left;\r
+            pos_bottom = $box.outerHeight() + pos_top;\r
+            right_min = pos_right - option.mouseRange;\r
+            bottom_min = pos_bottom - option.mouseRange;\r
+            \r
+            let pagex = window.event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft); \r
+            let pagey = window.event.clientY + (document.body.scrollTop || document.documentElement.scrollTop); \r
+            \r
+            // right\r
+            if(pagex <= pos_right && right_min <= pagex\r
+                && pos_top <= pagey && pagey <= pos_bottom && option.isWidthResize)\r
+            {\r
+                right_flg = true;\r
+            }\r
+            // bottom\r
+            if(pagex <= pos_right && pos_left <= pagex\r
+                && bottom_min <= pagey && pagey <= pos_bottom && option.isHeightResize)\r
+            {\r
+                bottom_flg = true;\r
+            }\r
+\r
+            if(right_flg && bottom_flg)\r
+            {\r
+                $(this).css('cursor','se-resize');\r
+            }\r
+            else if(right_flg)\r
+            {\r
+                $(this).css('cursor','e-resize'); \r
+            }\r
+            else if(bottom_flg)\r
+            {\r
+                $(this).css('cursor','n-resize');\r
+            }\r
+            else{\r
+                $(this).css('cursor','auto');\r
+            }\r
+        });\r
+\r
+        $(this).mousedown(function(e){\r
+            \r
+            let resize_right_flg = false;\r
+            let resize_bottom_flg = false;\r
+            \r
+            let pagex = e.pageX;\r
+            let pagey = e.pageY;\r
+            let boxWidth = $box.width();\r
+            let boxHeight = $box.height();\r
+            \r
+            if(right_flg){\r
+                resize_right_flg = true;\r
+            }\r
+            \r
+            if(bottom_flg){\r
+                resize_bottom_flg = true;\r
+            }\r
+            $(document).mousemove(function(e){\r
+                \r
+                if(!resize_right_flg && !resize_bottom_flg)\r
+                    return;   \r
+                \r
+                $('body').css('cursor', $box.css('cursor'));\r
+                resize_flg = true;\r
+\r
+                let addWidth = e.pageX - pagex;\r
+                let resize_width = boxWidth + addWidth\r
+                if(resize_right_flg && resize_width <= option.maxWidth \r
+                                        && option.minWidth <= resize_width){\r
+                    $box.width(resize_width);\r
+                }\r
+                \r
+                let addheight = e.pageY - pagey;\r
+                let resize_height = boxHeight + addheight\r
+                if(resize_bottom_flg && resize_height <= option.maxHeight \r
+                                        && option.minHeight <= resize_height){\r
+                    $box.height(resize_height);\r
+                }\r
+            }).mouseup(function(){\r
+                $(document).off("mousemove").on("mousemove", function(event){\r
+                    System.mouseX = event.clientX;\r
+                    System.mouseY = event.clientY;\r
+                });\r
+                resize_bottom_flg = false;\r
+                resize_right_flg = false;\r
+                resize_flg = false;\r
+                $('body').css('cursor','auto');\r
+            });            \r
+        });\r
+\r
+        return(this);\r
+    };\r
+})(jQuery);
\ No newline at end of file

diff --git a/system/theme/kit-darkmode.css b/system/theme/kit-darkmode.css
index 93dccb7..04a73e9 100644 (file)
--- a/system/theme/kit-darkmode.css
+++ b/system/theme/kit-darkmode.css
@@ -11,7 +11,7 @@
     background: #000000;
     color: limegreen;
 }
-.wm, .wx{
+.wmzx span{
     color: #f0f0f0;
 }
 /* UI */

diff --git a/system/theme/theme-default.css b/system/theme/theme-default.css
index 1dc439c..0a8c829 100644 (file)
--- a/system/theme/theme-default.css
+++ b/system/theme/theme-default.css
@@ -5,6 +5,7 @@
 }
 body {
        margin: 0px;
+       overflow: hidden;
        font-size: 16px;
        font-family: 'Noto Sans JP', sans-serif;
        overscroll-behavior: none;
@@ -26,8 +27,8 @@ section {
        position: absolute;
        top : 30px;
        left: 0px;
-       width: 100%;
-       height: calc(100% - 70px);
+       min-width: 100%;
+       min-height: calc(100% - 70px);
        display: none;
        transition: 1s all ease;
        cursor: url(../cursor-1.png), auto;
@@ -216,6 +217,31 @@ header a:hover{
        box-shadow: 0 1px 3px 0 rgba(0,0,0,.5);
        cursor: url(../cursor-1.png), auto !important;
 }
+.desktop-icons{
+       display: flex;
+       flex-wrap: wrap;
+       padding: 4px;
+}
+.desktop-icon{
+       border-radius: 5px;
+       padding: 4px;
+       margin: 4px;
+       text-shadow: 0px 1px 4px black;
+       width: 100px;
+       text-align: center;
+       overflow: hidden;
+       color: #fff;
+}
+.desktop-icon:hover{
+       background: rgba(0,0,0,.5);
+       opacity: .8;
+       box-shadow: 0 0 3px 0 cyan;
+}
+.desktop-icon img{
+       display: block;
+       margin: 0 auto;
+       height: 50px;
+}
 .home-icon:before{
        line-height: 0px;
        display: block;
@@ -260,6 +286,12 @@ footer{
        border-top : 5px solid #ffffff;
        padding-left: 58px;
 }
+.footermaximize{
+       transition: .2s all ease;
+}
+.footermaximize-hidden{
+       bottom: -39px!important;
+}
 footer #launch{
        cursor:url(../cursor-2.png), pointer;
        position: fixed;
@@ -423,14 +455,23 @@ section .ui-draggable-dragging{
        box-shadow: 0 2px 15px 0 rgba(0,0,0,.7);
        animation: activeAnim 1s;
 }
+.windowmaximize{
+       position: fixed;
+       border-radius: none;
+       overflow: hidden;
+}
+.windowmaximize:after{
+       height: 0px;
+}
 .wt{
        display: block;
        min-height: 24px;
        color: #000000;
        font-size: 17px;
        padding: 3px 0;
+       padding-right: 100px;
        border-radius: 4px 4px 0 0;
-background : linear-gradient(#F2F2F2 0%,#D1D1D1 100%);
+  background : linear-gradient(#F2F2F2 0%,#D1D1D1 100%);
        background: linear-gradient(45deg, rgba(194,194,194,1) 0%, rgba(235,235,235,1) 50%, rgba(194,194,194,1) 100%);
 }
 .wt:before{
@@ -446,25 +487,39 @@ background : linear-gradient(#F2F2F2 0%,#D1D1D1 100%);
 .windowactive > .wt{
        background: linear-gradient(45deg, rgba(255,201,248,1) 0%, rgba(186,239,255,1) 50%, rgba(150,255,157,1) 100%);
 }
-.windowactive > span{
+.wtmaximize{
+       display: none;
+}
+.windowactive span{
        opacity: 1.0;
 }
+.wmzx{
+       position: absolute;
+       top: 0px;
+       right: 0px;
+       display: flex;
+  justify-content: flex-end;
+}
 .wm{
        padding: 8px 8px;
-       position: absolute;
-       right: 30px;
        opacity: .6;
 }
 .wm:hover{
        background: dodgerblue;
        color: #fff;
 }
+.wz{
+       padding: 8px 8px;
+       opacity: .6;
+}
+.wz:hover{
+       background: orange;
+       color: #fff;
+}
 .wx{
        cursor:url(../cursor-1.png), default;
        padding: 8px 10px;
        float: right;
-       position: absolute;
-       right: 0px;
        opacity: .6;
 }
 .wx:hover{
@@ -479,7 +534,7 @@ background : linear-gradient(#F2F2F2 0%,#D1D1D1 100%);
        background: #ffffff;
        border-radius: 0px 0px 4px 4px;
        padding : 5px;
-       overflow : hidden;
+       overflow : hidden!important;
        max-width: 100%;
 }
 .kit-button{
@@ -526,7 +581,7 @@ background : linear-gradient(#F2F2F2 0%,#D1D1D1 100%);
        float: right;
   display: inline-block;
   position: relative;
-  cursor: pointer;
+       cursor: url(../cursor-2.png), pointer;
   outline: none;
   user-select: none;
 }
@@ -754,6 +809,13 @@ h3{
        padding: 0px 5px;
        border-bottom: 1px solid #a0a0a0;
 }
+#kit-context-text, #kit-context-desktop{
+       color: #a0a0a0;
+       font-size: 15px;
+       padding: 4px 5px;
+       border-top: 1px solid #a0a0a0;
+       border-bottom: 1px solid #a0a0a0;
+}
 
 #kit-tasks{
        display: none;

diff --git a/system/theme/theme-light.css b/system/theme/theme-light.css
index 70db268..93f55fe 100644 (file)
--- a/system/theme/theme-light.css
+++ b/system/theme/theme-light.css
@@ -185,6 +185,27 @@ header a:hover{
        border: 1px solid black !important;
        cursor: url(../cursor-1.png), auto !important;
 }
+.desktop-icons{
+       display: flex;
+       flex-wrap: wrap;
+       padding: 4px;
+}
+.desktop-icon{
+       padding: 4px;
+       margin: 4px;
+       width: 100px;
+       text-align: center;
+       overflow: hidden;
+       color: #fff;
+}
+.desktop-icon:hover{
+       background: black;
+}
+.desktop-icon img{
+       display: block;
+       margin: 0 auto;
+       height: 50px;
+}
 .home-icon:before{
        line-height: 0px;
        display: block;

diff --git a/system/theme/theme-ringo.css b/system/theme/theme-ringo.css
index eecd48b..4cfad1a 100644 (file)
--- a/system/theme/theme-ringo.css
+++ b/system/theme/theme-ringo.css
@@ -215,6 +215,31 @@ header a:hover{
        box-shadow: 0 1px 3px 0 rgba(0,0,0,.5);
        cursor: url(../cursor-1.png), auto !important;
 }
+.desktop-icons{
+       display: flex;
+       flex-wrap: wrap;
+       padding: 4px;
+}
+.desktop-icon{
+       border-radius: 5px;
+       padding: 4px;
+       margin: 4px;
+       text-shadow: 0px 1px 4px black;
+       width: 100px;
+       text-align: center;
+       overflow: hidden;
+       color: #fff;
+       border: 2px solid transparent;
+}
+.desktop-icon:hover{
+       background: rgba(0,0,0,.3);
+       border: 2px solid rgba(200,200,200,.5);
+}
+.desktop-icon img{
+       display: block;
+       margin: 0 auto;
+       height: 50px;
+}
 .home-icon:before{
        line-height: 0px;
        display: block;