From a49101a2bff7ef07b1634d87c86041bc2e6794cc Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Thu, 15 Mar 2018 11:20:48 +0530 Subject: [PATCH] add extension to app creation import feature --- src/index.html | 4 ++ src/partials/ask-to-import-modal.html | 16 +++++++ src/script.js | 63 ++++++++++++++++++++++----- src/style.css | 7 ++- 4 files changed, 79 insertions(+), 11 deletions(-) create mode 100644 src/partials/ask-to-import-modal.html diff --git a/src/index.html b/src/index.html index 5978081..fbbbaf5 100644 --- a/src/index.html +++ b/src/index.html @@ -380,6 +380,10 @@
+ +
diff --git a/src/partials/ask-to-import-modal.html b/src/partials/ask-to-import-modal.html new file mode 100644 index 0000000..b765b3d --- /dev/null +++ b/src/partials/ask-to-import-modal.html @@ -0,0 +1,16 @@ + + + + + + +

Import your creations in your account

+ +
+

You have creations saved in your local machine. Do you want to import those creations in your account so they are more secure and accessible anywhere?

+

It's okay if you don't want to. You can simply logout and access them anytime on this browser.

+
+ + +
+
\ No newline at end of file diff --git a/src/script.js b/src/script.js index e1b6f64..3aea014 100644 --- a/src/script.js +++ b/src/script.js @@ -8,7 +8,7 @@ savedItemCountEl, indentationSizeValueEl, pledgeModal runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyleTemplate, customEditorFontInput, cssSettingsModal, cssSettingsBtn, acssSettingsTextarea, globalConsoleContainerEl, externalLibrarySearchInput, keyboardShortcutsModal, headerAvatarImg, -loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn +loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askToImportModal */ /* eslint-disable no-extra-semi */ (function(alertsService, itemService) { @@ -128,6 +128,10 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn 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"; + const LocalStorageKeys = { + LOGIN_AND_SAVE_MESSAGE_SEEN: 'loginAndsaveMessageSeen', + ASKED_TO_IMPORT_CREATIONS: 'askedToImportCreations' + }; var updateTimer, updateDelay = 500, autoSaveInterval, @@ -336,18 +340,21 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn // Save current item to storage function saveItem() { - if (!window.user && !window.localStorage.loginAndsaveMessageSeen) { + if ( + !window.user && + !window.localStorage[LocalStorageKeys.LOGIN_AND_SAVE_MESSAGE_SEEN] + ) { 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?' ); - window.localStorage.loginAndsaveMessageSeen = true; + window.localStorage[LocalStorageKeys.LOGIN_AND_SAVE_MESSAGE_SEEN] = true; if (!answer) { - trackEvent('ui', 'loginAndsaveMessageSeen', 'login'); + trackEvent('ui', LocalStorageKeys.LOGIN_AND_SAVE_MESSAGE_SEEN, 'login'); closeAllOverlays(); loginModal.classList.add('is-modal-visible'); return; } - trackEvent('ui', 'loginAndsaveMessageSeen', 'local'); + trackEvent('ui', LocalStorageKeys.LOGIN_AND_SAVE_MESSAGE_SEEN, 'local'); } var isNewItem = !currentItem.id; 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. * @return {promise} Promise. */ - async function fetchItems(shouldSaveGlobally) { + async function fetchItems(shouldSaveGlobally, shouldFetchLocally) { var d = deferred(); savedItems = {}; var items = []; - if (window.user) { + if (window.user && !shouldFetchLocally) { items = await itemService.getAllItems(); utils.log('got items'); if (shouldSaveGlobally) { @@ -702,6 +709,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn loginModal.classList.remove('is-modal-visible'); profileModal.classList.remove('is-modal-visible'); pledgeModal.classList.remove('is-modal-visible'); + askToImportModal.classList.remove('is-modal-visible'); toggleSavedItemsPane(false); document.dispatchEvent(new Event('overlaysClosed')); } @@ -1464,6 +1472,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn function mergeImportedItems(items) { var existingItemIds = []; var toMergeItems = {}; + const d = deferred(); items.forEach(item => { // We can access `savedItems` here because this gets set when user // opens the saved creations panel. And import option is available @@ -1492,21 +1501,23 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn } if (mergedItemCount) { itemService.saveItems(toMergeItems).then(() => { + d.resolve(); alertsService.add( mergedItemCount + ' creations imported successfully.' ); trackEvent('fn', 'itemsImported', mergedItemCount); }); + } else { + d.resolve(); } // FIXME: Move from here toggleSavedItemsPane(false); + + return d.promise; } function onImportFileChange(e) { var file = e.target.files[0]; - // if (!f.type.match('image.*')) { - // continue; - // } var reader = new FileReader(); reader.onload = function(progressEvent) { @@ -2097,6 +2108,27 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn 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() { var config = { apiKey: 'AIzaSyBl8Dz7ZOE7aP75mipYl2zKdLSRzBU2fFc', @@ -2114,6 +2146,17 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn utils.log('You are -> ', user); alertsService.add('You are now logged in!'); 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 => { if (customUser) { Object.assign(prefs, user.settings); diff --git a/src/style.css b/src/style.css index 7f3c239..3112c1a 100644 --- a/src/style.css +++ b/src/style.css @@ -42,6 +42,9 @@ p { .flex-h-center { justify-content: center; } +.flex-h-end { + justify-content: flex-end; +} .fr { float: right; } @@ -134,6 +137,7 @@ textarea { border-radius: 5px; padding: 9px 15px; cursor: pointer; + letter-spacing: 0.2px; transition: box-shadow 0.2s ease; } .btn--primary { @@ -623,7 +627,8 @@ body > #demo-frame { /* margin-lef.t: -300px; */ } } -.pledge-modal .modal__content { +.pledge-modal .modal__content, +.ask-to-import-modal .modal__content { max-width: 800px; } .saved-items-pane {