1
0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-20 13:31:12 +02:00

add extension to app creation import feature

This commit is contained in:
Kushagra Gour
2018-03-15 11:20:48 +05:30
parent 5cbc13db1e
commit a49101a2bf
4 changed files with 79 additions and 11 deletions

View File

@@ -380,6 +380,10 @@
<div class="modal__content" d-html="partials/pledge-modal.html"></div> <div class="modal__content" d-html="partials/pledge-modal.html"></div>
</div> </div>
<div class="modal ask-to-import-modal" id="askToImportModal">
<div class="modal__content" d-html="partials/ask-to-import-modal.html"></div>
</div>
<div class="modal modal--settings" id="settingsModal"> <div class="modal modal--settings" id="settingsModal">
<div class="modal__content"> <div class="modal__content">
<a d-click="onModalCloseBtnClick" href="" aria-label="Close Settings" title="Close" class="js-modal__close-btn modal__close-btn"> <a d-click="onModalCloseBtnClick" href="" aria-label="Close Settings" title="Close" class="js-modal__close-btn modal__close-btn">

View File

@@ -0,0 +1,16 @@
<a d-click="onModalCloseBtnClick" href="" aria-label="Close modal" title="Close" class="js-modal__close-btn modal__close-btn">
<svg>
<use xlink:href="#cross-icon"></use>
</svg>
</a>
<h2>Import your creations in your account</h2>
<div>
<p>You have <span id="oldSavedCreationsCountEl"></span> creations saved in your local machine. Do you want to import those creations in your account so they are more secure and accessible anywhere?</p>
<p>It's okay if you don't want to. You can simply logout and access them anytime on this browser.</p>
<div class="flex flex-h-end">
<button d-click="dontAskToImportAnymore" class="btn">Don't ask me again</button>
<button d-click="importCreationsAndSettingsIntoApp" class="btn btn--primary ml-1">Yes, please import</button>
</div>
</div>

View File

