OSDN Git Service

Add Design Mode Switcher on app/browser [0.2.1] update/app-browser
authormtsgi <oq@live.jp>
Mon, 30 Sep 2019 03:45:08 +0000 (12:45 +0900)
committermtsgi <oq@live.jp>
Mon, 30 Sep 2019 03:45:08 +0000 (12:45 +0900)
app/browser/bookmark-add.html
app/browser/bookmark.html
app/browser/browser.js
app/browser/default.html
app/browser/define.json
app/browser/newtab.html
app/settings/about.html
readme.md
system.js

index c9024d8..f7dbbeb 100644 (file)
@@ -9,39 +9,12 @@
                body {
                        background-color: black;
                        color : white;
-                       margin: 0px;
                        padding: 10px;
-                       font-size: 16px;
                        background: url("bgp.jpg");
                        text-shadow: 0px 1px 4px rgba(0,0,0,.5);
                }
-               header{
-                       font-size: 20px;
-                       opacity : .8;
-                       padding : 10px;
-                       margin-top : 10px;
-               }
-               input{
-                       outline: 0;
-                       font-size : 20px;
-                       border : 1px solid white;
-                       border-radius : 6px;
-                       padding : 8px;
-                       color : white;
-                       background : rgba(255,255,255,.3);
-               }
-               a{
-                       line-height: 200%;
-                       color : white;
-               }
-               #add{
-                       background: dodgerblue;
-                       color: white;
-                       padding: 11px;
-                       border-radius: 5px;
-                       cursor: pointer;
-               }
        </style>
+       <link rel="stylesheet" href="../../system/kitstrap/kitstrap.css">
        <script type="text/javascript">
                $(document).ready(Load);
                function Load() {
@@ -51,7 +24,7 @@
             }
                        $("#add").click(function(){
                 if( $("#url").val() == "" || $("#name").val() == "" ){
-                    $("body").append("<br>両方の項目を入力してください。");
+                    $("body").append("<div class='kit-flash'>両方の項目を入力してください。</div>");
                     return false;
                 }
                 bookmarks[$("#name").val()] = $("#url").val();
 </head>
 
 <body id="body">
-    <a href="bookmark.html">キャンセル</a>
-    <header>ブックマークの追加</header>
-    名前<br>
-    <input type="text" id="name"><br>
-    URL<br>
-    <input type="text" id="url"><br>
-    <br>
-       <a id="add">追加</a>
+    <a href="bookmark.html" class="kit-hl-alt">キャンセル</a>
+    <h3>ブックマークの追加</h3>
+    <span class="kit-left">名前</span>
+       <input type="text" id="name" class="textbox">
+       <br>
+       <span class="kit-left">URL</span>
+       <input type="text" id="url" class="textbox">
+       <kit-space></kit-space>
+       <a id="add" class="kit-button">追加</a>
 </body>
 
 </html>
\ No newline at end of file
index 71e3c33..f31ff71 100644 (file)
@@ -9,39 +9,12 @@
                body {
                        background-color: black;
                        color : white;
-                       margin: 0px;
                        padding: 10px;
-                       font-size: 16px;
                        background: url("bgp.jpg");
                        text-shadow: 0px 1px 4px rgba(0,0,0,.5);
                }
-               header{
-                       font-size: 20px;
-                       opacity : .8;
-                       padding : 10px;
-                       margin-top : 10px;
-               }
-               input{
-                       outline: 0;
-                       font-size : 20px;
-                       border : 1px solid white;
-                       border-radius : 6px;
-                       padding : 8px;
-                       color : white;
-                       background : rgba(255,255,255,.3);
-               }
-               a{
-                       line-height: 200%;
-                       color : white;
-               }
-               #sb{
-                       background: dodgerblue;
-                       color: white;
-                       padding: 5px 10px;
-                       border-radius: 5px;
-                       cursor: pointer;
-               }
        </style>
+       <link rel="stylesheet" href="../../system/kitstrap/kitstrap.css">
        <script type="text/javascript">
                $(document).ready(Load);
                function Load() {
             }
             else $("#area").append("ブックマークが登録されていません。");
             for( i in bookmarks ){
-                $("#area").append( "・<a href='"+bookmarks[i]+"'>"+i+"</a><br>" );
+                $("#area").append( "<li><a class='kit-hl-alt' href='"+bookmarks[i]+"'>"+i+"</a></li>" );
             }
                }
        </script>
 </head>
 
 <body id="body">
