Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-10 20:05:49 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1699517 - Dry out Pocket panel js files. r=gvn

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D109409
This commit is contained in:
Scott 2021-04-01 20:43:40 +00:00
parent 52e6225f5f
commit 6f4c369208
5 changed files with 170 additions and 256 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
browser/components/pocket/content/panels/js/main.js Normal file
View File

@ -0,0 +1,95 @@
/* global $:false, PKT_PANEL_OVERLAY:false */
/* import-globals-from messages.js */
var PKT_PANEL = function() {};
PKT_PANEL.prototype = {
init() {
if (this.inited) {
return;
}
this.panelId = pktPanelMessaging.panelIdFromURL(window.location.href);
this.overlay = new PKT_PANEL_OVERLAY();
this.setupMutationObserver();
this.inited = true;
},
addMessageListener(messageId, callback) {
pktPanelMessaging.addMessageListener(messageId, this.panelId, callback);
},
sendMessage(messageId, payload, callback) {
pktPanelMessaging.sendMessage(messageId, this.panelId, payload, callback);
},
setupMutationObserver() {
// Select the node that will be observed for mutations
const targetNode = document.body;
// Options for the observer (which mutations to observe)
const config = { attributes: false, childList: true, subtree: true };
// Callback function to execute when mutations are observed
const callback = (mutationList, observer) => {
mutationList.forEach(mutation => {
switch (mutation.type) {
case "childList": {
/* One or more children have been added to and/or removed
from the tree.
(See mutation.addedNodes and mutation.removedNodes.) */
let clientHeight = document.body.clientHeight;
if (this.overlay.tagsDropdownOpen) {
clientHeight = Math.max(clientHeight, 252);
}
thePKT_PANEL.sendMessage("PKT_resizePanel", {
width: document.body.clientWidth,
height: clientHeight,
});
break;
}
}
});
};
// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(targetNode, config);
},
create() {
this.overlay.create();
},
};
$(function() {
if (!window.thePKT_PANEL) {
var thePKT_PANEL = new PKT_PANEL();
/* global thePKT_PANEL */
window.thePKT_PANEL = thePKT_PANEL;
thePKT_PANEL.init();
}
var pocketHost = thePKT_PANEL.overlay.pockethost;
// send an async message to get string data
thePKT_PANEL.sendMessage(
"PKT_initL10N",
{
tos: [
"https://" + pocketHost + "/tos?s=ffi&t=tos&tv=panel_tryit",
"https://" +
pocketHost +
"/privacy?s=ffi&t=privacypolicy&tv=panel_tryit",
],
},
function(resp) {
const { data } = resp;
window.pocketStrings = data.strings;
// Set the writing system direction
document.documentElement.setAttribute("dir", data.dir);
window.thePKT_PANEL.create();
}
);
});

226
browser/components/pocket/content/panels/js/saved.js
View File

