Skip to content

Commit cb9c2ed

Browse files
AngelFQCAngelFQC
committed
Allow down documents in device storage #8
Allow overwrite files with same name #8 Improve UI for download documents in device #8
1 parent 5ca51c3 commit cb9c2ed

7 files changed

Lines changed: 136 additions & 55 deletions

File tree

‎config.xml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
<platform name="android">
2121
<allow-intent href="market:*"/>
2222
<preference name="android-targetSdkVersion" value="17"/>
23+
<preference name="AndroidPersistentFileLocation" value="Compatibility" />
2324
</platform>
2425
<platform name="ios">
2526
<allow-intent href="itms:*"/>

‎www/css/app.css‎

Lines changed: 13 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -113,41 +113,7 @@ hr {
113113
-moz-box-shadow: 0px 10px 13px -10px rgba(0,0,0,0.43);
114114
box-shadow: 0px 10px 13px -10px rgba(0,0,0,0.43);
115115
}
116-
.list-documents{
117-
padding: 0;
118-
border-left: 1px solid #DDD;
119-
border-right: 1px solid #DDD;
120-
margin-bottom: 15px;
121-
}
122-
.list-documents li{
123-
padding: 0;
124-
border-top: 1px solid #DDD;
125-
border-bottom: 1px solid #DDD;
126-
margin-bottom: -1px;
127-
}
128-
.list-documents li.media{
129-
margin-top: 0;
130-
}
131-
.list-documents li .btn-download{
132-
display: inline-block;
133-
padding: 10px;
134-
}
135-
.list-documents li .btn-download .media-heading{
136-
color: #212121;
137-
}
138-
.list-documents li .btn-download:hover,
139-
.list-documents li .btn-download:focus
140-
{
141-
background-color: #E5EDF9;
142-
text-decoration: none;
143-
}
144-
.list-documents li .btn-download .media-body .path-file{
145-
color: #212121;
146-
margin-bottom: 5px;
147-
}
148-
.list-documents li .btn-download .media-body .size-file{
149-
color: #757575;
150-
}
116+
151117
.panel-heading img{
152118
float: left;
153119
padding-right: 5px;
@@ -158,6 +124,18 @@ hr {
158124
padding: 10px 2px;
159125
}
160126

127+
/* Course documents */
128+
#ls-course-documents {
129+
padding-bottom: 1em;
130+
}
131+
#ls-course-documents .media-heading a:active,
132+
#ls-course-documents .media-heading a:hover {
133+
text-decoration: none;
134+
}
135+
#ls-course-documents .progress {
136+
margin-bottom: 0;
137+
}
138+
161139
/* Small devices (tablets, 768px and up) */
162140
@media (min-width: 768px) {
163141
}

‎www/src/nls/es/lang.js‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,5 +53,21 @@ define({
5353
phoneNumber: "Número de teléfono",
5454
signingOut: "Cerrando sessión",
5555
loading: "Cargando",
56-
noContentAvailable: "Contenido no disponible"
56+
noContentAvailable: "Contenido no disponible",
57+
downloadComplete: "Download completed",
58+
downloadFailed: "Download failed",
59+
sessions: "Sessiones de formación",
60+
fromDateUntilDate: function (from, until) {
61+
if (from && !until) {
62+
return "Desde " + from;
63+
}
64+
65+
if (!from && until) {
66+
return "Hasta " + until;
67+
}
68+
69+
return "Desde " + from + " hasta " + until;
70+
},
71+
downloadCompleted: "Descarga completada",
72+
downloadFailed: "Descarga fallida"
5773
});

‎www/src/nls/root/lang.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,5 +65,7 @@ define({
6565
}
6666

6767
return "From " + from + " until " + until;
68-
}
68+
},
69+
downloadCompleted: "Download completed",
70+
downloadFailed: "Download failed"
6971
});

