Skip to content

Commit 2d8a072

Browse files
author
Kaustav Das Modak
committed
Adjust behaviours and polish up styles
Signed-off-by: Kaustav Das Modak <[email protected]>
1 parent 3e1dfa3 commit 2d8a072

File tree

3 files changed

+107
-56
lines changed

3 files changed

+107
-56
lines changed

‎css/app.css‎

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,14 @@ x-flipbox {
2626
padding: 20px;
2727
top: 45px;
2828
left: 0;
29-
overflow: auto;
29+
overflow-x: hidden;
30+
overflow-y: auto;
31+
}
32+
33+
x-appbar .button {
34+
padding-left: 10px;
35+
padding-right: 10px;
36+
font-size: 0.8em;
3037
}
3138

3239
#searchform-inner {
@@ -61,6 +68,10 @@ x-flipbox {
6168
text-indent: 10px;
6269
}
6370

71+
#searchbox:disabled {
72+
color: #999;
73+
}
74+
6475
#searchsubmit {
6576
display: block;
6677
width: 100%;
@@ -69,12 +80,16 @@ x-flipbox {
6980
text-align: center;
7081
text-decoration: none;
7182
background-color: #04B309;
72-
color: #fff;
83+
color: #d6d6d6;
7384
outline: 0;
7485
border: 1px solid #038207;
7586
border-radius: 0;
7687
}
7788

89+
#searchsubmit.active {
90+
color: #fff;
91+
}
92+
7893
#resultsbox {
7994
list-style-type: none;
8095
margin: 0;
@@ -93,6 +108,11 @@ x-flipbox {
93108
border-color: #0095DD;
94109
}
95110

111+
li > p:not(.resultitem) {
112+
padding: 0.5em;
113+
margin: 0.5em;
114+
}
115+
96116
.resultitem h4 {
97117
padding: 0;
98118
margin: 0;

‎index.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<title>Finder</title>
66
<meta name="description" content="Search and pick files from device">
77

8-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
99

1010
<link rel="stylesheet" type="text/css" href="css/normalize.css">
1111
<link rel="stylesheet" type="text/css" href="css/brick.css">
@@ -16,19 +16,19 @@
1616
<body>
1717

1818
<x-appbar>
19-
<button id="menu-btn">≡</button>
19+
<button id="menu-btn" class="button">≡</button>
2020
<h1>Finder</h1>
21-
<button id="reset-btn">Reset</button>
21+
<button id="reset-btn" class="button">Reset</button>
2222
</x-appbar>
2323
<x-flipbox>
2424
<div class="main-content">
2525
<form id="searchform">
2626
<div id="searchform-inner">
2727
<div id="searchbox-wrapper">
28-
<input id="searchbox" type="text" placeholder="Search..." maxlength="20" required>
28+
<input id="searchbox" type="text" placeholder="Search..." maxlength="20">
2929
</div>
3030
<div id="searchsubmit-wrapper">
31-
<a id="searchsubmit" class="button" href="#">Go</a>
31+
<a id="searchsubmit" class="button active" href="#">Go</a>
3232
</div>
3333
</div>
3434
</form>

‎js/app.js‎

Lines changed: 80 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,34 @@ window.addEventListener('DOMContentLoaded', function() {
3636
}
3737
});
3838