-    <a href="newtab.html">戻る</a>
-       <header>
+    <a href="newtab.html" class="kit-hl-alt">戻る</a>
+       <h3>
         ブックマーク
-        <a href="bookmark-add.html" id="sb">追加</a>
-    </header>
+        <a href="bookmark-add.html" id="sb" class="kit-button small">追加</a>
+    </h3>
     ブックマークの編集は設定の「高度な設定」から
-    <div id="area"></div>
+    <ul id="area"></ul>
 </body>
 
 </html>
\ No newline at end of file
index 937cc65..fd7ddf8 100644 (file)
@@ -44,4 +44,17 @@ function app_browser(_pid){
             System.alert("設定しました", "ブラウザをkitの標準ブラウザに設定しました。");
         }
     });
+
+    $("#winc" + _pid + " #browser-menu-designmode").on("click", function(){
+        let _ifr = System.qs(_pid, 'iframe')[0];
+        try {
+            if( _ifr.contentDocument.designMode == "on" ){
+                _ifr.contentDocument.designMode = "off";
+            }
+            else _ifr.contentDocument.designMode = "on";
+        } catch (error) {
+            Notification.push('DesignMode切り替えに失敗', error, 'browser');
+        }
+        $("#winc" + _pid +" .browser-menu").hide();
+    });
 }
\ No newline at end of file
index 3903a32..8fc643a 100644 (file)
@@ -1,7 +1,8 @@
 <div class="browser-toolbar">
     <div class="browser-message">標準のブラウザに設定されていません
-            <a class="btn" onclick="localStorage.setItem('kit-default-browser', 'browser');Notification.push('標準ブラウザ','kit標準のブラウザに設定しました','browser')">設定する</a>
-            <a class="btn" id="browser-message-close">閉じる</a>
+        <a class="btn"
+            onclick="localStorage.setItem('kit-default-browser', 'browser');Notification.push('標準ブラウザ','kit標準のブラウザに設定しました','browser')">設定する</a>
+        <a class="btn" id="browser-message-close">閉じる</a>
     </div>
     <a class="kit-button" onclick="window.history.back()"><span class="fa fa-arrow-left"></span></a>
     <a class="btn" onclick="window.history.forward()"><span class="fa fa-arrow-right"></span></a>
@@ -9,9 +10,10 @@
     <a class="btn browser-bars"><span class="fa fa-bars"></span></a>
 </div>
 <div class="browser-menu">
-        <a id="browser-menu-reload"><span class="fa fa-redo"></span> 再読み込み</a>
-        <a onclick="launch('browser')"><span class="far fa-plus-square"></span> 新しいウィンドウ</a>
-        <a id="browser-menu-bookmark"><span class="far fa-bookmark"></span> ブックマーク</a>
-        <a id="browser-menu-default"><span class="far fa-hand-peace"></span> 標準のブラウザ</a>
+    <a id="browser-menu-reload"><span class="fa fa-redo"></span> 再読み込み</a>
+    <a onclick="launch('browser')"><span class="far fa-plus-square"></span> 新しいウィンドウ</a>
+    <a id="browser-menu-bookmark"><span class="far fa-bookmark"></span> ブックマーク</a>
+    <a id="browser-menu-default"><span class="far fa-hand-peace"></span> 標準のブラウザ</a>
+    <a id="browser-menu-designmode"><span class="fa fa-ruler"></span> DesignMode切替</a>
 </div>