‎www/src/template/course-document.html‎

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,26 @@
1-
<a href="#" class="btn-download" target="_blank">
2-
<div class="media-left">
3-
<img class="media-object" src="img/<%= icon %>" alt="<%= title %>" width="40">
1+
<div class="media-left">
2+
<img class="media-object center-block" src="img/<%= icon %>" alt="<%= title %>" width="32">
3+
</div>
4+
<div class="media-body word-break-all">
5+
<h5 class="media-heading">
6+
<a href="#" class="btn-download"><%= title %></a>
7+
</h5>
8+
<% if (type === 'file') { %>
9+
<div class="progress hidden">
10+
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
11+
<span class="sr-only">0%</span>
12+
</div>
13+
</div>
14+
<div class="text-success hidden">
15+
<span class="fa fa-check" aria-hidden="true"></span> <%= lang.downloadCompleted %>
16+
</div>
17+
<div class="text-danger hidden">
18+
<span class="fa fa-check" aria-hidden="true"></span> <%= lang.downloadFailed %>
19+
</div>
20+
<% } %>
21+
</div>
22+
<% if (type === 'file') { %>
23+
<div class="media-right media-bottom">
24+
<small class="center-block text-center"><%= size %></small>
425
</div>
5-
<div class="media-body word-break-all">
6-
<h5 class="media-heading"><%= title %></h5>
7-
<p class="path-file"><%= path %></p>
8-
<% if (type === 'file') { %>
9-
<div class="size-file"><%= size %></div>
10-
<% } %>
11-
</div>
12-
</a>
26+
<% } %>

‎www/src/template/course-documents.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,5 @@
99
</nav>
1010

1111
<section class="container" id="container">
12-
<ul class="list-documents ul-unstyled" id="ls-course-documents"></ul>
12+
<div class="list-documents media-list" id="ls-course-documents"></div>
1313
</section>

‎www/src/view/course-document.js‎

Lines changed: 76 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,12 @@ define([
22
'backbone',
33
'text!template/course-document.html'
44
], function (Backbone, viewTemplate) {
5+
function onError(error) {
6+
console.error(error);
7+
}
8+
59
var CourseDocumentView = Backbone.View.extend({
6-
tagName: 'li',
10+
tagName: 'div',
711
className: 'media',
812
template: _.template(viewTemplate),
913
render: function () {
@@ -17,15 +21,81 @@ define([
1721
btnDownloadOnClick: function (e) {
1822
e.preventDefault();
1923

20-
if (this.model.get('type') === 'file') {
21-
window.open(this.model.get('url'));
24+
var filePath = this.model.get('path'),
25+
fileURL = this.model.get('url');
26+
27+
if (this.model.get('type') !== 'file') {
28+
Backbone.history.navigate('#documents/' + this.model.get('id'), {
29+
trigger: true
30+
});
2231

2332
return;
2433
}
2534

26-
Backbone.history.navigate('#documents/' + this.model.get('id'), {
27-
trigger: true
28-
});
35+
var $pgb = this.$el.find('.progress'),
36+
$txtSuccess = this.$el.find('.text-success'),
37+
$txtDanger = this.$el.find('.text-danger');
38+
39+
if (!$pgb.length) {
40+
return;
41+
}
42+
43+
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fs) {
44+
fs.root.getFile(filePath, {
45+
create: true,
46+
exclusive: false
47+
}, function (fileEntry) {
48+
$txtDanger.addClass('hidden');
49+
$txtSuccess.addClass('hidden');
50+
51+
$pgb
52+
.removeClass('hidden')
53+
.removeAttr('aria-hidden')
54+
.find('.progress-bar')
55+
.attr('aria-valuenow', 0)
56+
.css('width', 0 + '%')
57+
.find('.sr-only')
58+
.text(0 + '%');
59+
60+
var fileTransfer = new FileTransfer();
61+
fileTransfer.onprogress = function (e) {
62+
if (e.lengthComputable) {
63+
var value = e.loaded / e.total * 100,
64+
percentage = value.toFixed(2);
65+
66+
$pgb.find('.progress-bar')
67+
.attr('aria-valuenow', percentage)
68+
.css('width', percentage + '%')
69+
.find('.sr-only')
70+
.text(percentage + '%');
71+
72+
return;
73+
}
74+
75+
$pgb.find('.progress-bar')
76+
.addClass('progress-bar-striped active')
77+
.attr('aria-valuenow', 100)
78+
.css('width', 100 + '%')
79+
.find('.sr-only')
80+
.text(100 + '%');
81+
};
82+
fileTransfer.download(
83+
encodeURI(fileURL),
84+
fileEntry.toURL(),
85+
function () {
86+
$pgb.addClass('hidden');
87+
88+
$txtSuccess.removeClass('hidden');
89+
},
90+
function () {
91+
$pgb.addClass('hidden');
92+
93+
$txtDanger.removeClass('hidden');
94+
},
95+
true
96+
);
97+
}, onError);
98+
}, onError);
2999
}
30100
});
31101

0 commit comments

Comments
 (0)