39+
/**
40+
* Clean up artefacts to clear up memory
41+
*/
42+
var cleanupsearch = function () {
43+
results = [];
44+
resultsbox.html("");
45+
searchcompletecount = 0;
46+
totalfilematchcount = 0;
47+
};
48+
49+
/**
50+
* Interactions when search has started
51+
*/
52+
var startprogress = function () {
53+
searchbox.attr('disabled', 'disabled');
54+
searchsubmit.removeClass('active');
55+
wobblebar.removeClass("hide");
56+
};
57+
58+
/**
59+
* Interactions when search has ended
60+
*/
61+
var stopprogress = function () {
62+
searchbox.removeAttr('disabled');
63+
searchsubmit.addClass('active');
64+
wobblebar.addClass("hide");
65+
};
66+
3967
/**
4068
* Trigger search
4169
*/
@@ -47,8 +75,17 @@ window.addEventListener('DOMContentLoaded', function() {
4775
};
4876

4977

50-
finder.events.addListener("empty", function (needle) {
78+
finder.events.addListener("searchCancelled", function () {
79+
cleanupsearch();
80+
stopprogress();
81+
searchbox.focus();
5182
wobblebar.addClass("hide");
83+
});
84+
85+
finder.events.addListener("empty", function (needle) {
86+
cleanupsearch();
87+
stopprogress();
88+
searchbox.focus();
5289
resultsbox.append($("<li><p><em>No results found.</em></p></li>"));
5390
});
5491

@@ -57,57 +94,55 @@ window.addEventListener('DOMContentLoaded', function() {
5794
});
5895

5996
finder.events.on("searchBegin", function (needle) {
60-
results = [];
61-
resultsbox.html("");
62-
searchcompletecount = 0;
63-
totalfilematchcount = 0;
64-
});
65-
66-
finder.events.on("storageSearchBegin", function (storageName, needle) {
67-
wobblebar.removeClass("hide");
97+
cleanupsearch();
98+
startprogress();
6899
});
69100

70101
finder.events.on("searchComplete", function (storageName, needle, filematchcount) {
71-
results.length && results.forEach(function (result, i) {
72-
var resultitem = $("<li></li>").attr({
73-
"data-file" : result.file.name,
74-
"data-type" : result.file.type,
75-
"data-storage": result.storageName,
76-
"data-result-index": i,
77-
"class" : "resultitem panel"
102+
103+
searchcompletecount++;
104+
totalfilematchcount += filematchcount;
105+
106+
if (searchcompletecount >= finder.storages.length) {
107+
108+
results.length && results.forEach(function (result, i) {
109+
var resultitem = $("<li></li>").attr({
110+
"data-file" : result.file.name,
111+
"data-type" : result.file.type,
112+
"data-storage": result.storageName,
113+
"data-result-index": i,
114+
"class" : "resultitem panel"
115+
});
116+
resultitem.append($("<h4>" + result.fileinfo.name + "</h4><small>" + result.fileinfo.path + "</small>"));
117+
resultsbox.append(resultitem);
78118
});
79-
resultitem.append($("<h4>" + result.fileinfo.name + "</h4><small>" + result.fileinfo.path + "</small>"));
80-
resultsbox.append(resultitem);
81-
});
82-
83-
$(".resultitem").bind("click", function (event) {
84-
if (isactivity) {
85-
$(document).trigger("finderFilePicked", [results[$(this).attr("data-result-index")].file]);
86-
} else {
87-
var activityname = "open";
88-
89-
if ($.inArray($(this).attr("data-type"), ["application/pdf"]) > -1) {
90-
activityname = "view";
91-
}
92119

93-
var activity = new MozActivity({
94-
name: activityname,
95-
data: {
96-
type: $(this).attr("data-type"),
97-
blob: results[$(this).attr("data-result-index")].file
120+
$(".resultitem").bind("click", function (event) {
121+
if (isactivity) {
122+
$(document).trigger("finderFilePicked", [results[$(this).attr("data-result-index")].file]);
123+
} else {
124+
var activityname = "open";
125+
126+
if ($.inArray($(this).attr("data-type"), ["application/pdf"]) > -1) {
127+
activityname = "view";
98128
}
99-
});
100-
}
101-
});
102129

130+
var activity = new MozActivity({
131+
name: activityname,
132+
data: {
133+
type: $(this).attr("data-type"),
134+
blob: results[$(this).attr("data-result-index")].file
135+
}
136+
});
137+
}
138+
});
139+
140+
stopprogress();
103141

104-
searchcompletecount++;
105-
totalfilematchcount += filematchcount;
106-
if (searchcompletecount >= finder.storages.length) {
107-
wobblebar.addClass("hide");
108142
if(!totalfilematchcount) {
109143
resultsbox.append($("<li><p><em>No results found.</em></p></li>"));
110144
}
145+
111146
searchcompletecount = 0;
112147
totalfilematchcount = 0;
113148
}
@@ -117,7 +152,7 @@ window.addEventListener('DOMContentLoaded', function() {
117152
* Bind search trigger to search form submit
118153
*/
119154
searchform.bind("submit", searchtrigger);
120-
searchsubmit.bind("click", searchtrigger);
155+
$(searchsubmit.selector + ".active").bind("click", searchtrigger);
121156

122157
/**
123158
* UI sweetness
@@ -131,12 +166,8 @@ window.addEventListener('DOMContentLoaded', function() {
131166

132167
$("#reset-btn").bind("click", function (event) {
133168
event.preventDefault();
134-
searchbox.val("");
135-
results = [];
136-
resultsbox.html("");
137-
searchbox.focus();
138-
searchcompletecount = 0;
139-
totalfilematchcount = 0;
140-
wobblebar.addClass("hide");
169+
cleanupsearch();
170+
stopprogress();
171+
searchbox.val("");;
141172
});
142173
});

0 commit comments

Comments
 (0)