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:
@@ -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">
|
||||||
|
16
src/partials/ask-to-import-modal.html
Normal file
16
src/partials/ask-to-import-modal.html
Normal 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>
|
@@ -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);
|
||||||
|
@@ -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 {
|
||||||
|
Reference in New Issue
Block a user