diff options
| -rw-r--r-- | templates/offline.html | 35 | ||||
| -rw-r--r-- | www/css/fms.css | 10 | ||||
| -rw-r--r-- | www/js/views/offline.js | 91 | ||||
| -rw-r--r-- | www/js/views/photo.js | 23 | ||||
| -rw-r--r-- | www/templates/en/offline.html | 35 | ||||
| -rw-r--r-- | www/templates/es/offline.html | 35 |
6 files changed, 129 insertions, 100 deletions
diff --git a/templates/offline.html b/templates/offline.html index bba1075..214170e 100644 --- a/templates/offline.html +++ b/templates/offline.html @@ -1,7 +1,7 @@ <div data-role="header" data-position="fixed"> <a id="offline-prev-btn" class="ui-btn-left">[% loc('Try Again') %]</a> <h1>[% loc('Offline') %]</h1> - <a id="offline-next-btn" data-icon="arrow-r" data-iconpos="right" class="ui-btn-right">[% loc('Skip') %]</a> + <a id="offline-next-btn" data-icon="arrow-r" data-iconpos="right" class="ui-btn-right"><%= files.length == 0 ? "[% loc('Skip') %]" : "[% loc('Next') %]" %></a> </div> <div id="locating" class="nodisplay"> <div class="radar"></div> @@ -42,30 +42,25 @@ </div> <div> - <textarea data-role="none" rows="7" cols="26" name="detail" id="form_detail" placeholder="Please fill in details of the problem." required><%= details %></textarea> + <textarea data-role="none" rows="2" cols="26" name="detail" id="form_detail" placeholder="Please fill in details of the problem." required><%= details %></textarea> </div> </div> - <% if ( files.length > 0 ) { %> - <div id="add_photo" style="display: none"> - <% } else { %> - <div id="add_photo"> + <% if ( files.length < CONFIG.MAX_PHOTOS ) { %> + <div id="add_photo"> + <input data-icon="fms-photo-new" value="[% loc('Take a new photo') %]" type="button" name="photo_button" id="id_photo_button" data-role="button" data-theme="a"> + <input data-icon="fms-photo-existing" value="[% loc('Add an existing photo') %]" type="button" name="existing" id="id_existing" data-role="button" data-theme="c"> + </div> <% } %> - <label>[% loc('Add a Photo ') %]<em>[% loc('(optional)') %]</em></label> - <input data-icon="fms-photo-new" value="[% loc('Take a new photo') %]" type="button" name="photo_button" id="id_photo_button" data-role="button" data-theme="a"> - <input data-icon="fms-photo-existing" value="[% loc('Add an existing photo') %]" type="button" name="existing" id="id_existing" data-role="button" data-theme="c"> - </div> - <% if ( files.length == 0 ) { %> - <div id="display_photo" style="display: none"> - <% } else { %> - <div id="display_photo"> - <% } %> - <label>[% loc('Your Photo') %]</label> - <div class="photo"> - <img class="small" id="photo" src="<%= files[0] %>" /> + <% if ( files.length > 0 ) { %> + <div class="photo-wrapper"> + <% _.each(files, function(file, index) { %> + <div class="photo" style="background-image: url('<%= file %>');"> + <a data-role="none" class="photo-corner-button del_photo_button" data-file-index="<%= index %>">X</a> + </div> + <% }); %> </div> - <input value="[% loc('Remove Photo') %]" type="button" name="del_photo_button" class="del_photo_button" data-role="button" data-theme="a"> - </div> + <% } %> </div> </div> diff --git a/www/css/fms.css b/www/css/fms.css index de94e95..7307f83 100644 --- a/www/css/fms.css +++ b/www/css/fms.css @@ -400,6 +400,10 @@ text-align: center; } + #offline textarea { + min-height: 0; + } + /* home screen */ #front-page div[data-role='content'] { @@ -778,6 +782,12 @@ font-size: 30px; } + /* On the offline page the UI is ordered differently, so we want + to stop the button overlapping the 'add another photo' butto' */ + #offline .del_photo_button.photo-corner-button { + top: 0; + } + @media only screen and (max-width: 800px) and (min-width: 600px) { img.placeholder { height: 398px; diff --git a/www/js/views/offline.js b/www/js/views/offline.js index c5264a1..a85bd71 100644 --- a/www/js/views/offline.js +++ b/www/js/views/offline.js @@ -9,7 +9,7 @@ events: { 'pagehide': 'destroy', - 'pagebeforeshow': 'beforeShow', + 'pagebeforeshow': 'beforeDisplay', 'pageshow': 'afterDisplay', 'vclick .ui-btn-left': 'onClickButtonPrev', 'vclick .ui-btn-right': 'onClickButtonNext', @@ -19,7 +19,8 @@ 'vclick #locate': 'onClickLocate', 'vclick #locate_cancel': 'onClickCancel', 'blur input': 'toggleNextButton', - 'blur textarea': 'toggleNextButton' + 'blur textarea': 'blurTextArea', + 'focus textarea': 'focusTextArea' }, _back: function() { @@ -30,7 +31,7 @@ var hasContent = false; if ( $('#form_title').val() || $('#form_detail').val() || - this.model.get('lat') || this.model.get('file') ) { + this.model.get('lat') || this.model.get('files').length > 0 ) { hasContent = true; } @@ -39,11 +40,22 @@ afterDisplay: function() { $('body')[0].scrollTop = 0; - $('div[data-role="content"]').show(); - }, - beforeShow: function() { - $('div[data-role="content"]').hide(); + // The height of the photos container needs to be adjusted + // depending on the number of photos - if the max number of + // photos have already been added then the 'add photo' UI isn't + // shown so we should use all the vertical space for the + // thumbnails. + var wrapperHeight = $(".ui-content").height(); + wrapperHeight -= $(".ui-content .notopmargin").outerHeight(true); + wrapperHeight -= $(".ui-content #locate_result").outerHeight(true); + wrapperHeight -= $(".ui-content .inputcard").outerHeight(true); + wrapperHeight -= $(".ui-content #add_photo").outerHeight(true); + $(".photo-wrapper").height(wrapperHeight); + }, + + beforeDisplay: function() { + this.fixPageHeight(); this.toggleNextButton(); }, @@ -55,6 +67,15 @@ } }, + focusTextArea: function() { + $("textarea#form_detail").get(0).rows = 7; + }, + + blurTextArea: function(e) { + $("textarea#form_detail").get(0).rows = 2; + this.toggleNextButton(); + }, + failedLocation: function(details) { this.finishedLocating(); this.locateCount = 21; @@ -73,32 +94,47 @@ takePhoto: function() { var that = this; + $.mobile.loading('show'); navigator.camera.getPicture( function(imgURI) { that.addPhotoSuccess(imgURI); }, function(error) { that.addPhotoFail(error); }, { saveToPhotoAlbum: true, quality: 49, destinationType: Camera.DestinationType.FILE_URI, sourceType: navigator.camera.PictureSourceType.CAMERA, correctOrientation: true }); }, addPhoto: function() { var that = this; + $.mobile.loading('show'); navigator.camera.getPicture( function(imgURI) { that.addPhotoSuccess(imgURI); }, function(error) { that.addPhotoFail(error); }, { saveToPhotoAlbum: false, quality: 49, destinationType: Camera.DestinationType.FILE_URI, sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY, correctOrientation: true }); }, addPhotoSuccess: function(imgURI) { - var move = FMS.files.moveURI( imgURI ); + var move; + // on iOS the photos go into a temp folder in the apps own filespace so we + // can move them, and indeed have to as the tmp space is cleaned out by the OS + // so draft reports might have their images removed. on android you access the + // images where they are stored on the filesystem so if you move, and then delete + // them, you are moving and deleting the only copy of them which is likely to be + // surprising and unwelcome so we copy them instead. + var fileName = CONFIG.NAMESPACE + '_' + this.model.cid + '_' + moment().unix() + '.jpg'; + if ( FMS.isAndroid ) { + move = FMS.files.copyURI( imgURI, fileName ); + } else { + move = FMS.files.moveURI( imgURI, fileName ); + } var that = this; move.done( function( file ) { - $('.photo-wrapper .photo img').attr('src', file.toURL()); - that.model.set('file', file.toURL()); - FMS.saveCurrentDraft(); + var files = that.model.get('files'); + files.push(file.toURL()); + that.model.set('files', files); + that.updateCurrentReport(); - $('#photo-next-btn .ui-btn-text').text(FMS.strings.next); - $('#display_photo').show(); - $('#add_photo').hide(); + $.mobile.loading('hide'); + that.rerender(); }); move.fail( function() { that.addPhotoFail(); } ); }, addPhotoFail: function(message) { + $.mobile.loading('hide'); if ( message != 'no image selected' && message != 'Selection cancelled.' && message != 'Camera cancelled.' ) { @@ -106,18 +142,22 @@ } }, - deletePhoto: function() { - var that = this; - var del = FMS.files.deleteURI( this.model.get('file') ); + deletePhoto: function(e) { + e.preventDefault(); + $.mobile.loading('show'); + var files = this.model.get('files'); + var index = parseInt($(e.target).data('fileIndex')); + var deleted_file = files.splice(index, 1)[0]; + var del = FMS.files.deleteURI( deleted_file ); + + var that = this; del.done( function() { - that.model.set('file', ''); - FMS.saveCurrentDraft(); - $('.photo-wrapper .photo img').attr('src', ''); + that.model.set('files', files); + that.updateCurrentReport(); - $('#photo-next-btn .ui-btn-text').text('Skip'); - $('#display_photo').hide(); - $('#add_photo').show(); + $.mobile.loading('hide'); + that.rerender(); }); }, @@ -154,7 +194,12 @@ this.model.set('title', $('#form_title').val()); this.model.set('details', $('#form_detail').val()); FMS.saveCurrentDraft(); + }, + + rerender: function() { + FMS.router.offline(); } + }) }); })(FMS, Backbone, _, $); diff --git a/www/js/views/photo.js b/www/js/views/photo.js index 6ba4a01..0b0c5e9 100644 --- a/www/js/views/photo.js +++ b/www/js/views/photo.js @@ -23,9 +23,10 @@ afterDisplay: function() { // The height of the photos container needs to be adjusted - // depending on the number of photos - if there are 3 photos - // then the 'add photo' UI isn't shown so we should use all the - // vertical space for the thumbnails. + // depending on the number of photos - if the max number of + // photos have already been added then the 'add photo' UI isn't + // shown so we should use all the vertical space for the + // thumbnails. var wrapperHeight = $(".ui-content").height(); wrapperHeight -= $(".ui-content h2").outerHeight(true); wrapperHeight -= $(".ui-content .bottom-btn").outerHeight(true) @@ -95,11 +96,8 @@ files.push(file.toURL()); that.model.set('files', files); FMS.saveCurrentDraft(); - - window.setTimeout(function() { - $.mobile.loading('hide'); - that.rerender(); - }, 100); + $.mobile.loading('hide'); + that.rerender(); }); move.fail( function() { that.addPhotoFail(); } ); @@ -125,19 +123,10 @@ var that = this; del.done( function() { - // $('#photo_title').hide(); - // $('#nophoto_title').show(); - // $('.del_photo_button').hide(); that.model.set('files', files); FMS.saveCurrentDraft(true); that.rerender(); - // $('.photo-wrapper .photo img').attr('src', 'images/placeholder-photo.png').addClass('placeholder').removeClass('small'); - // - // $('#photo-next-btn .ui-btn-text').text('Skip'); - // $('#id_photo_button').parents('.ui-btn').show(); - // $('#id_existing').parents('.ui-btn').show(); }); - }, rerender: function() { diff --git a/www/templates/en/offline.html b/www/templates/en/offline.html index bbdc661..4fde64f 100644 --- a/www/templates/en/offline.html +++ b/www/templates/en/offline.html @@ -1,7 +1,7 @@ <div data-role="header" data-position="fixed"> <a id="offline-prev-btn" class="ui-btn-left">Try Again</a> <h1>Offline</h1> - <a id="offline-next-btn" data-icon="arrow-r" data-iconpos="right" class="ui-btn-right">Skip</a> + <a id="offline-next-btn" data-icon="arrow-r" data-iconpos="right" class="ui-btn-right"><%= files.length == 0 ? "Skip" : "Next" %></a> </div> <div id="locating" class="nodisplay"> <div class="radar"></div> @@ -42,30 +42,25 @@ </div> <div> - <textarea data-role="none" rows="7" cols="26" name="detail" id="form_detail" placeholder="Please fill in details of the problem." required><%= details %></textarea> + <textarea data-role="none" rows="2" cols="26" name="detail" id="form_detail" placeholder="Please fill in details of the problem." required><%= details %></textarea> </div> </div> - <% if ( files.length > 0 ) { %> - <div id="add_photo" style="display: none"> - <% } else { %> - <div id="add_photo"> + <% if ( files.length < CONFIG.MAX_PHOTOS ) { %> + <div id="add_photo"> + <input data-icon="fms-photo-new" value="Take a new photo" type="button" name="photo_button" id="id_photo_button" data-role="button" data-theme="a"> + <input data-icon="fms-photo-existing" value="Add an existing photo" type="button" name="existing" id="id_existing" data-role="button" data-theme="c"> + </div> <% } %> - <label>Add a Photo <em>(optional)</em></label> - <input data-icon="fms-photo-new" value="Take a new photo" type="button" name="photo_button" id="id_photo_button" data-role="button" data-theme="a"> - <input data-icon="fms-photo-existing" value="Add an existing photo" type="button" name="existing" id="id_existing" data-role="button" data-theme="c"> - </div> - <% if ( files.length == 0 ) { %> - <div id="display_photo" style="display: none"> - <% } else { %> - <div id="display_photo"> - <% } %> - <label>Your Photo</label> - <div class="photo"> - <img class="small" id="photo" src="<%= files[0] %>" /> + <% if ( files.length > 0 ) { %> + <div class="photo-wrapper"> + <% _.each(files, function(file, index) { %> + <div class="photo" style="background-image: url('<%= file %>');"> + <a data-role="none" class="photo-corner-button del_photo_button" data-file-index="<%= index %>">X</a> + </div> + <% }); %> </div> - <input value="Remove Photo" type="button" name="del_photo_button" class="del_photo_button" data-role="button" data-theme="a"> - </div> + <% } %> </div> </div> diff --git a/www/templates/es/offline.html b/www/templates/es/offline.html index 4422408..35190df 100644 --- a/www/templates/es/offline.html +++ b/www/templates/es/offline.html @@ -1,7 +1,7 @@ <div data-role="header" data-position="fixed"> <a id="offline-prev-btn" class="ui-btn-left">Inténtelo nuevamente</a> <h1>Sin conexión</h1> - <a id="offline-next-btn" data-icon="arrow-r" data-iconpos="right" class="ui-btn-right">Saltar</a> + <a id="offline-next-btn" data-icon="arrow-r" data-iconpos="right" class="ui-btn-right"><%= files.length == 0 ? "Saltar" : "Siguiente" %></a> </div> <div id="locating" class="nodisplay"> <div class="radar"></div> @@ -42,30 +42,25 @@ </div> <div> - <textarea data-role="none" rows="7" cols="26" name="detail" id="form_detail" placeholder="Please fill in details of the problem." required><%= details %></textarea> + <textarea data-role="none" rows="2" cols="26" name="detail" id="form_detail" placeholder="Please fill in details of the problem." required><%= details %></textarea> </div> </div> - <% if ( files.length > 0 ) { %> - <div id="add_photo" style="display: none"> - <% } else { %> - <div id="add_photo"> + <% if ( files.length < CONFIG.MAX_PHOTOS ) { %> + <div id="add_photo"> + <input data-icon="fms-photo-new" value="Tomar una nueva foto" type="button" name="photo_button" id="id_photo_button" data-role="button" data-theme="a"> + <input data-icon="fms-photo-existing" value="Añadir una foto existente" type="button" name="existing" id="id_existing" data-role="button" data-theme="c"> + </div> <% } %> - <label>Añadir una foto <em>(opcional)</em></label> - <input data-icon="fms-photo-new" value="Tomar una nueva foto" type="button" name="photo_button" id="id_photo_button" data-role="button" data-theme="a"> - <input data-icon="fms-photo-existing" value="Añadir una foto existente" type="button" name="existing" id="id_existing" data-role="button" data-theme="c"> - </div> - <% if ( files.length == 0 ) { %> - <div id="display_photo" style="display: none"> - <% } else { %> - <div id="display_photo"> - <% } %> - <label>Su foto</label> - <div class="photo"> - <img class="small" id="photo" src="<%= files[0] %>" /> + <% if ( files.length > 0 ) { %> + <div class="photo-wrapper"> + <% _.each(files, function(file, index) { %> + <div class="photo" style="background-image: url('<%= file %>');"> + <a data-role="none" class="photo-corner-button del_photo_button" data-file-index="<%= index %>">X</a> + </div> + <% }); %> </div> - <input value="Eliminar foto" type="button" name="del_photo_button" class="del_photo_button" data-role="button" data-theme="a"> - </div> + <% } %> </div> </div> |