10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/src/app/js/index.js:
--------------------------------------------------------------------------------
1 | (() => {
2 | var createDom = function(categories, options) {
3 | // Animate body if enabled
4 | if (options.animate) document.body.setAttribute("class", "animated");
5 |
6 | // Create rows with title and links
7 | var bookmarks = document.getElementById("bookmarks");
8 | bookmarks.innerHTML = categories.map((category, index) => {
9 | var items = category.children
10 | .map(bookmark => `
11 | ${bookmark.title}
12 | `)
13 | .join("");
14 | return `
15 | | ${category.title} |
16 | |
17 |
`;
18 | }).join("");
19 |
20 | // Add quote
21 | var quote = document.getElementById("quote");
22 | quote.innerHTML = options.quote;
23 | quote.setAttribute("style",
24 | `animation-delay: ${categories.length * 50}ms`);
25 | };
26 |
27 | var setStyles = function(options) {
28 | var style = document.createElement("style");
29 | style.type = "text/css";
30 | style.innerHTML += `body {background: ${options.bgcolor};}\n`;
31 | style.innerHTML +=
32 | `.line-custom {border-left-color: ${options.lncolor};
33 | border-left-width: ${options.lnsize}px;}\n`;
34 | style.innerHTML +=
35 | `.text-custom {color: ${options.txcolor};
36 | font-family: ${options.font};
37 | font-size: ${options.txsize}px;}\n
38 | .link:hover, .link:focus {color: ${options.txcolorhv}}\n`;
39 |
40 | document.head.appendChild(style);
41 | };
42 |
43 | document.body.onload = function() {
44 | Promise.all([Landing.getCategories(), Landing.getOptions()])
45 | .then(results => {
46 | setStyles(results[1]);
47 | createDom(results[0], results[1]);
48 | });
49 | };
50 | })();
51 |
--------------------------------------------------------------------------------
/src/app/js/lib.js:
--------------------------------------------------------------------------------
1 | // Functions/constants used across multiple pages
2 | var Landing = (() => {
3 | var defaultOptions = {
4 | animate: true,
5 | bgcolor: "#cccccc",
6 | lncolor: "#333333",
7 | lnsize: 2,
8 | font: "sans-serif",
9 | txcolor: "#333333",
10 | txcolorhv: "#0000FF",
11 | txsize: 20,
12 | quote: "",
13 | };
14 |
15 | var getCategories = async function() {
16 | var otherBookmarks = await (new Promise(resolve => {
17 | chrome.bookmarks.getChildren("2", resolve);
18 | }));
19 |
20 | var baseFolder =
21 | otherBookmarks.find(node => node.title == "landing") ||
22 | await sampleBaseFolder();
23 |
24 | return (await (new Promise(resolve => {
25 | chrome.bookmarks.getSubTree(baseFolder.id, resolve);
26 | })))[0].children;
27 | };
28 |
29 | var getOptions = async function() {
30 | var options = (await (new Promise(resolve => {
31 | chrome.storage.sync.get("landing_options", resolve);
32 | }))).landing_options;
33 |
34 | if (options) {
35 | // Ensure that all option values have set, even if the options from
36 | // storage have missing values
37 | for (var o in defaultOptions) {
38 | if (options[o] == undefined) options[o] = defaultOptions[o];
39 | }
40 | } else {
41 | options = sampleOptions();
42 | }
43 |
44 | return options;
45 | };
46 |
47 | var sampleBaseFolder = async function() {
48 | var landing = await (new Promise(resolve => {
49 | chrome.bookmarks.create({parentId: "2", title: "landing"}, resolve);
50 | }));
51 |
52 | var welcome = await (new Promise(resolve => {
53 | chrome.bookmarks.create({
54 | parentId: landing.id,
55 | title: "Welcome!"
56 | }, resolve);
57 | }));
58 |
59 | var instructions = await (new Promise(resolve => {
60 | chrome.bookmarks.create({
61 | parentId: welcome.id,
62 | title: "Click here for instructions on how to get started.",
63 | url: "https://github.com/alex-chew/landing#usage"
64 | }, resolve);
65 | }));
66 |
67 | var optionsPage = await (new Promise(resolve => {
68 | chrome.bookmarks.create({
69 | parentId: welcome.id,
70 | title: "Or click here to customize the theme!",
71 | url: chrome.runtime.getURL("app/options.html")
72 | }, resolve);
73 | }));
74 |
75 | return landing;
76 | };
77 |
78 | var sampleOptions = function() {
79 | chrome.storage.sync.set({
80 | landing_options: defaultOptions
81 | });
82 | return defaultOptions;
83 | };
84 |
85 | return {
86 | getCategories: getCategories,
87 | getOptions: getOptions,
88 | sampleOptions: sampleOptions,
89 | };
90 | })();
91 |
--------------------------------------------------------------------------------
/src/app/js/options.js:
--------------------------------------------------------------------------------
1 | (() => {
2 | var setOptionValues = function(options) {
3 | for (var o in options) {
4 | var input = document.getElementsByName(o)[0];
5 | if (input.type == "checkbox") input.checked = options[o];
6 | else input.value = options[o];
7 | }
8 | };
9 |
10 | var getOptionValues = function(options) {
11 | for (var o in options) {
12 | var input = document.getElementsByName(o)[0];
13 | if (input.type == "checkbox") options[o] = input.checked;
14 | else options[o] = input.value;
15 | }
16 | return options;
17 | };
18 |
19 | document.body.onload = function() {
20 | var options = {};
21 | Landing.getOptions().then(o => {
22 | options = o;
23 | setOptionValues(options);
24 | });
25 |
26 | var saveButton = document.getElementsByName("save")[0];
27 | saveButton.addEventListener("click", () => {
28 | chrome.storage.sync.set({
29 | landing_options: getOptionValues(options)
30 | });
31 | });
32 |
33 | var resetButton = document.getElementsByName("reset")[0];
34 | resetButton.addEventListener("click", () => {
35 | if (chrome.extension.getBackgroundPage()
36 | .confirm("Reset to default settings? This cannot be undone.")) {
37 | options = Landing.sampleOptions();
38 | setOptionValues(options);
39 | }
40 | });
41 | };
42 | })();
43 |
--------------------------------------------------------------------------------
/src/app/options.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
Landing options
5 |
6 |
7 |
8 |
9 |
49 |
50 |
51 |
52 |
53 |
--------------------------------------------------------------------------------
/src/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Landing",
3 | "version": "0.7",
4 | "manifest_version": 2,
5 | "background": {
6 | "page": "app/bg.html"
7 | },
8 | "options_ui": {
9 | "page": "app/options.html",
10 | "chrome_style": true
11 | },
12 | "chrome_url_overrides": {
13 | "newtab": "app/index.html"
14 | },
15 | "permissions": [
16 | "bookmarks",
17 | "storage"
18 | ]
19 | }
20 |
--------------------------------------------------------------------------------