vmario/doodle3d-connect
0
0
Fork 0
mirror of https://github.com/Doodle3D/doodle3d-connect.git synced 2024-12-24 17:43:48 +01:00
Code Issues Releases Wiki Activity

Using Chosen library and small style tweaks

Browse Source
This commit is contained in:
peteruithoven 2014-02-25 14:23:07 +01:00
parent 557c36b84d
commit 4018794184
8 changed files with 73 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
chosen.html Normal file
View File

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html>
<head>
<title>Chosen</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="./img/webpage_icons/apple-touch-icon-144x144-precomposed.png" />
<link rel="icon" type="image/ico" href="./img/favicon.ico"/>
<meta id="Viewport" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes">
<link href="css/normalize.css" rel="stylesheet" media="screen">
<link href="css/chosen.min.css" rel="stylesheet" media="screen">
<style>
#network {
width: 200px;
}
</style>
<script src="js/libs/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="js/libs/chosen.jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
console.log("ready");
var networkSelector = $("#network");
networkSelector.chosen();
setTimeout(function() {
console.log("fill");
networkSelector.append(
$("<option></option>").val("a").html("Optie a"),
$("<option></option>").val("b").html("Optie b"),
$("<option></option>").val("c").html("Optie c")
);
networkSelector.trigger("chosen:updated");
},1000);
});
</script>
</head>
<body>
<form id="networkForm">
<select id="network" name="" data-placeholder="Choose a country...">
<!-- <option value=""></option> -->
</select>
</form>
</body>
</html>

3
css/chosen.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

9
css/main.css
View File

@ -90,7 +90,7 @@ box.connecting {
left: auto;
}
.box small {
margin: 1em 0 0 0;
margin: 0.5em 0 0 0;
display: block;
}
@ -157,8 +157,8 @@ form .row div {
}
.networkForm #network {
/*margin-right: 5px;*/
margin-right: 5px;
width: 180px;
}
.networkForm #ssid,
.networkForm #listNetworks,
@ -197,4 +197,7 @@ form .row div {
}
.networkForm #action.info {
background: #97DD8A;
}
.networkForm #action.none {
display: none;
}

BIN
img/chosen/chosen-sprite.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 646 B

BIN
img/chosen/chosen-sprite@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 872 B

4
index.html
View File

@ -11,6 +11,7 @@
<meta id="Viewport" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes">
<link href="css/normalize.css" rel="stylesheet" media="screen">
<link href="css/chosen.min.css" rel="stylesheet" media="screen">
<link href="css/main.css" rel="stylesheet" media="screen">
<link href="css/bg.css" rel="stylesheet" media="screen">
<link href="css/popups.css" rel="stylesheet" media="screen">
@ -19,6 +20,7 @@
<script src="js/libs/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="js/libs/spin.min.js" type="text/javascript"></script>
<script src="js/libs/jquery.showpassword.js" type="text/javascript"></script>
<script src="js/libs/chosen.jquery.min.js" type="text/javascript"></script>
<script src="js/api/NetworkAPI.js" type="text/javascript"></script>
<script src="js/api/ConnectAPI.js" type="text/javascript"></script>
<script src="js/NetworkPanel.js" type="text/javascript"></script>
@ -58,7 +60,7 @@
<p>Connect this box to your WiFi network:</p>
<div class="row">
<label for="ssid">Network:</label><input type="text" name="ssid" id="ssid"><input type="button" name="list" value="List" class="button" id="listNetworks"/>
<select id="network" name=""></select><input type="button" name="refresh" value="Refresh" class="button" id="refreshNetworks"/><br/>
<select id="network" data-placeholder="Please select"></select>
</div>
<div id="passwordSettings" class="row">
<div>

18
js/NetworkPanel.js
View File

@ -10,7 +10,7 @@ function NetworkPanel() {
this.id;
var NETWORK_SELECTOR_DEFAULT = "please select"; // used as first item in networks list
var NETWORK_SELECTOR_DEFAULT = ""; // used as first item in networks list
//var NETWORK_SELECTOR_CUSTOM = "join other network...";
// network mode
@ -74,7 +74,11 @@ function NetworkPanel() {
_element.submit(connectToNetwork);
_networkSelector.change(networkSelectorChanged);
_networkSelector.blur(networkSelectorBlurred);
_networkSelector.chosen({width: "180px"});
_networkSelector.on('chosen:hiding_dropdown', function() {
_self.refreshNetworks
});
//_networkSelector.trigger("chosen:updated");
_passwordField.showPassword();
_statusChangeHandler = statusChangeHandler;
@ -98,12 +102,6 @@ function NetworkPanel() {
var selectedOption = $(this).find("option:selected");
_self.selectNetwork(selectedOption.val());
};
function networkSelectorBlurred(e) {
console.log("networkSelectorBlurred");
var selectedOption = $(this).find("option:selected");
//_self.selectNetwork(selectedOption.val());
};
this.retrieveStatus = function(completeHandler) {
//console.log(_self.id,"NetworkPanel:retrieveStatus");
@ -212,6 +210,9 @@ function NetworkPanel() {
actionText = "Please check password";
_actionTextField.attr("class","error");
break;
default:
_actionTextField.attr("class","none");
break;
}
_actionTextField.html(actionText);
@ -262,6 +263,7 @@ function NetworkPanel() {
_networkSelector.val(_currentNetwork);
//_self.selectNetwork(_currentNetwork);
}
_networkSelector.trigger("chosen:updated");
}
this.selectNetwork = function(ssid) {

2
js/libs/chosen.jquery.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long