From c599c2208bd7f5b39b2886c91b100d6057b0e962 Mon Sep 17 00:00:00 2001 From: Nguyen-Quoc-Thai Date: Mon, 25 Jan 2021 17:27:16 +0700 Subject: [PATCH] Notification --- manifest.json | 18 +++++----- popup.html | 1 + src/css/style.css | 12 +++++++ src/js/main.js | 84 ++++++++++++++++++++--------------------------- src/js/util.js | 41 +++++++++++++++++++++++ 5 files changed, 97 insertions(+), 59 deletions(-) create mode 100644 src/js/util.js diff --git a/manifest.json b/manifest.json index b8778bb..dd2a63f 100644 --- a/manifest.json +++ b/manifest.json @@ -9,9 +9,7 @@ "48": "src/icons/popup.png", "128": "src/icons/popup.png" }, - "author": "PA_NQT", - "browser_action": { "default_icon": { "16": "src/icons/popup.png", @@ -21,13 +19,13 @@ "default_title": "Smart bookmark", "default_popup": "popup.html" }, - "permissions": [ - "contextMenus", - "tabs", - "storage", - "http://*/*", - "https://*/*" - ], - + "permissions": ["tabs"], + "toggle-feature-foo": { + "suggested_key": { + "default": "Shift+S+B", + "mac": "Shift+S+B" + }, + "description": "Toggle feature smart bookmark" + }, "content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'" } diff --git a/popup.html b/popup.html index 4c5b368..e3bc03d 100644 --- a/popup.html +++ b/popup.html @@ -106,6 +106,7 @@ + diff --git a/src/css/style.css b/src/css/style.css index be5399c..4e0ca37 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -78,10 +78,22 @@ body { margin: 8px 0 !important; } +.btn-add:focus, +.btn-add:active { + outline: none !important; + box-shadow: none; +} + .btn-del { display: none; } +.msg-success { + font-size: 14px; + font-style: italic; + margin-left: 8px; +} + .ml { margin-left: 15px; } diff --git a/src/js/main.js b/src/js/main.js index dbfe73d..0d471a9 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -1,17 +1,3 @@ -/** ----------------------------- Util ---------------------------*/ -function genId(length) { - const characters = 'abc0123456789'; - const charactersLength = characters.length; - - let result = ''; - - for (let i = 0; i < length; i++) { - result += characters.charAt(Math.floor(Math.random() * charactersLength)); - } - - return result; -} - /** ----------------------------- Handler ---------------------------*/ const BASE_API_URL = 'https://600e379f3bb1d100179de841.mockapi.io/api/v1'; @@ -25,69 +11,54 @@ const keys = [ 'other' ]; -// Render popup & add listener +/** Render popup & add listener */ (() => { + // Popup render fetch(`${BASE_API_URL}/tools`) .then((response) => response.json()) .then((store) => { keys.forEach((key) => { + // Filter each category const items = store.filter((el) => el.type === key); + // Resource is empty if (!items.length) return; + // Update view let result = ''; - items.map((resource) => { - result += ` -
- -
-
- `; + result += itemTemplate(resource); }); - document.getElementById(`${key}-list`).innerHTML = result; }); - // Handle add listener: choose an item + // Handle add listener: choose an item (create new tab) $(window).ready(function () { - $('.dev-engine button') - .not('.btn-add') - .click(function () { - const url = $(this).attr('src'); - - // Create new tab - chrome.tabs.create( - { - url - }, - function () {} - ); - }); + addEventNewTabForEachBtn('.dev-engine button', '.btn-add', 'src'); }); - // Handle add listener: add a bookmark + // Handle add listener: Add a new bookmark on btn add $('.dev-engine .btn-add').click(function () { - const resourceKey = $(this).attr('data-resource'); + const curr = $(this); chrome.tabs.query({ active: true, lastFocusedWindow: true }, (tabs) => { + // Create a new item + const resourceKey = curr.attr('data-resource'); + const link = tabs[0].url; const icon = tabs[0].favIconUrl; const title = tabs[0].title; - const name = title.length < 13 ? title : `${title.slice(0, 10)}...`; + const name = title; const type = resourceKey; const newItem = { - id: genId(5), name, icon, link, type }; + // Call API - send new item fetch(`${BASE_API_URL}/tools`, { method: 'POST', headers: { @@ -97,21 +68,36 @@ const keys = [ body: JSON.stringify(newItem) }) .then((response) => response.json()) - .then((store) => store); + .then((newResource) => { + // Text notification + const msg = `Thêm thành công`; + + $(msg).insertAfter(curr); + setTimeout(function () { + curr.next().html(''); + }, 2000); + + // Update view + let newNode = itemTemplate(newResource); + curr.prev().append(newNode); + }); }); }); // Handle add listener: del a bookmark - $('.dev-engine .btn-del').click(function (e) { - e.preventDefault(); + $('.dev-engine .btn-del').click(function () { + const curr = $(this); - const id = $(this).prev().attr('id'); + const id = curr.prev().attr('id'); fetch(`${BASE_API_URL}/tools/${id}`, { method: 'DELETE' }) .then((response) => response.json()) - .then((result) => result); + .then((result) => { + // Update view + curr.parent().addClass('d-none'); + }); }); }); })(); diff --git a/src/js/util.js b/src/js/util.js new file mode 100644 index 0000000..aa1b0cd --- /dev/null +++ b/src/js/util.js @@ -0,0 +1,41 @@ +/** Utils func */ + +// Item template +const itemTemplate = (resource) => { + return ` +
+ +
+
+ `; +}; + +// Add event click on an item +const addEventNewTabForEachBtn = (selector, except_selector, attr_url) => { + $(selector) + .not(except_selector) + .click(function () { + const url = $(this).attr(attr_url); + + // Create new tab + chrome.tabs.create( + { + url + }, + function () {} + ); + }); +};