Explorar el Código

Fixed float window move to top bug on topMost windows

Toby Chui hace 3 años
padre
commit
56faf98224

+ 0 - 3
mod/filesystem/fuzzy/fuzzy.go

@@ -1,7 +1,6 @@
 package fuzzy
 
 import (
-	"fmt"
 	"strings"
 )
 
@@ -64,11 +63,9 @@ func buildFuzzyChunks(fuzzyInput string, caseSensitive bool) ([]string, []string
 	preciseExclude := false //Exclude precise word from buffer
 	preciseBuffer := []string{}
 
-	fmt.Println(fuzzyInput)
 	if !caseSensitive {
 		fuzzyInput = strings.ToLower(fuzzyInput)
 	}
-	fmt.Println(fuzzyInput)
 
 	fuzzyChunks := strings.Split(fuzzyInput, " ")
 	for _, thisChunk := range fuzzyChunks {

+ 1 - 1
web/Cyinput/cyinput.js

@@ -1,6 +1,6 @@
 /*
 	Cyinput.js
-	Author: Cyinput Development Team (Russia)
+	Author: Cyinput Development Team
 	License: MIT
 */
 

+ 21 - 2
web/Music/index.html

@@ -32,7 +32,7 @@
 <div id="searchModeMenu" class="ts basic fluid AMmenu menu bottomBlue" style="z-index:85;position:fixed;top:0px;left:0px;width:100%;height:51px;display:none;">
     <button class="ts item icon noBorder AMmenu button" onClick="exitSearchMode();"><i class="arrow left icon"></i></button>
 	<div class="ts fluid input" >
-		<input id="searchInputBar" type="text" style="background-color:rgb(48, 48, 48);border:0px !important;border-bottom:2px solid rgb(60, 60, 60) !important;margin-bottom:3px;color:white;" placeholder="Search Music">
+		<input id="searchInputBar" onkeypress="//handleSearchInputEnter(event);" type="text" style="background-color:rgb(48, 48, 48);border:0px !important;border-bottom:2px solid rgb(60, 60, 60) !important;margin-bottom:3px;color:white;" placeholder="Search Music">
 	</div>
 	<button class="ts right item icon AMmenu noBorder button" onClick="searchSong();"><i class="search icon"></i></button>
 </div>
@@ -563,12 +563,31 @@
 		searchModeEnabled = false;
 	}
 
-	$("#searchInputBar").on("keyup",function(e){
+	/*
+	$("#searchInputBar").on("keypress",function(e){
 		if(e.keyCode == 13){
 			//Enter pressed. start searching
 			searchSong();
 		}
 	});
+	*/
+
+	document.getElementById("searchInputBar").addEventListener("keypress", function(event){
+		console.log(event, event.keyCode);
+		if(event.keyCode == 13){
+			//Enter pressed. start searching
+			searchSong();
+		}
+	});
+
+	/*
+	function handleSearchInputEnter(e){
+		if(e.keyCode == 13){
+			//Enter pressed. start searching
+			searchSong();
+		}
+	}
+	*/
 
 	function searchSong(){
 		var keyword = $("#searchInputBar").val();

+ 31 - 0
web/OnScreenKeyboard/a.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<meta name="apple-mobile-web-app-capable" content="yes" />
+		<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
+		<meta name="theme-color" content="#4b75ff">
+		
+
+		<link rel="manifest" crossorigin="use-credentials" href="manifest.json">
+		<title>On Screen Keyboard</title>
+		<style>
+			body{
+				background-color: rgba(255,255,255,1.0);
+                overflow: hidden;
+			}
+		</style>
+	</head>
+	<body>
+		<script src="../script/jquery.min.js"></script>
+		<script src="../script/ao_module.js"></script>
+		<script src="onscreenkeyboard.js"></script>
+		<script>
+			//Initialize ao_module events
+			ao_module_setFixedWindowSize();
+
+			//Pin the window to top layer
+			ao_module_setTopMost();
+		</script>
+	</body>
+</html>

+ 72 - 0
web/OnScreenKeyboard/css/style.css

@@ -0,0 +1,72 @@
+.keyboard {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    padding: 5px 0;
+    background: #1f1f1f;
+    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
+    user-select: none;
+    transition: bottom 0.4s;
+}
+
+.keyboard--hidden {
+    bottom: -100%;
+}
+
+.keyboard__keys {
+    text-align: center;
+}
+
+.keyboard__key {
+    height: 45px;
+    width: 6%;
+    max-width: 90px;
+    margin: 3px;
+    border-radius: 4px;
+    border: none;
+    background: rgba(255, 255, 255, 0.2);
+    color: #ffffff;
+    font-size: 1.05rem;
+    outline: none;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: top;
+    padding: 0;
+    -webkit-tap-highlight-color: transparent;
+    position: relative;
+}
+
+.keyboard__key:active {
+    background: rgba(255, 255, 255, 0.12);
+}
+
+.keyboard__key--wide {
+    width: 12%;
+}
+
+.keyboard__key--extra-wide {
+    width: 36%;
+    max-width: 500px;
+}
+
+.keyboard__key--activatable::after {
+    content: '';
+    top: 10px;
+    right: 10px;
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background: rgba(0, 0, 0, 0.4);
+    border-radius: 50%;
+}
+
+.keyboard__key--active::after {
+    background: #08ff00;
+}
+
+.keyboard__key--dark {
+    background: rgba(0, 0, 0, 0.25);
+}

BIN
web/OnScreenKeyboard/img/desktop_icon.png


BIN
web/OnScreenKeyboard/img/desktop_icon.psd


BIN
web/OnScreenKeyboard/img/outline_keyboard_alt_white_48dp.png


BIN
web/OnScreenKeyboard/img/small_icon.png


BIN
web/OnScreenKeyboard/img/small_icon.psd


+ 38 - 0
web/OnScreenKeyboard/index.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<meta name="apple-mobile-web-app-capable" content="yes" />
+		<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
+		<meta name="theme-color" content="#4b75ff">
+        <link rel="stylesheet" href="../script/semantic/semantic.min.css">
+        <link rel="stylesheet" href="css/style.css">
+
+		<link rel="manifest" crossorigin="use-credentials" href="manifest.json">
+		<title>On Screen Keyboard</title>
+		<style>
+			body{
+				background-color: rgba(255,255,255,1.0);
+                overflow: hidden;
+			}
+		</style>
+	</head>
+	<body>
+		<script src="../script/jquery.min.js"></script>
+		<script src="../script/ao_module.js"></script>
+		
+        <textarea class="use-keyboard-input"></textarea>
+        <script src="js/keyboard.js"></script>
+        <script src="onscreenkeyboard.js"></script>
+		<script>
+			//Initialize ao_module events
+			ao_module_setFixedWindowSize();
+            ao_module_setWindowTitle("On-Screen Keyboard");
+            
+			//Pin the window to top layer
+			ao_module_setTopMost();
+		</script>
+	</body>
+</html>
+
+

+ 22 - 0
web/OnScreenKeyboard/init.agi

@@ -0,0 +1,22 @@
+/*
+	On Screen Keyboard
+*/
+
+//Setup the module information
+var moduleLaunchInfo = {
+    Name: "OnScreenKeyboard",
+	Desc: "On Screen Keyboard for touch displays that don't have on screen keyboard",
+	Group: "IME",
+	IconPath: "OnScreenKeyboard/img/small_icon.png",
+	Version: "0.1.0",
+	StartDir: "OnScreenKeyboard/index.html",
+	SupportFW: true,
+	LaunchFWDir: "OnScreenKeyboard/index.html",
+	SupportEmb: false,
+	InitFWSize: [776, 290],
+	SupportedExt: []
+}
+
+
+//Register the module
+registerModule(JSON.stringify(moduleLaunchInfo));

+ 191 - 0
web/OnScreenKeyboard/js/keyboard.js

@@ -0,0 +1,191 @@
+const Keyboard = {
+    elements: {
+        main: null,
+        keysContainer: null,
+        keys: []
+    },
+
+    eventHandlers: {
+        oninput: null,
+        onclose: null
+    },
+
+    properties: {
+        value: "",
+        capsLock: false
+    },
+
+    init() {
+        // Create main elements
+        this.elements.main = document.createElement("div");
+        this.elements.keysContainer = document.createElement("div");
+
+        // Setup main elements
+        this.elements.main.classList.add("keyboard");
+        this.elements.keysContainer.classList.add("keyboard__keys");
+        this.elements.keysContainer.appendChild(this._createKeys());
+
+        this.elements.keys = this.elements.keysContainer.querySelectorAll(".keyboard__key");
+
+        // Add to DOM
+        this.elements.main.appendChild(this.elements.keysContainer);
+        document.body.appendChild(this.elements.main);
+
+        // Automatically use keyboard for elements with .use-keyboard-input
+        document.querySelectorAll(".use-keyboard-input").forEach(element => {
+            element.addEventListener("focus", () => {
+                this.open(element.value, currentValue => {
+                    element.value = currentValue;
+                });
+            });
+        });
+    },
+
+    _createKeys() {
+        const fragment = document.createDocumentFragment();
+        const keyLayout = [
+            "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "backspace",
+            "q", "w", "e", "r", "t", "y", "u", "i", "o", "p",
+            "caps", "a", "s", "d", "f", "g", "h", "j", "k", "l", "enter",
+            "z", "x", "c", "v", "b", "n", "m", ",", ".", "?",
+            "space"
+        ];
+
+
+        keyLayout.forEach(key => {
+            const keyElement = document.createElement("button");
+            const insertLineBreak = ["backspace", "p", "enter", "?"].indexOf(key) !== -1;
+
+            // Add attributes/classes
+            keyElement.setAttribute("type", "button");
+            keyElement.classList.add("keyboard__key");
+
+            switch (key) {
+                case "backspace":
+                    keyElement.classList.add("keyboard__key--wide");
+                    keyElement.innerHTML = `<i class="ui long arrow alternate left icon"></i>`;
+
+                    keyElement.addEventListener("click", (event) => {
+                        event.preventDefault();
+                        event.stopImmediatePropagation()
+                        event.stopPropagation();
+                        backSpace();
+                        //this.properties.value = this.properties.value.substring(0, this.properties.value.length - 1);
+                        //this._triggerEvent("oninput");
+                    });
+
+                    break;
+
+                case "caps":
+                    keyElement.classList.add("keyboard__key--wide", "keyboard__key--activatable");
+                    keyElement.innerHTML = `<i class="ui chevron up icon"></i>`;
+
+                    keyElement.addEventListener("click", () => {
+                        this._toggleCapsLock();
+                        keyElement.classList.toggle("keyboard__key--active", this.properties.capsLock);
+                    });
+
+                    break;
+
+                case "enter":
+                    keyElement.classList.add("keyboard__key--wide");
+                    keyElement.innerHTML = `<i style="transform: rotate(90deg);" class="ui level down alternate icon"></i>`;
+
+                    keyElement.addEventListener("click", (event) => {
+                        event.preventDefault();
+                        event.stopImmediatePropagation()
+                        event.stopPropagation();
+                        addtext("\n");
+                        //this.properties.value += "\n";
+                        //this._triggerEvent("oninput");
+                    });
+
+                    break;
+
+                case "space":
+                    keyElement.classList.add("keyboard__key--extra-wide");
+                    keyElement.innerHTML = ``;
+
+                    keyElement.addEventListener("click", (event) => {
+                        event.preventDefault();
+                        event.stopImmediatePropagation()
+                        event.stopPropagation();
+                        addtext(" ");
+                        //this.properties.value += " ";
+                        //this._triggerEvent("oninput");
+                    });
+
+                    break;
+
+                case "done":
+                    /*
+                    keyElement.classList.add("keyboard__key--wide", "keyboard__key--dark");
+                    keyElement.innerHTML = createIconHTML("check_circle");
+
+                    keyElement.addEventListener("click", () => {
+                        this.close();
+                        this._triggerEvent("onclose");
+                    });
+                    */
+
+                    break;
+
+                default:
+                    keyElement.textContent = key.toLowerCase();
+
+                    keyElement.addEventListener("click", (event) => {
+                        event.preventDefault();
+                        event.stopImmediatePropagation()
+                        event.stopPropagation();
+                        addtext(this.properties.capsLock ? key.toUpperCase() : key.toLowerCase());
+                        //this.properties.value += this.properties.capsLock ? key.toUpperCase() : key.toLowerCase();
+                        //this._triggerEvent("oninput");
+                    });
+
+                    break;
+            }
+
+            fragment.appendChild(keyElement);
+
+            if (insertLineBreak) {
+                fragment.appendChild(document.createElement("br"));
+            }
+        });
+
+        return fragment;
+    },
+
+    _triggerEvent(handlerName) {
+        if (typeof this.eventHandlers[handlerName] == "function") {
+            this.eventHandlers[handlerName](this.properties.value);
+        }
+    },
+
+    _toggleCapsLock() {
+        this.properties.capsLock = !this.properties.capsLock;
+
+        for (const key of this.elements.keys) {
+            if (key.childElementCount === 0) {
+                key.textContent = this.properties.capsLock ? key.textContent.toUpperCase() : key.textContent.toLowerCase();
+            }
+        }
+    },
+
+    open(initialValue, oninput, onclose) {
+        this.properties.value = initialValue || "";
+        this.eventHandlers.oninput = oninput;
+        this.eventHandlers.onclose = onclose;
+        this.elements.main.classList.remove("keyboard--hidden");
+    },
+
+    close() {
+        this.properties.value = "";
+        this.eventHandlers.oninput = oninput;
+        this.eventHandlers.onclose = onclose;
+        this.elements.main.classList.add("keyboard--hidden");
+    }
+};
+
+window.addEventListener("DOMContentLoaded", function () {
+    Keyboard.init();
+});

+ 68 - 0
web/OnScreenKeyboard/keyboard.html

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
+    <title>Virtual Keyboard using HTML5 &amp; JS Example</title>
+    <meta name="author" content="Codeconvey" />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <!-- Style CSS -->
+    <link rel="stylesheet" href="css/style.css">
+    
+    <!--Only for demo purpose - no need to add.-->
+    <link rel="stylesheet" type="text/css" href="css/demo.css" />
+	
+</head>
+<body>
+		
+<div class="ScriptTop">
+    <div class="rt-container">
+        <div class="col-rt-4" id="float-right">
+            <!-- AD -->
+        </div>
+        <div class="col-rt-2">
+            <ul>
+                <li><a href="https://codeconvey.com/virtual-keyboard-using-html5">Back to Tutorial</a></li>
+            </ul>
+        </div>
+    </div>
+</div>
+
+<header class="ScriptHeader">
+    <div class="rt-container">
+    	<div class="col-rt-12">
+        	<div class="rt-heading">
+            	<h1>Virtual Keyboard using HTML5 &amp; JS Example</h1>
+                <p>A responsive &amp; easy to integrate virtual keyboard.</p>
+            </div>
+        </div>
+    </div>
+</header>
+
+<section>
+    <div class="rt-container">
+          <div class="col-rt-12">
+              <div class="Scriptcontent">
+              
+           
+    <h3>Features</h3>
+    <ul>
+        <li>Easy to integrate</li>
+        <li>Responsive</li>
+        <li>Vanilla JS (<strong>no libraries required!</strong>)</li>
+    </ul>
+    <textarea class="use-keyboard-input" style="position: absolute; top: 130px; right: 30px; width: 300px;"></textarea>
+
+    <script src="js/keyboard.js"></script>
+           
+    		</div>
+		</div>
+    </div>
+</section>
+     
+
+<!-- Analytics -->
+
+	</body>
+</html>

+ 113 - 0
web/OnScreenKeyboard/onscreenkeyboard.js

@@ -0,0 +1,113 @@
+/*
+    On Screen Keyboard
+
+    A simple on screen keyboard for touch devices that run linux
+    (Yes, just in case I need to run ArozOS on embedded linux with browser
+        this will be helpful in those rare cases)
+
+    author: tobychui
+*/
+
+//Handle ArozOS key event passthrough
+if (ao_module_virtualDesktop){
+	if (!parent.window.ime){
+		alert("Unsupported viewing mode or version of ArozOS too old!")
+	}else{
+		parent.window.ime.handler = handleKeydownInput;
+	}
+
+    //Define this is the ime window
+    ao_module_ime = true;
+}
+
+function handleKeydownInput(e) {
+    //No need to do anything as the default events will fire
+}
+
+//Handle text injection to other iframes
+function addtext(text){
+	if (text.includes('"')){
+		text = text.replace('"','');
+    }
+
+    var focused = $(':focus');
+	insertAtCaret(focused[0],text)
+	preword = text;
+	
+	if (parent.window.ime && parent.window.ime.focus != null){
+        if (text == "\n" && parent.window.ime.focus.tagName.toLowerCase() == "input"){
+            //Enter. If target is INPUT send enter keypress instead
+            //console.log("Triggered!", $(parent.window.ime.focus));
+            let event = new Event('keypress');
+            event.keyCode = 13;
+            event.which = 13;
+            event.key = 'enter';
+            console.log(event);
+            parent.window.ime.focus.dispatchEvent(event);
+            //$(parent.window.ime.focus).trigger(jQuery.Event( "keypress", { keyCode: 13 } ));
+        }else{
+            insertAtCaret(parent.window.ime.focus, text);
+        }
+		
+	}
+}
+
+function backSpace(){
+    if (parent.window.ime && parent.window.ime.focus != null){
+		backSpaceAtCaret(parent.window.ime.focus);
+	}
+}
+
+function backSpaceAtCaret(target){
+    var txt = $(target);
+    var startPos = txt[0].selectionStart;
+    var endPos = txt[0].selectionEnd;
+    var scrollPos = txt[0].scrollTop;
+    //console.log("start: " + startPos + " end: " + endPos + " scrollPos: " + scrollPos);
+    if (endPos - startPos > 0){
+        txt.val(txt.val().slice(0, startPos) + txt.val().slice(endPos, 100));
+    }else if (endPos > 0){
+        txt.val(txt.val().slice(0, startPos-1) + txt.val().slice(startPos, 100));
+    }else{
+        startPos = txt.val().length+1;
+    }
+    txt.focus();
+    txt[0].setSelectionRange(startPos-1,startPos-1);
+}
+
+function insertAtCaret(target, text) {
+    var txtarea = target;
+	if (txtarea == undefined){
+		return
+	}
+    var scrollPos = txtarea.scrollTop;
+    var caretPos = txtarea.selectionStart;
+
+    var front = (txtarea.value).substring(0, caretPos);
+    var back = (txtarea.value).substring(txtarea.selectionEnd, txtarea.value.length);
+    txtarea.value = front + text + back;
+    caretPos = caretPos + text.length;
+    txtarea.selectionStart = caretPos;
+    txtarea.selectionEnd = caretPos;
+    txtarea.focus();
+    txtarea.scrollTop = scrollPos;
+}
+
+//Overwrite the ao_module close handler
+function ao_module_close(){
+	//Deregister this IME from the window object
+	if (parent.window.ime.handler == handleKeydownInput){
+		parent.window.ime.handler = null;
+	}
+	//Exit IME
+	closeThisWindow();
+}
+
+function closeThisWindow(){
+	if (!ao_module_virtualDesktop){
+		window.close('','_parent','');
+		window.location.href = ao_root + "SystemAO/closeTabInsturction.html";
+		return;
+	}
+	parent.closeFwProcess(ao_module_windowID);
+}

+ 23 - 4
web/desktop.system

@@ -2025,12 +2025,14 @@
             //Hide all contenxt menus
             hideAllContextMenus();
 
-            //Move the window to the top layer
-            MoveFloatWindowToTop(object);
+           //Move the window to the top layer
+           MoveFloatWindowToTop(object);
+            
             //Show the background drag panel
             if ($(object).hasClass("topmost")){
                 $("#tfwdragpanel").show();
             }else{
+                
                 $('.floatWindow.topmost').css("pointer-events", "none");
                 $('.floatWindow.topmost').css("opacity", 0.7);
                 $("#fwdragpanel").show();
@@ -2295,8 +2297,8 @@
                 return;
             }
 
-            if ($(focusedWindow).hasClass("topmost")){
-                //The previous focused windows is topmost. Move it to layer 109
+            if ($(focusedWindow).hasClass("topmost") && $(object).hasClass("topmost")){
+                //The previous focused windows is topmost. Move it to layer 500
                 $(focusedWindow).css("z-index", 500);
                 $(".floatWindow.topmost").each(function(){
                     var thisWindowZIndex = $(this).css("z-index");
@@ -2306,6 +2308,23 @@
                         }
                     }
                 });
+            }else if ($(focusedWindow).hasClass("topmost") && !$(object).hasClass("topmost")){
+                //The previous focused windows is topmost but the current one is not.
+                //No need to move the top most windows but need to move every 101 windows to 100
+                $(".floatWindow:not(.topmost)").each(function(){
+                    if ($(this).css("z-index") == 101){
+                        $(this).css("z-index", 100);
+                    }
+                });
+            
+            }else if (!$(focusedWindow).hasClass("topmost") && $(object).hasClass("topmost")){
+                //The previous focused window is normal but now focusing on top most windows.
+                $(".floatWindow.topmost").each(function(){
+                    if ($(this).css("z-index") == 501){
+                        $(this).css("z-index", 500);
+                    }
+                });
+                
             }else{
                 //The previous focused windows is normal windows. Move it to 100
                 $(focusedWindow).css("z-index", 100);

+ 6 - 1
web/script/ao_module.js

@@ -23,6 +23,7 @@ var ao_root = null;
 var ao_module_windowID = false;
 var ao_module_parentID = false;
 var ao_module_callback = false;
+var ao_module_ime = false;
 if (ao_module_virtualDesktop)ao_module_windowID = $(window.frameElement).parent().parent().attr("windowId");
 if (ao_module_virtualDesktop)ao_module_parentID = $(window.frameElement).parent().parent().attr("parent");
 if (ao_module_virtualDesktop)ao_module_callback = $(window.frameElement).parent().parent().attr("callback");
@@ -49,7 +50,11 @@ document.addEventListener("DOMContentLoaded", function() {
 
             }else{
                 if (parent.window.ime.focus != null){
-                    parent.window.ime.focus = null;
+                    if (ao_module_ime){
+                        //This is clicking on ime windows. Do not change focus
+                    }else{
+                        parent.window.ime.focus = null;
+                    }
                 }
             }
         }, true);