Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-03-16 22:10:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Converter demo: Added ability to remove individual conversions. Removed distance defaults until those can be added by hand.

Browse source
This commit is contained in:
jzaefferer 2010-10-08 12:59:20 +02:00
parent 044b54df2f
commit 281ba28317
3 changed files with 50 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
experiments/converter/application.js
View file

@ -10,7 +10,8 @@ $(function() {
};
function list() {
var ul = $("#conversions").empty().removeAttr("data-mobilized", false);
var ul = $("#conversions").empty().removeAttr("data-mobilized"),
ulEdit = $("#edit-conversions").empty().removeAttr("data-mobilized");
$.each(all, function(index, conversion) {
// if last update was less then a minute ago, don't update
if (conversion.type == "currency" && !conversion.rate || conversion.updated && conversion.updated + 60000 < +new Date) {
@ -27,11 +28,15 @@ $(function() {
$("#conversion-field").tmpl(conversion, {
symbols: symbols
}).appendTo(ul);
$("#conversion-edit-field").tmpl(conversion, {
symbols: symbols
}).appendTo(ulEdit);
});
$.mobilize(ul);
// TODO trigger a custom event instead of keyup?
$("#term").keyup();
}
var all = conversions.all();
list();
$("#term").keyup(function() {
var value = this.value;
$.each(all, function(index, conversion) {
@ -40,7 +45,8 @@ $(function() {
: "Rate not available, yet."
);
});
}).keyup().focus();
}).focus();
list();
$("form").submit(function() {
$("#term").blur();
return false;
@ -65,4 +71,13 @@ $(function() {
list();
return false;
});
$("#edit-conversions").click(function(event) {
var target = $(event.target).closest(".deletebutton");
if (target.length) {
conversions.remove(target.prev("label").attr("for"));
list();
}
return false;
})
});

29
experiments/converter/index.html
View file

@ -17,6 +17,18 @@
.field { padding: 15px; }
.editbutton { float: right; }
</style>
<script id="conversion-field" type="text/x-jquery-tmpl">
<li>
<label for="${from}${to}" class="ui-input-text conversion-${type}" title="From ${from} to ${to}">${$item.symbols[from]} to ${$item.symbols[to]}</label>
<input type="text" readonly="readonly" name="${from}${to}" id="${from}${to}" value="" />
</li>
</script>
<script id="conversion-edit-field" type="text/x-jquery-tmpl">
<li>
<label for="${from}${to}" class="ui-input-text conversion-${type}" title="From ${from} to ${to}">${$item.symbols[from]} to ${$item.symbols[to]}</label>
<a href="#" class="deletebutton ui-aux">Delete</a>
</li>
</script>
<div data-role="header">
<a href="#customize" class="editbutton ui-aux" data-transition="flip">Edit</a>
@ -31,12 +43,6 @@
<div class="ui-content">
<ul id="conversions" data-role="listview" data-inset="true"></ul>
</div>
<script id="conversion-field" type="text/x-jquery-tmpl">
<li>
<label for="name" class="ui-input-text conversion-${type}" title="From ${from} to ${to}">${$item.symbols[from]} to ${$item.symbols[to]}</label>
<input type="text" readonly="readonly" name="${from}${to}" id="${from}${to}" value="" />
</li>
</script>
</div>
</div>
@ -48,15 +54,18 @@
<div data-role="content" class="ui-body">
<h2>sort conversions, add new ones or delete some</h2>
<a href="#add-dialog" data-role="button" data-rel="dialog" data-transition="pop">Add currency conversion</a>
<a href="#add-currency-dialog" data-role="button" data-rel="dialog" data-transition="pop">Add currency conversion</a>
<a id="restore" href="#" data-role="button">Restore default</a>
<a id="clear" href="#" data-role="button">Delete all conversions</a>
<div class="ui-content">
<ul id="edit-conversions" data-role="listview" data-inset="true"></ul>
</div>
</div>
</div>
<div data-role="page" id="add-dialog" class="ui-body-a">
<div data-role="page" id="add-currency-dialog" class="ui-body-a">
<div data-role="header" data-theme="d">
<h1>Add conversion</h1>
<h1>Add currency conversion</h1>
<a href="index.html" class="ui-back" data-icon="arrow-l">Cancel</a>
</div>
@ -74,7 +83,7 @@
<option value="USD">USD - US Dollar</option>
<option value="GBP">GBP - Great Britain Pound</option>
</select>
<a id="add" href="#add-dialog" data-role="button">Add conversion</a>
<a id="add" href="#add-dialog" data-role="button">Add currency conversion</a>
</div>
</div>

15
experiments/converter/storage.js
View file

@ -4,7 +4,9 @@
type: "currency",
from: "USD",
to: "EUR"
},
}
// TODO add back in as defaults once its possible to add other conversions, not just currencies
/*,
{
type: "distance",
from: "Miles",
@ -16,7 +18,7 @@
from: "inch",
to: "centimeter",
rate: 2.54
}
}*/
];
// TODO fallback to whatever else when localStorage isn't available
@ -48,6 +50,15 @@
conversions.length = 0;
$.extend(conversions, defaults);
this.store();
},
remove: function(tofrom) {
$.each(conversions, function(index, conversion) {
if ((conversion.from + conversion.to) == tofrom) {
conversions.splice(index, 1);
return false;
}
});
this.store();
}
};