@@ -8,7 +8,7 @@ savedItemCountEl, indentationSizeValueEl, pledgeModal
runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyleTemplate, runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyleTemplate,
customEditorFontInput, cssSettingsModal, cssSettingsBtn, acssSettingsTextarea, customEditorFontInput, cssSettingsModal, cssSettingsBtn, acssSettingsTextarea,
globalConsoleContainerEl, externalLibrarySearchInput, keyboardShortcutsModal, headerAvatarImg, globalConsoleContainerEl, externalLibrarySearchInput, keyboardShortcutsModal, headerAvatarImg,
loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askToImportModal
*/ */
/* eslint-disable no-extra-semi */ /* eslint-disable no-extra-semi */
(function(alertsService, itemService) { (function(alertsService, itemService) {
@@ -128,6 +128,10 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn
const DEFAULT_PROFILE_IMG = const DEFAULT_PROFILE_IMG =
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='#ccc' d='M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z' /%3E%3C/svg%3E"; "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='#ccc' d='M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z' /%3E%3C/svg%3E";
const LocalStorageKeys = {
LOGIN_AND_SAVE_MESSAGE_SEEN: 'loginAndsaveMessageSeen',
ASKED_TO_IMPORT_CREATIONS: 'askedToImportCreations'
};
var updateTimer, var updateTimer,
updateDelay = 500, updateDelay = 500,
autoSaveInterval, autoSaveInterval,
@@ -336,18 +340,21 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn
// Save current item to storage // Save current item to storage
function saveItem() { function saveItem() {
if (!window.user && !window.localStorage.loginAndsaveMessageSeen) { if (
!window.user &&
!window.localStorage[LocalStorageKeys.LOGIN_AND_SAVE_MESSAGE_SEEN]
) {
const answer = confirm( const answer = confirm(
'Saving without signing in will save your work only on this machine and this browser. If you want it to be secure & available anywhere, please login in your account and then save.\n\nDo you still want to continue saving locally?' 'Saving without signing in will save your work only on this machine and this browser. If you want it to be secure & available anywhere, please login in your account and then save.\n\nDo you still want to continue saving locally?'
); );
window.localStorage.loginAndsaveMessageSeen = true; window.localStorage[LocalStorageKeys.LOGIN_AND_SAVE_MESSAGE_SEEN] = true;
if (!answer) { if (!answer) {
trackEvent('ui', 'loginAndsaveMessageSeen', 'login'); trackEvent('ui', LocalStorageKeys.LOGIN_AND_SAVE_MESSAGE_SEEN, 'login');
closeAllOverlays(); closeAllOverlays();
loginModal.classList.add('is-modal-visible'); loginModal.classList.add('is-modal-visible');
return; return;
} }
trackEvent('ui', 'loginAndsaveMessageSeen', 'local'); trackEvent('ui', LocalStorageKeys.LOGIN_AND_SAVE_MESSAGE_SEEN, 'local');
} }
var isNewItem = !currentItem.id; var isNewItem = !currentItem.id;
currentItem.id = currentItem.id || 'item-' + utils.generateRandomId(); currentItem.id = currentItem.id || 'item-' + utils.generateRandomId();
@@ -516,11 +523,11 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn
* @param {boolean} shouldSaveGlobally Whether to store the fetched items in global arr for later use. * @param {boolean} shouldSaveGlobally Whether to store the fetched items in global arr for later use.
* @return {promise} Promise. * @return {promise} Promise.
*/ */
async function fetchItems(shouldSaveGlobally) { async function fetchItems(shouldSaveGlobally, shouldFetchLocally) {
var d = deferred(); var d = deferred();
savedItems = {}; savedItems = {};
var items = []; var items = [];
if (window.user) { if (window.user && !shouldFetchLocally) {
items = await itemService.getAllItems(); items = await itemService.getAllItems();
utils.log('got items'); utils.log('got items');
if (shouldSaveGlobally) { if (shouldSaveGlobally) {
@@ -702,6 +709,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn
loginModal.classList.remove('is-modal-visible'); loginModal.classList.remove('is-modal-visible');
profileModal.classList.remove('is-modal-visible'); profileModal.classList.remove('is-modal-visible');
pledgeModal.classList.remove('is-modal-visible'); pledgeModal.classList.remove('is-modal-visible');
askToImportModal.classList.remove('is-modal-visible');
toggleSavedItemsPane(false); toggleSavedItemsPane(false);
document.dispatchEvent(new Event('overlaysClosed')); document.dispatchEvent(new Event('overlaysClosed'));
} }
@@ -1464,6 +1472,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn
function mergeImportedItems(items) { function mergeImportedItems(items) {
var existingItemIds = []; var existingItemIds = [];
var toMergeItems = {}; var toMergeItems = {};
const d = deferred();
items.forEach(item => { items.forEach(item => {
// We can access `savedItems` here because this gets set when user // We can access `savedItems` here because this gets set when user
// opens the saved creations panel. And import option is available // opens the saved creations panel. And import option is available
@@ -1492,21 +1501,23 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn
} }
if (mergedItemCount) { if (mergedItemCount) {
itemService.saveItems(toMergeItems).then(() => { itemService.saveItems(toMergeItems).then(() => {
d.resolve();
alertsService.add( alertsService.add(
mergedItemCount + ' creations imported successfully.' mergedItemCount + ' creations imported successfully.'
); );
trackEvent('fn', 'itemsImported', mergedItemCount); trackEvent('fn', 'itemsImported', mergedItemCount);
}); });
} else {
d.resolve();
} }
// FIXME: Move from here // FIXME: Move from here
toggleSavedItemsPane(false); toggleSavedItemsPane(false);
return d.promise;
} }
function onImportFileChange(e) { function onImportFileChange(e) {
var file = e.target.files[0]; var file = e.target.files[0];
// if (!f.type.match('image.*')) {
// continue;
// }
var reader = new FileReader(); var reader = new FileReader();
reader.onload = function(progressEvent) { reader.onload = function(progressEvent) {
@@ -2097,6 +2108,27 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn
window.logout(); window.logout();
}; };
/**
* Called from inside ask-to-import-modal
*/
scope.dontAskToImportAnymore = e => {
scope.toggleModal(askToImportModal);
window.localStorage[LocalStorageKeys.ASKED_TO_IMPORT_CREATIONS] = true;
if (e) {
trackEvent('ui', 'dontAskToImportBtnClick');
}
};
/**
* Called from inside ask-to-import-modal
*/
scope.importCreationsAndSettingsIntoApp = () => {
mergeImportedItems(scope.oldSavedItems).then(() => {
trackEvent('fn', 'oldItemsImported');
scope.dontAskToImportAnymore();
});
};
function init() { function init() {
var config = { var config = {
apiKey: 'AIzaSyBl8Dz7ZOE7aP75mipYl2zKdLSRzBU2fFc', apiKey: 'AIzaSyBl8Dz7ZOE7aP75mipYl2zKdLSRzBU2fFc',
@@ -2114,6 +2146,17 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn
utils.log('You are -> ', user); utils.log('You are -> ', user);
alertsService.add('You are now logged in!'); alertsService.add('You are now logged in!');
scope.user = window.user = user; scope.user = window.user = user;
if (
!window.localStorage[LocalStorageKeys.ASKED_TO_IMPORT_CREATIONS] &&
window.oldSavedCreationsCountEl
) {
fetchItems(false, true).then(items => {
scope.oldSavedItems = items;
window.oldSavedCreationsCountEl.textContent = items.length;
scope.toggleModal(askToImportModal);
trackEvent('ui', 'askToImportModalSeen');
});
}
window.db.getUser(user.uid).then(customUser => { window.db.getUser(user.uid).then(customUser => {
if (customUser) { if (customUser) {
Object.assign(prefs, user.settings); Object.assign(prefs, user.settings);

View File

@@ -42,6 +42,9 @@ p {
.flex-h-center { .flex-h-center {
justify-content: center; justify-content: center;
} }
.flex-h-end {
justify-content: flex-end;
}
.fr { .fr {
float: right; float: right;
} }
@@ -134,6 +137,7 @@ textarea {
border-radius: 5px; border-radius: 5px;
padding: 9px 15px; padding: 9px 15px;
cursor: pointer; cursor: pointer;
letter-spacing: 0.2px;
transition: box-shadow 0.2s ease; transition: box-shadow 0.2s ease;
} }
.btn--primary { .btn--primary {
@@ -623,7 +627,8 @@ body > #demo-frame {
/* margin-lef.t: -300px; */ /* margin-lef.t: -300px; */
} }
} }
.pledge-modal .modal__content { .pledge-modal .modal__content,
.ask-to-import-modal .modal__content {
max-width: 800px; max-width: 800px;
} }
.saved-items-pane { .saved-items-pane {