@ -1,12 +1,12 @@
/* global $:false, Handlebars:false, PKT_SENDTOMOBILE:false, */
/* global $:false, Handlebars:false, thePKT_PANEL:false */
/* import-globals-from messages.js */
/*
PKT_SAVED_OVERLAY is the view itself and contains all of the methods to manipute the overlay and messaging.
PKT_PANEL_OVERLAY is the view itself and contains all of the methods to manipute the overlay and messaging.
It does not contain any logic for saving or communication with the extension or server.
*/
var PKT_SAVED_OVERLAY = function(options) {
var PKT_PANEL_OVERLAY = function(options) {
var myself = this;
this.inited = false;
this.active = false;
@ -44,7 +44,7 @@ var PKT_SAVED_OVERLAY = function(options) {
}
};
this.fillUserTags = function() {
thePKT_SAVED.sendMessage("PKT_getTags", {}, function(resp) {
thePKT_PANEL.sendMessage("PKT_getTags", {}, function(resp) {
const { data } = resp;
if (typeof data == "object" && typeof data.tags == "object") {
myself.userTags = data.tags;
@ -60,7 +60,7 @@ var PKT_SAVED_OVERLAY = function(options) {
$(".pkt_ext_subshell").show();
thePKT_SAVED.sendMessage(
thePKT_PANEL.sendMessage(
"PKT_getSuggestedTags",
{
url: myself.savedUrl,
@ -140,7 +140,7 @@ var PKT_SAVED_OVERLAY = function(options) {
};
this.closePopup = function() {
myself.stopCloseTimer();
thePKT_SAVED.sendMessage("PKT_close");
thePKT_PANEL.sendMessage("PKT_close");
};
this.checkValidTagSubmit = function() {
var inputlength = $.trim(
@ -388,7 +388,7 @@ var PKT_SAVED_OVERLAY = function(options) {
}
});
thePKT_SAVED.sendMessage(
thePKT_PANEL.sendMessage(
"PKT_addTags",
{
url: myself.savedUrl,
@ -421,7 +421,7 @@ var PKT_SAVED_OVERLAY = function(options) {
.find(".pkt_ext_detail h2")
.text(myself.dictJSON.processingremove);
thePKT_SAVED.sendMessage(
thePKT_PANEL.sendMessage(
"PKT_deleteItem",
{
itemId: myself.savedItemId,
@ -443,7 +443,7 @@ var PKT_SAVED_OVERLAY = function(options) {
this.initOpenListInput = function() {
$(".pkt_ext_openpocket").click(function(e) {
e.preventDefault();
thePKT_SAVED.sendMessage("PKT_openTabWithUrl", {
thePKT_PANEL.sendMessage("PKT_openTabWithUrl", {
url: $(this).attr("href"),
activate: true,
source: "view_list",
@ -548,7 +548,7 @@ var PKT_SAVED_OVERLAY = function(options) {
$(".pkt_ext_item_recs").append(renderedRecs);
$(".pkt_ext_learn_more").click(function(e) {
e.preventDefault();
thePKT_SAVED.sendMessage("PKT_openTabWithUrl", {
thePKT_PANEL.sendMessage("PKT_openTabWithUrl", {
url: $(this).attr("href"),
activate: true,
source: "recs_learn_more",
@ -558,7 +558,7 @@ var PKT_SAVED_OVERLAY = function(options) {
e.preventDefault();
const url = $(this).attr("href");
const position = $(".pkt_ext_item_recs_link").index(this);
thePKT_SAVED.sendMessage("PKT_openTabWithPocketUrl", {
thePKT_PANEL.sendMessage("PKT_openTabWithPocketUrl", {
url,
model,
position,
@ -611,12 +611,30 @@ var PKT_SAVED_OVERLAY = function(options) {
};
};
PKT_SAVED_OVERLAY.prototype = {
PKT_PANEL_OVERLAY.prototype = {
create() {
if (this.active) {
return;
}
this.active = true;
var myself = this;
var url = window.location.href.match(/premiumStatus=([\w|\d|\.]*)&?/);
if (url && url.length > 1) {
this.premiumStatus = url[1] == "1";
}
var fxasignedin = window.location.href.match(/fxasignedin=([\w|\d|\.]*)&?/);
if (fxasignedin && fxasignedin.length > 1) {
this.fxasignedin = fxasignedin[1] == "1";
}
var host = window.location.href.match(/pockethost=([\w|\.]*)&?/);
if (host && host.length > 1) {
this.pockethost = host[1];
}
var locale = window.location.href.match(/locale=([\w|\.]*)&?/);
if (locale && locale.length > 1) {
this.locale = locale[1].toLowerCase();
}
// set translations
this.getTranslations();
@ -642,6 +660,42 @@ PKT_SAVED_OVERLAY.prototype = {
this.initRemovePageInput();
this.initOpenListInput();
this.initAutoCloseEvents();
// wait confirmation of save before flipping to final saved state
thePKT_PANEL.addMessageListener("PKT_saveLink", function(resp) {
const { data } = resp;
if (data.status == "error") {
if (typeof data.error == "object") {
if (data.error.localizedKey) {
myself.showStateError(
myself.dictJSON.pagenotsaved,
myself.dictJSON[data.error.localizedKey]
);
} else {
myself.showStateError(
myself.dictJSON.pagenotsaved,
data.error.message
);
}
} else {
myself.showStateError(
myself.dictJSON.pagenotsaved,
myself.dictJSON.errorgeneric
);
}
return;
}
myself.showStateSaved(data);
});
thePKT_PANEL.addMessageListener("PKT_renderItemRecs", function(resp) {
const { data } = resp;
myself.renderItemRecs(data);
});
// tell back end we're ready
thePKT_PANEL.sendMessage("PKT_show_saved");
},
createPremiumFunctionality() {
if (this.premiumStatus && !$(".pkt_ext_suggestedtag_detail").length) {
@ -658,151 +712,3 @@ PKT_SAVED_OVERLAY.prototype = {
}
},
};
// Layer between Bookmarklet and Extensions
var PKT_SAVED = function() {};
PKT_SAVED.prototype = {
init() {
if (this.inited) {
return;
}
this.panelId = pktPanelMessaging.panelIdFromURL(window.location.href);
this.overlay = new PKT_SAVED_OVERLAY();
this.setupMutationObserver();
this.inited = true;
},
addMessageListener(messageId, callback) {
pktPanelMessaging.addMessageListener(messageId, this.panelId, callback);
},
sendMessage(messageId, payload, callback) {
pktPanelMessaging.sendMessage(messageId, this.panelId, payload, callback);
},
setupMutationObserver() {
// Select the node that will be observed for mutations
const targetNode = document.body;
// Options for the observer (which mutations to observe)
const config = { attributes: false, childList: true, subtree: true };
// Callback function to execute when mutations are observed
const callback = (mutationList, observer) => {
mutationList.forEach(mutation => {
switch (mutation.type) {
case "childList": {
/* One or more children have been added to and/or removed
from the tree.
(See mutation.addedNodes and mutation.removedNodes.) */
let clientHeight = document.body.clientHeight;
if (this.overlay.tagsDropdownOpen) {
clientHeight = Math.max(clientHeight, 252);
}
thePKT_SAVED.sendMessage("PKT_resizePanel", {
width: document.body.clientWidth,
height: clientHeight,
});
break;
}
}
});
};
// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(targetNode, config);
},
create() {
var myself = this;
var url = window.location.href.match(/premiumStatus=([\w|\d|\.]*)&?/);
if (url && url.length > 1) {
myself.overlay.premiumStatus = url[1] == "1";
}
var fxasignedin = window.location.href.match(/fxasignedin=([\w|\d|\.]*)&?/);
if (fxasignedin && fxasignedin.length > 1) {
myself.overlay.fxasignedin = fxasignedin[1] == "1";
}
var host = window.location.href.match(/pockethost=([\w|\.]*)&?/);
if (host && host.length > 1) {
myself.overlay.pockethost = host[1];
}
var locale = window.location.href.match(/locale=([\w|\.]*)&?/);
if (locale && locale.length > 1) {
myself.overlay.locale = locale[1].toLowerCase();
}
myself.overlay.create();
// wait confirmation of save before flipping to final saved state
thePKT_SAVED.addMessageListener("PKT_saveLink", function(resp) {
const { data } = resp;
if (data.status == "error") {
if (typeof data.error == "object") {
if (data.error.localizedKey) {
myself.overlay.showStateError(
myself.overlay.dictJSON.pagenotsaved,
myself.overlay.dictJSON[data.error.localizedKey]
);
} else {
myself.overlay.showStateError(
myself.overlay.dictJSON.pagenotsaved,
data.error.message
);
}
} else {
myself.overlay.showStateError(
myself.overlay.dictJSON.pagenotsaved,
myself.overlay.dictJSON.errorgeneric
);
}
return;
}
myself.overlay.showStateSaved(data);
});
thePKT_SAVED.addMessageListener("PKT_renderItemRecs", function(resp) {
const { data } = resp;
myself.overlay.renderItemRecs(data);
});
// tell back end we're ready
thePKT_SAVED.sendMessage("PKT_show_saved");
},
};
$(function() {
if (!window.thePKT_SAVED) {
var thePKT_SAVED = new PKT_SAVED();
/* global thePKT_SAVED */
window.thePKT_SAVED = thePKT_SAVED;
thePKT_SAVED.init();
}
var pocketHost = thePKT_SAVED.overlay.pockethost;
// send an async message to get string data
thePKT_SAVED.sendMessage(
"PKT_initL10N",
{
tos: [
"https://" + pocketHost + "/tos?s=ffi&t=tos&tv=panel_tryit",
"https://" +
pocketHost +
"/privacy?s=ffi&t=privacypolicy&tv=panel_tryit",
],
},
function(resp) {
const { data } = resp;
window.pocketStrings = data.strings;
// Set the writing system direction
document.documentElement.setAttribute("dir", data.dir);
window.thePKT_SAVED.create();
}
);
});

103
browser/components/pocket/content/panels/js/signup.js
View File

@ -1,12 +1,12 @@
/* global $:false, Handlebars:false */
/* global $:false, Handlebars:false, thePKT_PANEL:false */
/* import-globals-from messages.js */
/*
PKT_SIGNUP_OVERLAY is the view itself and contains all of the methods to manipute the overlay and messaging.
PKT_PANEL_OVERLAY is the view itself and contains all of the methods to manipute the overlay and messaging.
It does not contain any logic for saving or communication with the extension or server.
*/
var PKT_SIGNUP_OVERLAY = function(options) {
var PKT_PANEL_OVERLAY = function(options) {
this.inited = false;
this.active = false;
this.delayedStateSaved = false;
@ -26,7 +26,7 @@ var PKT_SIGNUP_OVERLAY = function(options) {
this.initCloseTabEvents = function() {
function clickHelper(e, linkData) {
e.preventDefault();
thePKT_SIGNUP.sendMessage("PKT_openTabWithUrl", {
thePKT_PANEL.sendMessage("PKT_openTabWithUrl", {
url: linkData.url,
activate: true,
source: linkData.source || "",
@ -82,10 +82,7 @@ var PKT_SIGNUP_OVERLAY = function(options) {
this.getTranslations = function() {
this.dictJSON = window.pocketStrings;
};
};
PKT_SIGNUP_OVERLAY.prototype = {
create() {
this.create = function() {
var controlvariant = window.location.href.match(
/controlvariant=([\w|\.]*)&?/
);
@ -173,94 +170,8 @@ PKT_SIGNUP_OVERLAY.prototype = {
// close events
this.initCloseTabEvents();
},
};
// Layer between Bookmarklet and Extensions
var PKT_SIGNUP = function() {};
PKT_SIGNUP.prototype = {
init() {
if (this.inited) {
return;
}
this.panelId = pktPanelMessaging.panelIdFromURL(window.location.href);
this.overlay = new PKT_SIGNUP_OVERLAY();
this.setupMutationObserver();
this.inited = true;
},
sendMessage(messageId, payload, callback) {
pktPanelMessaging.sendMessage(messageId, this.panelId, payload, callback);
},
setupMutationObserver() {
// Select the node that will be observed for mutations
const targetNode = document.body;
// Options for the observer (which mutations to observe)
const config = { attributes: false, childList: true, subtree: true };
// Callback function to execute when mutations are observed
const callback = (mutationList, observer) => {
mutationList.forEach(mutation => {
switch (mutation.type) {
case "childList": {
/* One or more children have been added to and/or removed
from the tree.
(See mutation.addedNodes and mutation.removedNodes.) */
thePKT_SIGNUP.sendMessage("PKT_resizePanel", {
width: document.body.clientWidth,
height: document.body.clientHeight,
});
break;
}
}
});
};
// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(targetNode, config);
},
create() {
this.overlay.create();
// tell back end we're ready
thePKT_SIGNUP.sendMessage("PKT_show_signup");
},
thePKT_PANEL.sendMessage("PKT_show_signup");
};
};
$(function() {
if (!window.thePKT_SIGNUP) {
var thePKT_SIGNUP = new PKT_SIGNUP();
/* global thePKT_SIGNUP */
window.thePKT_SIGNUP = thePKT_SIGNUP;
thePKT_SIGNUP.init();
}
var pocketHost = thePKT_SIGNUP.overlay.pockethost;
// send an async message to get string data
thePKT_SIGNUP.sendMessage(
"PKT_initL10N",
{
tos: [
"https://" + pocketHost + "/tos?s=ffi&t=tos&tv=panel_tryit",
"https://" +
pocketHost +
"/privacy?s=ffi&t=privacypolicy&tv=panel_tryit",
],
},
function(resp) {
const { data } = resp;
window.pocketStrings = data.strings;
// Set the writing system direction
document.documentElement.setAttribute("dir", data.dir);
window.thePKT_SIGNUP.create();
}
);
});

1
browser/components/pocket/content/panels/saved.html
View File

@ -16,5 +16,6 @@
<script src="js/tmpl.js"></script>
<script src="js/messages.js"></script>
<script src="js/saved.js"></script>
<script src="js/main.js"></script>
</body>
</html>

1
browser/components/pocket/content/panels/signup.html
View File

@ -14,5 +14,6 @@
<script src="js/tmpl.js"></script>
<script src="js/messages.js"></script>
<script src="js/signup.js"></script>
<script src="js/main.js"></script>
</body>
</html>