2012-04-16 23:15:27 +02:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>Dialog Test</title>
|
2024-03-12 20:47:10 +01:00
|
|
|
<style>
|
|
|
|
|
#loading {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 10px;
|
|
|
|
|
height: 10px;
|
|
|
|
|
border: 3px solid rgba(0,0,0,.3);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
border-top-color: #000;
|
|
|
|
|
animation: spin 1s ease-in-out infinite;
|
|
|
|
|
-webkit-animation: spin 1s ease-in-out infinite;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes spin {
|
|
|
|
|
to { -webkit-transform: rotate(360deg); }
|
|
|
|
|
}
|
|
|
|
|
@-webkit-keyframes spin {
|
|
|
|
|
to { -webkit-transform: rotate(360deg); }
|
|
|
|
|
}
|
|
|
|
|
</style>
|
2012-04-16 23:15:27 +02:00
|
|
|
<script>
|
|
|
|
|
function show_alert() {
|
|
|
|
|
alert("I am an alert box!");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function show_confirm() {
|
|
|
|
|
var r = confirm("Press a button");
|
|
|
|
|
var msg = r ? "You pressed OK!" : "You pressed Cancel!";
|
|
|
|
|
document.getElementById('cm').innerText = msg;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function show_prompt() {
|
|
|
|
|
var name = prompt("Please enter your name" ,"Harry Potter");
|
|
|
|
|
if (name != null && name != "")
|
|
|
|
|
document.getElementById('pm').innerText = "Hello " + name + "!";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
window.onbeforeunload = function() {
|
|
|
|
|
return 'This is an onbeforeunload message.';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function update_time() {
|
|
|
|
|
document.getElementById('time').innerText = new Date().toLocaleString();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function setup() {
|
2013-01-18 21:04:16 +01:00
|
|
|
update_time();
|
2012-04-16 23:15:27 +02:00
|
|
|
setInterval(update_time, 1000);
|
2017-11-09 20:00:47 +01:00
|
|
|
|
|
|
|
|
if (location.hostname != 'tests' && location.hostname != 'localhost') {
|
|
|
|
|
alert('Parts of this page can only be run from tests or localhost.');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Enable all elements.
|
|
|
|
|
var elements = document.getElementById("form").elements;
|
|
|
|
|
for (var i = 0, element; element = elements[i++]; ) {
|
|
|
|
|
element.disabled = false;
|
|
|
|
|
}
|
2012-04-16 23:15:27 +02:00
|
|
|
}
|
|
|
|
|
|
2012-10-16 21:28:07 +02:00
|
|
|
function show_file_dialog(element, test) {
|
|
|
|
|
var message = 'DialogTest.' + test;
|
|
|
|
|
var target = document.getElementById(element);
|
|
|
|
|
|
2014-01-28 00:31:03 +01:00
|
|
|
// Results in a call to the OnQuery method in dialog_test.cpp
|
|
|
|
|
window.cefQuery({
|
|
|
|
|
request: message,
|
|
|
|
|
onSuccess: function(response) {
|
|
|
|
|
target.innerText = response;
|
|
|
|
|
},
|
|
|
|
|
onFailure: function(error_code, error_message) {}
|
2012-10-16 21:28:07 +02:00
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2012-04-16 23:15:27 +02:00
|
|
|
window.addEventListener('load', setup, false);
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
2013-09-03 23:58:02 +02:00
|
|
|
<body bgcolor="white">
|
2017-11-09 20:00:47 +01:00
|
|
|
<form id="form">
|
2012-04-16 23:15:27 +02:00
|
|
|
Click a button to show the associated dialog type.
|
|
|
|
|
<br/><input type="button" onclick="show_alert();" value="Show Alert">
|
|
|
|
|
<br/><input type="button" onclick="show_confirm();" value="Show Confirm"> <span id="cm"></span>
|
|
|
|
|
<br/><input type="button" onclick="show_prompt();" value="Show Prompt"> <span id="pm"></span>
|
2022-04-15 21:55:23 +02:00
|
|
|
<br/>input type="file" (.png): <input type="file" name="pic" accept=".png">
|
|
|
|
|
<br/>input type="file" (image/*): <input type="file" name="pic" accept="image/*">
|
|
|
|
|
<br/>input type="file" (multiple types): <input type="file" name="pic" accept="text/*,.js,.css,image/*">
|
2019-08-26 21:43:55 +02:00
|
|
|
<br/>input type="file" (directory): <input type="file" webkitdirectory accept="text/*,.js,.css,image/*">
|
2022-04-15 21:55:23 +02:00
|
|
|
<br/><input type="button" onclick="show_file_dialog('fop', 'FileOpenPng');" value="Show File Open (.png)" disabled="true"> <span id="fop"></span>
|
|
|
|
|
<br/><input type="button" onclick="show_file_dialog('foi', 'FileOpenImage');" value="Show File Open (image/*)" disabled="true"> <span id="foi"></span>
|
|
|
|
|
<br/><input type="button" onclick="show_file_dialog('fom', 'FileOpenMultiple');" value="Show File Open (multiple types/files)" disabled="true"> <span id="fom"></span>
|
2017-11-09 20:00:47 +01:00
|
|
|
<br/><input type="button" onclick="show_file_dialog('fof', 'FileOpenFolder');" value="Show File Open Folder" disabled="true"> <span id="fof"></span>
|
|
|
|
|
<br/><input type="button" onclick="show_file_dialog('fs', 'FileSave');" value="Show File Save" disabled="true"> <span id="fs"></span>
|
2012-04-16 23:15:27 +02:00
|
|
|
</form>
|
2024-03-12 20:47:10 +01:00
|
|
|
|
|
|
|
|
Observe page responsiveness:
|
|
|
|
|
<br/><br/>
|
|
|
|
|
<table><tr>
|
|
|
|
|
<td valign="top">
|
|
|
|
|
CSS:<br/><div id="loading"></div>
|
|
|
|
|
</td>
|
|
|
|
|
<td> </td>
|
|
|
|
|
<td valign="top">
|
|
|
|
|
JavaScript:<br/><div id="time"></div>
|
|
|
|
|
</td>
|
|
|
|
|
</tr></table>
|
|
|
|
|
(JavaScript will stop updating while alert/confirm/prompt is displayed)
|
2012-04-16 23:15:27 +02:00
|
|
|
</body>
|
|
|
|
|
</html>
|
