Skip to content

Commit

Permalink
[App] Save photo library - Add spinner to let user know of progress #669
Browse files Browse the repository at this point in the history


- Moved imageModal to a new file
- Added ionSpinner on top of image while image is saving
  • Loading branch information
amngupta committed Oct 25, 2016
1 parent b8dcd5b commit 1af37b0
Show file tree
Hide file tree
Showing 5 changed files with 78 additions and 56 deletions.
37 changes: 0 additions & 37 deletions app/packages/smartix-chat/components/chat_room/chat_room.events.js
Original file line number Diff line number Diff line change
@@ -1,45 +1,8 @@
/*! Copyright (c) 2015 Little Genius Education Ltd. All Rights Reserved. */
import blobUtil from 'blob-util';


var isRecording = false;
var media = "";
var isPlayingSound = false;

Template.imageModal.events({
// Here handling chat image long press - on long press showing popup for save/cancel the image to mobile gallery - Rajit Deligence
//'contextmenu #dt-image-chat': function (e) {
// not used yet to debug
//cordova-base64-to-gallery@4.1.1
'click #imageGallery': function(event, template){
var img = document.getElementById('imageHolder');
//log.info("Test", img);
function getBase64ImageHolder(image) {
var imgSrc = image.getAttribute('src');
log.info("getBase64ImageHolder/imgSrc="+imgSrc);
imgSrc = imgSrc.split('?')[0];
//https://github.com/nolanlawson/blob-util#imgSrcToBlob API
var saveImage = blobUtil.imgSrcToDataURL(imgSrc, 'image/png', { crossOrigin: 'Anonymous' }, 1.0).then(function (dataURL) {
//log.info("Data URL", dataURL);
var params = { data: dataURL, quality: 100 };
window.imageSaver.saveBase64Image(params,
function (result) {
log.info('window.imageSaver.saveBase64Image.result OK' + result);
toastr.info("Image saved successfully in photo album");
},
function (error) {
log.error('window.imageSaver.saveBase64Image.error ' + error);
toastr.error("Error saving image");
}
); // log.info(schoolbannerSource, dataURL);
}).catch(function (err) {
log.error("cannot save image", err);
}); //.replace(/^data:image\/(png|jpg);base64,/, "");
}
var getBase64 = getBase64ImageHolder(img);
}
});

Template.ChatRoom.events({
// Here handling chat image long press - on long press showing popup for save/cancel the image to mobile gallery - Rajit Deligence

Expand Down
19 changes: 0 additions & 19 deletions app/packages/smartix-chat/components/chat_room/chat_room.html
Original file line number Diff line number Diff line change
Expand Up @@ -264,25 +264,6 @@ <h1 class="title">
{{/ionView}}
{{/if}}
</template>

<!--For image in full size-->
<template name="imageModal">
{{#ionModal title="" }}
<div class="row row-center" style="height:100%">
<div class="col" style="text-align: center;">
{{#if isCordova}}
<div id="imageGallery" style="float:right;position:absolute;">
<button class="button button-positive">
<i class="icon ion-android-download"></i>
</button>
</div>
{{/if}}
<img src="{{src}}" id="imageHolder" data-fullsizeimage="{{this.url}}" alt="" style="max-width:100%">
</div>
</div>
{{/ionModal}}
</template>

<!-- wrap imageGallery with isCordova not displayed consistently chrome iOS
<div class="row row-bottom" style="height:100%">
<div class="col" style="text-align: center;">
Expand Down
27 changes: 27 additions & 0 deletions app/packages/smartix-chat/components/imageModal/imageModal.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<!--For image in full size-->
<template name="imageModal">
{{#ionModal title="" }}
<div class="row row-center" style="height:100%">
<div class="col" style="text-align: center;">
<!--{{#if isCordova}}-->
<div id="imageGallery" style="float:right;position:absolute;">
<button class="button button-positive">
<i class="icon ion-android-download"></i>
</button>
</div>
<!--{{/if}}-->
{{#if isLoading}}
<div style ="padding-top:2vh; position: absolute;
right: 50%;
top: 50%;
height: 5vh;" class="spinner-loading">
{{> ionSpinner icon="spiral"}}
</div>
{{/if}}
<img src="{{src}}" id="imageHolder" data-fullsizeimage="{{this.url}}" alt="" style="max-width:100%">

</div>
</div>
{{/ionModal}}
</template>

48 changes: 48 additions & 0 deletions app/packages/smartix-chat/components/imageModal/imageModal.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import blobUtil from 'blob-util';

isLoading = new ReactiveVar(false);

Template.imageModal.helpers({
isLoading: function(){
return isLoading.get();
}
});

Template.imageModal.events({
// Here handling chat image long press - on long press showing popup for save/cancel the image to mobile gallery - Rajit Deligence
//'contextmenu #dt-image-chat': function (e) {
// not used yet to debug
//cordova-base64-to-gallery@4.1.1
'click #imageGallery': function(event, template){
var img = document.getElementById('imageHolder');
//log.info("Test", img);
isLoading.set(true);
function getBase64ImageHolder(image) {
var imgSrc = image.getAttribute('src');
log.info("getBase64ImageHolder/imgSrc="+imgSrc);
imgSrc = imgSrc.split('?')[0];
//https://github.com/nolanlawson/blob-util#imgSrcToBlob API
var saveImage = blobUtil.imgSrcToDataURL(imgSrc, 'image/png', { crossOrigin: 'Anonymous' }, 1.0).then(function (dataURL) {
//log.info("Data URL", dataURL);
var params = { data: dataURL, quality: 100 };
window.imageSaver.saveBase64Image(params,
function (result) {
log.info('window.imageSaver.saveBase64Image.result OK' + result);
toastr.info("Image saved successfully in photo album");
isLoading.set(false);
},
function (error) {
log.error('window.imageSaver.saveBase64Image.error ' + error);
toastr.error("Error saving image");
isLoading.set(false);
}
); // log.info(schoolbannerSource, dataURL);
}).catch(function (err) {
isLoading.set(false);
log.error("cannot save image", err);
});
//.replace(/^data:image\/(png|jpg);base64,/, "");
}
var getBase64 = getBase64ImageHolder(img);
}
});
3 changes: 3 additions & 0 deletions app/packages/smartix-chat/package.js
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,9 @@ Package.onUse(function(api) {

api.addFiles(['components/chat_setting/chat_setting.html',
'components/chat_setting/chat_setting.js'], 'client');

api.addFiles(['components/imageModal/imageModal.html',
'components/imageModal/imageModal.js'], 'client');

api.addFiles(['components/chatoption/chatoption.html',
'components/chatoption/chatoption.js',
Expand Down

0 comments on commit 1af37b0

Please sign in to comment.