-<iframe src="./app/browser/newtab.html" id="browser-frame" data-simplebar></iframe>
\ No newline at end of file
+<iframe src="./app/browser/newtab.html" id="browser-frame" data-simplebar></iframe>
index 58b0de7..4b3cd13 100644 (file)
@@ -2,7 +2,7 @@
     "id": "browser",
     "name": "ブラウザ",
     "icon": "icon.png",
-    "version": "1.0.4",
+    "version": "1.1.0",
     "author": "kit",
 
     "support": {
index 9c2ccb9..0552844 100644 (file)
@@ -9,40 +9,13 @@
                body {
                        background-color: black;
                        color : white;
-                       margin: 0px;
                        padding: 10px;
-                       font-size: 16px;
                        text-align: center;
                        background: url("bgp.jpg");
                        text-shadow: 0px 1px 4px rgba(0,0,0,.5);
                }
-               header{
-                       font-size: 20px;
-                       opacity : .8;
-                       padding : 10px;
-                       margin-top : 30px;
-               }
-               input{
-                       outline: 0;
-                       font-size : 20px;
-                       border : 1px solid white;
-                       border-radius : 6px;
-                       padding : 8px;
-                       color : white;
-                       background : rgba(255,255,255,.3);
-               }
-               a{
-                       line-height: 200%;
-                       color : white;
-               }
-               #sb{
-                       background: dodgerblue;
-                       color: white;
-                       padding: 11px;
-                       border-radius: 5px;
-                       cursor: pointer;
-               }
        </style>
