Permalink
Browse files

Added active styling for buttons and list items

  • Loading branch information...
1 parent 6367a79 commit 0d5e5e190cb9ba5409bd836b7ec470bc8e1f4fb8 @devicewall devicewall committed Oct 15, 2011
Showing with 54 additions and 13 deletions.
  1. +10 −4 assets/www/app.css
  2. +3 −2 assets/www/js/app_history.js
  3. +8 −7 assets/www/js/bookmarks.js
  4. +33 −0 assets/www/js/main.js
View
@@ -77,13 +77,19 @@ iframe#main {
position: relative;
}
-.listItem
-{
+.listItem {
padding-top:12px;
padding-bottom:12px;
height: 22px;
line-height: 22px;
+ width: 100%;
+ display: block;
}
+
+.listItem.active, .deleteButton.active {
+ background-color: #aff6ff;
+}
+
.iconSearchResult
{
position:relative;
@@ -147,7 +153,7 @@ iframe#main {
}
-#search:active {
+#search.active {
background: url(image/spr.png) -43px 5px no-repeat,
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#444), color-stop(0.25, #666));
}
@@ -245,7 +251,7 @@ iframe#main {
border-left: 1px solid #777;
}
-.closeButton:active {
+.closeButton.active {
background-color: #666;
}
@@ -68,8 +68,8 @@ function getHistory()
function listHistory(record, index)
{
- var markup = "<div class='listItemContainer' onclick=\"javascript:onHistoryItemClicked(\'" + record.value + "\');\">";
- markup += "<div class='listItem'>";
+ var markup = "<div class='listItemContainer'>";
+ markup += "<div class='listItem' onclick=\"javascript:onHistoryItemClicked(\'" + record.value + "\');\">";
markup += "<span class='iconHistory'></span>";
markup += "<span class='text'>" + record.key + "</span>"
markup += "</div>";
@@ -121,4 +121,5 @@ function showHistory()
hideOverlayDivs();
$('#history').toggle();
hideContent();
+ setActiveState();
}
@@ -75,8 +75,9 @@ function getBookmarks()
this.each(function(record, index) {
listBookmarks(record, index);
});
+
+
});
-
showBookmarks();
}
@@ -87,6 +88,8 @@ function showBookmarks()
hideOverlayDivs();
$('#bookmarks').toggle();
hideContent();
+
+ setActiveState();
}
function hideBookmarks()
@@ -100,16 +103,14 @@ function hideBookmarks()
function listBookmarks(record, index)
{
var markup = "<div class='listItemContainer'>";
- markup += "<div class='listItem' onclick=\"javascript:onBookmarkItemClicked(\'" + record.value + "\');\">";
+ markup += "<a class='listItem' onclick=\"javascript:onBookmarkItemClicked(\'" + record.value + "\');\">";
markup += "<span class='iconBookmark'></span>";
markup += "<span class='text deleteEnabled'>" + record.key + "</span>";
- markup += "</div>";
- markup += "<div>";
- markup += "<span class='deleteBookmark deleteButton'><a href=\"javascript:deleteBookmarkPrompt(\'" + record.key + "\');\"></a></span>";
- markup += "</div>";
+ markup += "</a>";
+ markup += "<a class='deleteBookmark deleteButton' href=\"javascript:deleteBookmarkPrompt(\'" + record.key + "\');\"></a>";
markup += "</div>";
- document.getElementById("bookmarksList").innerHTML += markup;
+ $('#bookmarksList').append(markup);
}
function onBookmarkItemClicked(url, index)
View
@@ -14,6 +14,7 @@ function onDeviceReady()
document.addEventListener("searchbutton", onSearchButton, false);
loadContent();
+ setActiveState();
}
function onBackButton()
@@ -211,3 +212,35 @@ function enableOptionsMenu()
PGMenuElement.update();
*/
}
+
+function setActiveState() {
+ var applicableClasses = [
+ '.deleteButton',
+ '.listItem',
+ '#search',
+ '.closeButton'
+ ];
+
+ for (var key in applicableClasses) {
+ applicableClasses[key] += ':not(.activeEnabled)';
+ }
+ console.log(applicableClasses);
+ function onTouchEnd() {
+ $('.active').removeClass('active');
+ $('body').unbind('touchend', onTouchEnd);
+ $('body').unbind('touchmove', onTouchEnd);
+ }
+
+ function onTouchStart() {
+ $(this).addClass('active');
+ $('body').bind('touchend', onTouchEnd);
+ $('body').bind('touchmove', onTouchEnd);
+ }
+
+ setTimeout(function() {
+ $(applicableClasses.join(',')).each(function(i) {
+ $(this).bind('touchstart', onTouchStart);
+ $(this).addClass('activeEnabled');
+ });
+ }, 500);
+}

0 comments on commit 0d5e5e1

Please sign in to comment.