+       <link rel="stylesheet" href="../../system/kitstrap/kitstrap.css">
        <script type="text/javascript">
                $(document).ready(Load);
                function Load() {
@@ -52,7 +25,7 @@
             }
             else $("#area").append("ブックマークが登録されていません。");
             for( i in bookmarks ){
-                $("#area").append( "・<a href='"+bookmarks[i]+"'>"+i+"</a><br>" );
+                $("#area").append( "・<a class='kit-hyperlink' href='"+bookmarks[i]+"'>"+i+"</a><br>" );
                        }
                        
                        $("#sb").click(function(){
 </head>
 
 <body id="body">
-       <header>新しいタブ</header>
-       <input type="text" id="sw">
-       <a onclick="search()" id="sb">検索</a>
-       <header>ブックマーク</header>
-       <a href="bookmark.html">ブックマークの一覧および追加</a>
-       <div id="area"></div>
-       <header>おすすめ</header>
-       <a href="http://tork.webcrow.jp/kakeibo.html">家計簿</a><br>
-       <a href="http://keionet.jp/">京王百貨店モバイルサイト</a><br>
-       <a href="http://tork.webcrow.jp/kusogenpc.html">クソ診断ジェネレータ</a><br>
-       <a href="http://tork.webcrow.jp/imagesearch.html">画像検索(β)</a><br>
-       <a href="http://tork.webcrow.jp/canvas.html">画像編集ツール</a><br>
-       <a href="http://tork.webcrow.jp/chess.html">Nクイーン</a><br>
-       <a href="https://f.tabtter.jp/">Tabtter Free</a><br>
-       <a href="http://tork.webcrow.jp/ruby3.html">ルビ振るやつ(v3.0)</a>
+       <h2 class="kit-font-normal">新しいタブ</h2>
+       <div class="kit-formgroup">
+               <input type="text" id="sw" class="textbox">
+               <a onclick="search()" id="sb" class="kit-button">検索</a>
+       </div>
+       <kit-space class="m"></kit-space>
+       <h4>ブックマーク</h4>
+       <a href="bookmark.html" class="kit-hl-alt">ブックマークの一覧および追加</a>
+       <blockquote id="area"></blockquote>
+       <kit-space class="m"></kit-space>
+       <h4>おすすめ</h4>
+       <a class="kit-hl-alt" href="http://tork.webcrow.jp/kakeibo.html">家計簿</a><br>
+       <a class="kit-hl-alt" href="http://keionet.jp/">京王百貨店モバイルサイト</a><br>
+       <a class="kit-hl-alt" href="http://tork.webcrow.jp/kusogenpc.html">クソ診断ジェネレータ</a><br>
+       <a class="kit-hl-alt" href="http://tork.webcrow.jp/imagesearch.html">画像検索(β)</a><br>
+       <a class="kit-hl-alt" href="http://tork.webcrow.jp/canvas.html">画像編集ツール</a><br>
+       <a class="kit-hl-alt" href="http://tork.webcrow.jp/chess.html">Nクイーン</a><br>
+       <a class="kit-hl-alt" href="https://f.tabtter.jp/">Tabtter Free</a><br>
+       <a class="kit-hl-alt" href="http://tork.webcrow.jp/ruby3.html">ルビ振るやつ(v3.0)</a>
 </body>
 
 </html>
\ No newline at end of file
index 4a5cfb5..d8da4d0 100644 (file)
@@ -9,7 +9,7 @@
     <img src="system/ico/logo.png" style="max-width: 100%;">
     <h4>
         <span kit-text="System.version"></span>
-        <span style="color: #7fffd4">"aquamarine"</span>
+        <span style="color: #7fffd4"></span>
     </h4>
 </div>
 KWS <span kit-text="KWS.version"></span> / kaf(v1)<br>
index 8960508..8aa1dc1 100644 (file)
--- a/readme.md
+++ b/readme.md
@@ -1,15 +1,16 @@
 # kit
-kitはJavaScriptで動作するとっても軽量なデスクトップ環境です。
+![kit](https://mtsgi.github.io/kit/documents/logo.png)
 
-kitアプリケーションはすぐに、簡単に作成できます。[もっと知る](https://mtsgi.github.io/kitdocs)
+> kitはJavaScriptで動作するとっても軽量なデスクトップ環境です。
+
+- kitアプリケーションはすぐに、簡単に作成できます。[もっと知る(kitチュートリアル)](https://mtsgi.github.io/kitdocs)
 
 # latest kit
-* ### [ダウンロード(リリース一覧)](https://github.com/mtsgi/kit/releases)
-* [kit Canaryを体験](https://mtsgi.github.io/kit/) (安定前のバージョンです)
-* [最新安定版を体験](http://kitit.ml/)
+* [ダウンロード(リリース一覧)](https://github.com/mtsgi/kit/releases)
+### [![kit Canary](https://mtsgi.github.io/kit/documents/banner-canary.png)](https://mtsgi.github.io/kit/)
 
 # documentation
-* ### [kitドキュメント](https://mtsgi.github.io/kitdocs)
+### [![kitドキュメント](https://mtsgi.github.io/kit/documents/banner-docs.png)](https://mtsgi.github.io/kitdocs)
 * [GitHub Wiki](https://github.com/mtsgi/kit/wiki)
 * [kit公式Webサイト](http://web.kitit.ml/)
 * [mtsgi/kit - GitHub](https://github.com/mtsgi/kit)
@@ -20,6 +21,7 @@ kitアプリケーションはすぐに、簡単に作成できます。[もっ
 * [kish](https://github.com/mtsgi/kish) - kishはkitのための強力なシェルです
 * [kitstrap](https://github.com/mtsgi/kitstrap) - kitstrapは軽量のCSSフレームワークです 
 * [kitHub(beta)](https://kithub-beta.herokuapp.com/) - kit用のアプリケーションストア
+* [defgen](https://mtsgi.github.io/defgen/) - 便利なdefine.json自動生成ツール
 
 # libraries
 * jQuery
index 949461c..9030675 100644 (file)
--- a/system.js
+++ b/system.js
@@ -511,7 +511,7 @@ function appData( data ) {
 }
 
 const System = new function() {
-    this.version = "0.2.0";
+    this.version = "0.2.1";
     this.username = localStorage.getItem("kit-username");
     this.appdir = localStorage.getItem("kit-appdir");
     this.loc = { ...location };