From 94119a341cb18c486bbba700365372c810188018 Mon Sep 17 00:00:00 2001 From: ReeceM Date: Sun, 12 Apr 2020 20:43:08 +0200 Subject: [PATCH 1/6] fix: colouring of dismiss --- src/config/styling.js | 18 +++++++++--------- src/index.js | 2 +- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/config/styling.js b/src/config/styling.js index 06cf2e3..4286326 100644 --- a/src/config/styling.js +++ b/src/config/styling.js @@ -25,7 +25,7 @@ export const themes = { badge: "hb-bg-white hb-text-gray-900", postTitle: "hover:hb-text-gray-300", secondaryLink: "hover:hb-text-gray-300", - dismiss: "hb-text-white" + dismiss: "hb-text-gray-800" }, lightGray: { wrapper: "hb-bg-gray-400 hb-text-gray-900", @@ -33,7 +33,7 @@ export const themes = { badge: "hb-bg-white hb-text-gray-900 shadow", postTitle: "hover:hb-text-gray-600", secondaryLink: "hover:hb-text-gray-600", - dismiss: "hb-text-white" + dismiss: "hb-text-gray-800" }, blue: { wrapper: "hb-bg-blue-900 hb-text-blue-100", @@ -41,7 +41,7 @@ export const themes = { badge: "hb-bg-blue-100 hb-text-blue-900 shadow", postTitle: "hover:hb-text-blue-300", secondaryLink: "hover:hb-text-blue-300", - dismiss: "hb-text-white" + dismiss: "hb-text-gray-800" }, green: { wrapper: "hb-bg-green-600 hb-text-green-100", @@ -49,7 +49,7 @@ export const themes = { badge: "hb-bg-green-100 hb-text-green-900", postTitle: "hover:hb-text-green-300", secondaryLink: "hover:hb-text-green-300", - dismiss: "hb-text-white" + dismiss: "hb-text-gray-800" }, indigo: { wrapper: "hb-bg-indigo-800 hb-text-indigo-100", @@ -57,7 +57,7 @@ export const themes = { badge: "hb-bg-indigo-100 hb-text-indigo-900 shadow", postTitle: "hover:hb-text-indigo-300", secondaryLink: "hover:hb-text-indigo-300", - dismiss: "hb-text-white" + dismiss: "hb-text-gray-800" }, orange: { wrapper: "hb-bg-orange-300 hb-text-orange-900", @@ -65,7 +65,7 @@ export const themes = { badge: "hb-bg-orange-800 hb-text-orange-100 shadow", postTitle: "hover:hb-text-orange-700", secondaryLink: "hover:hb-text-orange-700", - dismiss: "hb-text-white" + dismiss: "hb-text-gray-800" }, yellow: { wrapper: "hb-bg-yellow-300 hb-text-yellow-900", @@ -73,7 +73,7 @@ export const themes = { badge: "hb-bg-yellow-100 hb-text-yellow-900 shadow", postTitle: "hover:hb-text-yellow-700", secondaryLink: "hover:hb-text-yellow-700", - dismiss: "hb-text-white" + dismiss: "hb-text-gray-800" }, teal: { wrapper: "hb-bg-teal-500 hb-text-teal-100", @@ -81,7 +81,7 @@ export const themes = { badge: "hb-bg-teal-900 hb-text-teal-100 shadow", postTitle: "hover:hb-text-teal-300", secondaryLink: "hover:hb-text-teal-300", - dismiss: "hb-text-white" + dismiss: "hb-text-gray-800" }, red: { wrapper: "hb-bg-red-400 hb-text-red-900", @@ -89,6 +89,6 @@ export const themes = { badge: "hb-bg-red-100 hb-text-red-900 shadow", postTitle: "hover:hb-text-red-100", secondaryLink: "hover:hb-text-red-100", - dismiss: "hb-text-white" + dismiss: "hb-text-gray-800" }, } diff --git a/src/index.js b/src/index.js index f375a3c..8c6944a 100644 --- a/src/index.js +++ b/src/index.js @@ -137,7 +137,7 @@ const hBar = { */ dismissibleButton() { let dismiss = newElement('button', { - classes: 'hb--mr-1 hb-flex hb-p-1 hb-rounded-md hover:hb-bg-gray-800 focus:hb-outline-none focus:hb-bg-gray-800', + classes: 'hb--mr-2 hb-flex hb-p-1 hb-rounded-md hover:hb-text-white hover:hb-bg-gray-800 focus:hb-outline-none focus:hb-bg-gray-800', }); dismiss.innerHTML = ` From 58b559d7c085cb15b5250d70d916df22d9af8951 Mon Sep 17 00:00:00 2001 From: ReeceM Date: Fri, 15 May 2020 09:52:41 +0200 Subject: [PATCH 2/6] chnage the default configs --- src/config/config.js | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/src/config/config.js b/src/config/config.js index dca7747..672dcc5 100644 --- a/src/config/config.js +++ b/src/config/config.js @@ -2,11 +2,33 @@ * The default configuration for the package * * @var {object} config + * @var {string} config.url + * @var {string} config.ele + * @var {boolean} config.dismissible + * @var {Date} config.dismissFor + * @var {string} config.badge + * @var {string} config.theme + * @var {array} config.secondaryLinks + * @var {object} config.customStyles + * @var {function} config.onCompleted + * @var {function} config.parser + * @var {string} config.link + * @var {string} config.title + * @var {object} config.fetchOptions */ export const config = { url: '', + ele: 'h-bar', + dismissible: false, + dismissFor: null, + badge: 'New', theme: "gray", secondaryLinks: [], + customStyles: {}, + onCompleted: () => { }, + parser: null, + link: null, + title: null, fetchOptions: { method: 'GET', mode: 'cors', // no-cors, *cors, same-origin From 90ad84154b039664dd58c3fb86d057c918afc0db Mon Sep 17 00:00:00 2001 From: ReeceM Date: Fri, 15 May 2020 09:52:51 +0200 Subject: [PATCH 3/6] clean up init functiont --- src/functions/init.js | 70 ++++++++++++++++++------------------------- 1 file changed, 29 insertions(+), 41 deletions(-) diff --git a/src/functions/init.js b/src/functions/init.js index c774568..98a5178 100644 --- a/src/functions/init.js +++ b/src/functions/init.js @@ -4,57 +4,45 @@ import { styling } from "../config/styling" /** * - * @param {object} param0 - * @param {string} param0.url - * @param {string} param0.ele The element id - * @param {boolean} param0.dismissible - * @param {Date|boolean} param0.dismissFor - * @param {string} param0.badge - * @param {array} param0.secondaryLinks - * @param {object} param0.options - * @param {object} param0.customStyles - * @param {function} param0.parser - * @param {function} param0.onCompleted - * @param {string} param0.link Manual override - * @param {string} param0.title Manual Override + * @param {object} options + * @param {string} options.url + * @param {string} options.ele The element id + * @param {boolean} options.dismissible + * @param {Date|boolean} options.dismissFor + * @param {string} options.badge + * @param {array} options.secondaryLinks + * @param {object} options.headers + * @param {object} options.customStyles + * @param {function} options.parser + * @param {function} options.onCompleted + * @param {string} options.link Manual override + * @param {string} options.title Manual Override */ -export function init({ - url, /** The URL to fetch data from */ - ele, - dismissible, - dismissFor, - badge, - secondaryLinks, - options, - customStyles, - onCompleted, - parser, - link, /** The link for the new post/article, manual override */ - title, /** The title of the post/article, manual override */ -}) { - this.url = url; - - this.ele = ele || 'h-bar'; +export function init(options = {}) { + this.url = options.url; + + this.ele = options.ele || 'h-bar'; // we will default to false for this - this.dismissible = dismissible || false; + this.dismissible = options.dismissible || false; - this.dismissFor = dismissFor || false; + this.dismissFor = options.dismissFor || false; - this.config = Object.assign(config, options); - this.styling = Object.assign(styling, customStyles); + this.config = config; + this.config.fetchOptions.headers = Object.assign(config.fetchOptions.headers, options.headers) + this.styling = Object.assign(styling, options.customStyles); - this.secondaryLinks = secondaryLinks + this.secondaryLinks = options.secondaryLinks - this.onCompleted = onCompleted || function () { }; + this.onCompleted = options.onCompleted || function () { }; - this.badge = badge || 'New'; - this.postLink = link - this.postTitle = title + this.badge = options.badge || 'New'; + this.postLink = options.link + this.postTitle = options.title - this.theme = this.config.theme + this.theme = options.theme - initNormalise(parser) + initNormalise(options.parser) return this } From d77589dfd0f467632535e42b5761fcc30885b657 Mon Sep 17 00:00:00 2001 From: ReeceM Date: Fri, 15 May 2020 09:53:06 +0200 Subject: [PATCH 4/6] not sure why, but will use it :) --- src/utils.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/src/utils.js b/src/utils.js index 810e777..1ed3900 100644 --- a/src/utils.js +++ b/src/utils.js @@ -46,3 +46,23 @@ export function addClasses(element, classes = '') { return element } + + +/** + * Binds all the methods on a JS Class to the `this` context of the class. + * Adapted from https://github.com/sindresorhus/auto-bind + * @param {object} self The `this` context of the class + * @return {object} The `this` context of the class + */ +export default function autoBind(self) { + const keys = Object.getOwnPropertyNames(self.constructor.prototype); + for (let i = 0; i < keys.length; i++) { + const key = keys[i]; + const val = self[key]; + if (key !== 'constructor' && typeof val === 'function') { + self[key] = val.bind(self); + } + } + + return self; +} From 024846b19bc64a12ad5c7df76502bfb7982ffdfe Mon Sep 17 00:00:00 2001 From: ReeceM Date: Fri, 15 May 2020 09:56:08 +0200 Subject: [PATCH 5/6] bump version and compile --- dist/hBar.js | 143 ++++++++++++++++++++++++++++------------------ dist/hBar.min.js | 2 +- docs/example.html | 5 +- package.json | 2 +- src/index.js | 4 +- 5 files changed, 95 insertions(+), 61 deletions(-) diff --git a/dist/hBar.js b/dist/hBar.js index a68be02..8bfd25a 100644 --- a/dist/hBar.js +++ b/dist/hBar.js @@ -403,7 +403,7 @@ module.exports = function (list, options) { var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(3); exports = ___CSS_LOADER_API_IMPORT___(false); // Module -exports.push([module.i, ".hb-bg-white{background-color:#fff}.hb-bg-gray-400{background-color:#cbd5e0}.hb-bg-gray-900{background-color:#1a202c}.hb-bg-red-100{background-color:#fff5f5}.hb-bg-red-400{background-color:#fc8181}.hb-bg-orange-300{background-color:#fbd38d}.hb-bg-orange-800{background-color:#9c4221}.hb-bg-yellow-100{background-color:ivory}.hb-bg-yellow-300{background-color:#faf089}.hb-bg-green-100{background-color:#f0fff4}.hb-bg-green-600{background-color:#38a169}.hb-bg-teal-500{background-color:#38b2ac}.hb-bg-teal-900{background-color:#234e52}.hb-bg-blue-100{background-color:#ebf8ff}.hb-bg-blue-900{background-color:#2a4365}.hb-bg-indigo-100{background-color:#ebf4ff}.hb-bg-indigo-800{background-color:#434190}.hover\\:hb-bg-gray-800:hover{background-color:#2d3748}.focus\\:hb-bg-gray-800:focus{background-color:#2d3748}.hb-rounded-md{border-radius:.375rem}.hb-rounded-full{border-radius:9999px}.hb-cursor-pointer{cursor:pointer}.hb-flex{display:flex}.hb-inline-flex{display:inline-flex}.hb-items-center{align-items:center}.hb-justify-between{justify-content:space-between}.hb-font-semibold{font-weight:600}.hb-h-3{height:.75rem}.hb-h-4{height:1rem}.hb-leading-relaxed{line-height:1.625}.hb-mx-2{margin-left:.5rem;margin-right:.5rem}.hb-mx-5{margin-left:1.25rem;margin-right:1.25rem}.hb--mr-1{margin-right:-.25rem}.focus\\:hb-outline-none:focus{outline:0}.hb-p-1{padding:.25rem}.hb-px-1{padding-left:.25rem;padding-right:.25rem}.hb-py-2{padding-top:.5rem;padding-bottom:.5rem}.hb-px-2{padding-left:.5rem;padding-right:.5rem}.hb-text-white{color:#fff}.hb-text-gray-100{color:#f7fafc}.hb-text-gray-900{color:#1a202c}.hb-text-red-900{color:#742a2a}.hb-text-orange-100{color:#fffaf0}.hb-text-orange-900{color:#7b341e}.hb-text-yellow-900{color:#744210}.hb-text-green-100{color:#f0fff4}.hb-text-green-900{color:#22543d}.hb-text-teal-100{color:#e6fffa}.hb-text-blue-100{color:#ebf8ff}.hb-text-blue-900{color:#2a4365}.hb-text-indigo-100{color:#ebf4ff}.hb-text-indigo-900{color:#3c366b}.hover\\:hb-text-gray-300:hover{color:#e2e8f0}.hover\\:hb-text-gray-600:hover{color:#718096}.hover\\:hb-text-red-100:hover{color:#fff5f5}.hover\\:hb-text-orange-700:hover{color:#c05621}.hover\\:hb-text-yellow-700:hover{color:#b7791f}.hover\\:hb-text-green-300:hover{color:#9ae6b4}.hover\\:hb-text-teal-300:hover{color:#81e6d9}.hover\\:hb-text-blue-300:hover{color:#90cdf4}.hover\\:hb-text-indigo-300:hover{color:#a3bffa}.hb-text-xs{font-size:.75rem}.hb-text-sm{font-size:.875rem}.hb-uppercase{text-transform:uppercase}.hover\\:hb-underline:hover{text-decoration:underline}.hb-tracking-wider{letter-spacing:.05em}.hb-w-3{width:.75rem}.hb-w-4{width:1rem}.hb-w-full{width:100%}a{color:inherit;text-decoration:inherit;background-color:transparent}*{box-sizing:border-box;border:0 solid #e2e8f0}.fade-in-top{-webkit-animation:fade-in-top .8s cubic-bezier(.39,.575,.565,1);animation:fade-in-top .8s cubic-bezier(.39,.575,.565,1)}@-webkit-keyframes fade-in-top{to{transform:translateY(0);opacity:1}}@keyframes fade-in-top{0%{transform:translateY(-50px);opacity:0}to{transform:translateY(0);opacity:1}}@media (min-width:640px){.sm\\:hb-flex-row{flex-direction:row}}@media (min-width:768px){.md\\:hb-flex-row{flex-direction:row}.md\\:hb-px-20{padding-left:5rem;padding-right:5rem}}", ""]); +exports.push([module.i, ".hb-bg-white{background-color:#fff}.hb-bg-gray-400{background-color:#cbd5e0}.hb-bg-gray-900{background-color:#1a202c}.hb-bg-red-100{background-color:#fff5f5}.hb-bg-red-400{background-color:#fc8181}.hb-bg-orange-300{background-color:#fbd38d}.hb-bg-orange-800{background-color:#9c4221}.hb-bg-yellow-100{background-color:ivory}.hb-bg-yellow-300{background-color:#faf089}.hb-bg-green-100{background-color:#f0fff4}.hb-bg-green-600{background-color:#38a169}.hb-bg-teal-500{background-color:#38b2ac}.hb-bg-teal-900{background-color:#234e52}.hb-bg-blue-100{background-color:#ebf8ff}.hb-bg-blue-900{background-color:#2a4365}.hb-bg-indigo-100{background-color:#ebf4ff}.hb-bg-indigo-800{background-color:#434190}.hover\\:hb-bg-gray-800:hover{background-color:#2d3748}.focus\\:hb-bg-gray-800:focus{background-color:#2d3748}.hb-rounded-md{border-radius:.375rem}.hb-rounded-full{border-radius:9999px}.hb-cursor-pointer{cursor:pointer}.hb-flex{display:flex}.hb-inline-flex{display:inline-flex}.hb-items-center{align-items:center}.hb-justify-between{justify-content:space-between}.hb-font-semibold{font-weight:600}.hb-h-3{height:.75rem}.hb-h-4{height:1rem}.hb-leading-relaxed{line-height:1.625}.hb-mx-2{margin-left:.5rem;margin-right:.5rem}.hb-mx-5{margin-left:1.25rem;margin-right:1.25rem}.hb--mr-2{margin-right:-.5rem}.focus\\:hb-outline-none:focus{outline:0}.hb-p-1{padding:.25rem}.hb-px-1{padding-left:.25rem;padding-right:.25rem}.hb-py-2{padding-top:.5rem;padding-bottom:.5rem}.hb-px-2{padding-left:.5rem;padding-right:.5rem}.hb-text-gray-100{color:#f7fafc}.hb-text-gray-800{color:#2d3748}.hb-text-gray-900{color:#1a202c}.hb-text-red-900{color:#742a2a}.hb-text-orange-100{color:#fffaf0}.hb-text-orange-900{color:#7b341e}.hb-text-yellow-900{color:#744210}.hb-text-green-100{color:#f0fff4}.hb-text-green-900{color:#22543d}.hb-text-teal-100{color:#e6fffa}.hb-text-blue-100{color:#ebf8ff}.hb-text-blue-900{color:#2a4365}.hb-text-indigo-100{color:#ebf4ff}.hb-text-indigo-900{color:#3c366b}.hover\\:hb-text-white:hover{color:#fff}.hover\\:hb-text-gray-300:hover{color:#e2e8f0}.hover\\:hb-text-gray-600:hover{color:#718096}.hover\\:hb-text-red-100:hover{color:#fff5f5}.hover\\:hb-text-orange-700:hover{color:#c05621}.hover\\:hb-text-yellow-700:hover{color:#b7791f}.hover\\:hb-text-green-300:hover{color:#9ae6b4}.hover\\:hb-text-teal-300:hover{color:#81e6d9}.hover\\:hb-text-blue-300:hover{color:#90cdf4}.hover\\:hb-text-indigo-300:hover{color:#a3bffa}.hb-text-xs{font-size:.75rem}.hb-text-sm{font-size:.875rem}.hb-uppercase{text-transform:uppercase}.hover\\:hb-underline:hover{text-decoration:underline}.hb-tracking-wider{letter-spacing:.05em}.hb-w-3{width:.75rem}.hb-w-4{width:1rem}.hb-w-full{width:100%}a{color:inherit;text-decoration:inherit;background-color:transparent}*{box-sizing:border-box;border:0 solid #e2e8f0}.fade-in-top{-webkit-animation:fade-in-top .8s cubic-bezier(.39,.575,.565,1);animation:fade-in-top .8s cubic-bezier(.39,.575,.565,1)}@-webkit-keyframes fade-in-top{to{transform:translateY(0);opacity:1}}@keyframes fade-in-top{0%{transform:translateY(-50px);opacity:0}to{transform:translateY(0);opacity:1}}@media (min-width:640px){.sm\\:hb-flex-row{flex-direction:row}}@media (min-width:768px){.md\\:hb-flex-row{flex-direction:row}.md\\:hb-px-20{padding-left:5rem;padding-right:5rem}}", ""]); // Exports module.exports = exports; @@ -524,11 +524,33 @@ var styles = __webpack_require__(0); * The default configuration for the package * * @var {object} config + * @var {string} config.url + * @var {string} config.ele + * @var {boolean} config.dismissible + * @var {Date} config.dismissFor + * @var {string} config.badge + * @var {string} config.theme + * @var {array} config.secondaryLinks + * @var {object} config.customStyles + * @var {function} config.onCompleted + * @var {function} config.parser + * @var {string} config.link + * @var {string} config.title + * @var {object} config.fetchOptions */ var config = { url: '', + ele: 'h-bar', + dismissible: false, + dismissFor: null, + badge: 'New', theme: "gray", secondaryLinks: [], + customStyles: {}, + onCompleted: function onCompleted() {}, + parser: null, + link: null, + title: null, fetchOptions: { method: 'GET', mode: 'cors', @@ -637,7 +659,7 @@ var themes = { badge: "hb-bg-white hb-text-gray-900", postTitle: "hover:hb-text-gray-300", secondaryLink: "hover:hb-text-gray-300", - dismiss: "hb-text-white" + dismiss: "hb-text-gray-800" }, lightGray: { wrapper: "hb-bg-gray-400 hb-text-gray-900", @@ -645,7 +667,7 @@ var themes = { badge: "hb-bg-white hb-text-gray-900 shadow", postTitle: "hover:hb-text-gray-600", secondaryLink: "hover:hb-text-gray-600", - dismiss: "hb-text-white" + dismiss: "hb-text-gray-800" }, blue: { wrapper: "hb-bg-blue-900 hb-text-blue-100", @@ -653,7 +675,7 @@ var themes = { badge: "hb-bg-blue-100 hb-text-blue-900 shadow", postTitle: "hover:hb-text-blue-300", secondaryLink: "hover:hb-text-blue-300", - dismiss: "hb-text-white" + dismiss: "hb-text-gray-800" }, green: { wrapper: "hb-bg-green-600 hb-text-green-100", @@ -661,7 +683,7 @@ var themes = { badge: "hb-bg-green-100 hb-text-green-900", postTitle: "hover:hb-text-green-300", secondaryLink: "hover:hb-text-green-300", - dismiss: "hb-text-white" + dismiss: "hb-text-gray-800" }, indigo: { wrapper: "hb-bg-indigo-800 hb-text-indigo-100", @@ -669,7 +691,7 @@ var themes = { badge: "hb-bg-indigo-100 hb-text-indigo-900 shadow", postTitle: "hover:hb-text-indigo-300", secondaryLink: "hover:hb-text-indigo-300", - dismiss: "hb-text-white" + dismiss: "hb-text-gray-800" }, orange: { wrapper: "hb-bg-orange-300 hb-text-orange-900", @@ -677,7 +699,7 @@ var themes = { badge: "hb-bg-orange-800 hb-text-orange-100 shadow", postTitle: "hover:hb-text-orange-700", secondaryLink: "hover:hb-text-orange-700", - dismiss: "hb-text-white" + dismiss: "hb-text-gray-800" }, yellow: { wrapper: "hb-bg-yellow-300 hb-text-yellow-900", @@ -685,7 +707,7 @@ var themes = { badge: "hb-bg-yellow-100 hb-text-yellow-900 shadow", postTitle: "hover:hb-text-yellow-700", secondaryLink: "hover:hb-text-yellow-700", - dismiss: "hb-text-white" + dismiss: "hb-text-gray-800" }, teal: { wrapper: "hb-bg-teal-500 hb-text-teal-100", @@ -693,7 +715,7 @@ var themes = { badge: "hb-bg-teal-900 hb-text-teal-100 shadow", postTitle: "hover:hb-text-teal-300", secondaryLink: "hover:hb-text-teal-300", - dismiss: "hb-text-white" + dismiss: "hb-text-gray-800" }, red: { wrapper: "hb-bg-red-400 hb-text-red-900", @@ -701,7 +723,7 @@ var themes = { badge: "hb-bg-red-100 hb-text-red-900 shadow", postTitle: "hover:hb-text-red-100", secondaryLink: "hover:hb-text-red-100", - dismiss: "hb-text-white" + dismiss: "hb-text-gray-800" } }; // CONCATENATED MODULE: ./src/functions/init.js @@ -710,50 +732,40 @@ var themes = { /** * - * @param {object} param0 - * @param {string} param0.url - * @param {string} param0.ele The element id - * @param {boolean} param0.dismissible - * @param {Date|boolean} param0.dismissFor - * @param {string} param0.badge - * @param {array} param0.secondaryLinks - * @param {object} param0.options - * @param {object} param0.customStyles - * @param {function} param0.parser - * @param {function} param0.onCompleted - * @param {string} param0.link Manual override - * @param {string} param0.title Manual Override + * @param {object} options + * @param {string} options.url + * @param {string} options.ele The element id + * @param {boolean} options.dismissible + * @param {Date|boolean} options.dismissFor + * @param {string} options.badge + * @param {array} options.secondaryLinks + * @param {object} options.headers + * @param {object} options.customStyles + * @param {function} options.parser + * @param {function} options.onCompleted + * @param {string} options.link Manual override + * @param {string} options.title Manual Override */ -function init(_ref) { - var url = _ref.url, - ele = _ref.ele, - dismissible = _ref.dismissible, - dismissFor = _ref.dismissFor, - badge = _ref.badge, - secondaryLinks = _ref.secondaryLinks, - options = _ref.options, - customStyles = _ref.customStyles, - onCompleted = _ref.onCompleted, - parser = _ref.parser, - link = _ref.link, - title = _ref.title; - this.url = url; - this.ele = ele || 'h-bar'; // we will default to false for this - - this.dismissible = dismissible || false; - this.dismissFor = dismissFor || false; - this.config = Object.assign(config, options); - this.styling = Object.assign(styling, customStyles); - this.secondaryLinks = secondaryLinks; - - this.onCompleted = onCompleted || function () {}; - - this.badge = badge || 'New'; - this.postLink = link; - this.postTitle = title; - this.theme = this.config.theme; - initNormalise(parser); +function init() { + var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; + this.url = options.url; + this.ele = options.ele || 'h-bar'; // we will default to false for this + + this.dismissible = options.dismissible || false; + this.dismissFor = options.dismissFor || false; + this.config = config; + this.config.fetchOptions.headers = Object.assign(config.fetchOptions.headers, options.headers); + this.styling = Object.assign(styling, options.customStyles); + this.secondaryLinks = options.secondaryLinks; + + this.onCompleted = options.onCompleted || function () {}; + + this.badge = options.badge || 'New'; + this.postLink = options.link; + this.postTitle = options.title; + this.theme = options.theme; + initNormalise(options.parser); return this; } // CONCATENATED MODULE: ./src/utils.js @@ -824,13 +836,34 @@ function addClasses(element) { return element; } +/** + * Binds all the methods on a JS Class to the `this` context of the class. + * Adapted from https://github.com/sindresorhus/auto-bind + * @param {object} self The `this` context of the class + * @return {object} The `this` context of the class + */ + +function autoBind(self) { + var keys = Object.getOwnPropertyNames(self.constructor.prototype); + + for (var i = 0; i < keys.length; i++) { + var key = keys[i]; + var val = self[key]; + + if (key !== 'constructor' && typeof val === 'function') { + self[key] = val.bind(self); + } + } + + return self; +} // CONCATENATED MODULE: ./src/index.js function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } /** * h-bar announcement banner * - * @version 1.0.0 + * @version 1.1.0 * @author ReeceM */ @@ -842,7 +875,7 @@ var hBar = { /** * h-bar version number */ - version: "1.0.0", + version: "1.1.0", /** * Initialise the hBar package @@ -967,7 +1000,7 @@ var hBar = { var _this3 = this; var dismiss = newElement('button', { - classes: 'hb--mr-1 hb-flex hb-p-1 hb-rounded-md hover:hb-bg-gray-800 focus:hb-outline-none focus:hb-bg-gray-800' + classes: 'hb--mr-2 hb-flex hb-p-1 hb-rounded-md hover:hb-text-white hover:hb-bg-gray-800 focus:hb-outline-none focus:hb-bg-gray-800' }); dismiss.innerHTML = "\n \n "); diff --git a/dist/hBar.min.js b/dist/hBar.min.js index 61a89a1..9674799 100644 --- a/dist/hBar.min.js +++ b/dist/hBar.min.js @@ -1 +1 @@ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.hBar=t():e.hBar=t()}(window,function(){return n={},o.m=r=[function(e,t,r){var n=r(1),o=r(2);"string"==typeof(o=o.__esModule?o.default:o)&&(o=[[e.i,o,""]]);var i={insert:"head",singleton:!1},a=(n(o,i),o.locals?o.locals:{});e.exports=a},function(e,t,i){"use strict";var r,n,o=function(){return void 0===r&&(r=Boolean(window&&document&&document.all&&!window.atob)),r},a=(n={},function(e){if(void 0===n[e]){var t=document.querySelector(e);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(e){t=null}n[e]=t}return n[e]}),b=[];function d(e){for(var t=-1,r=0;re.length)&&(t=e.length);for(var r=0,n=new Array(t);r\n \n \n ';var n=s("div",{classes:"".concat(a.styling.linkWrapper," ").concat(c[a.theme].linkWrapper),children:[t,r]}),o=s("div",{classes:"".concat(a.styling.wrapper," ").concat(c[a.theme].wrapper),children:[n,e]}),i=document.getElementById(a.ele);i.innerHTML="",i.appendChild(o),a.onCompleted({element:i,id:a.ele})}else console.error("[h-bar] no post data, unable to render")})},destroy:function(){try{return document.getElementById(this.ele).remove(),!0}catch(e){console.error("Unable to destroy the h-bar wrapper"),console.error(e)}return!1},dismissibleButton:function(){var t=this,e=s("button",{classes:"hb--mr-1 hb-flex hb-p-1 hb-rounded-md hover:hb-bg-gray-800 focus:hb-outline-none focus:hb-bg-gray-800"});return e.innerHTML='\n \n '),e.onclick=function(e){return e.preventDefault(),t.dismissFor&&localStorage&&localStorage.setItem("h-bar_dismiss_for",t.dismissFor.getTime()),t.destroy()},e},isDismissed:function(){if(localStorage){var e=localStorage.getItem("h-bar_dismiss_for");if(!e)return!1;if(e=e,(new Date).getTime()<=e)return!0}return!1},createSecondaryLinks:function(){var o=this;return this.secondaryLinks?this.secondaryLinks.map(function(e){var t=e.title,r=e.link,n=s("a",{classes:"".concat(o.styling.secondaryLink," ").concat(c[o.theme].secondaryLink)});return n.href=r,n.innerText=t,n},this):[]}};t.default=o}],o.c=n,o.d=function(e,t,r){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(o.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)o.d(r,n,function(e){return t[e]}.bind(null,n));return r},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=4).default;function o(e){if(n[e])return n[e].exports;var t=n[e]={i:e,l:!1,exports:{}};return r[e].call(t.exports,t,t.exports,o),t.l=!0,t.exports}var r,n}); \ No newline at end of file +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.hBar=t():e.hBar=t()}(window,function(){return n={},o.m=r=[function(e,t,r){var n=r(1),o=r(2);"string"==typeof(o=o.__esModule?o.default:o)&&(o=[[e.i,o,""]]);var i={insert:"head",singleton:!1},a=(n(o,i),o.locals?o.locals:{});e.exports=a},function(e,t,i){"use strict";var r,n,o=function(){return void 0===r&&(r=Boolean(window&&document&&document.all&&!window.atob)),r},a=(n={},function(e){if(void 0===n[e]){var t=document.querySelector(e);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(e){t=null}n[e]=t}return n[e]}),b=[];function d(e){for(var t=-1,r=0;re.length)&&(t=e.length);for(var r=0,n=new Array(t);r\n \n \n ';var n=h("div",{classes:"".concat(a.styling.linkWrapper," ").concat(s[a.theme].linkWrapper),children:[t,r]}),o=h("div",{classes:"".concat(a.styling.wrapper," ").concat(s[a.theme].wrapper),children:[n,e]}),i=document.getElementById(a.ele);i.innerHTML="",i.appendChild(o),a.onCompleted({element:i,id:a.ele})}else console.error("[h-bar] no post data, unable to render")})},destroy:function(){try{return document.getElementById(this.ele).remove(),!0}catch(e){console.error("Unable to destroy the h-bar wrapper"),console.error(e)}return!1},dismissibleButton:function(){var t=this,e=h("button",{classes:"hb--mr-2 hb-flex hb-p-1 hb-rounded-md hover:hb-text-white hover:hb-bg-gray-800 focus:hb-outline-none focus:hb-bg-gray-800"});return e.innerHTML='\n \n '),e.onclick=function(e){return e.preventDefault(),t.dismissFor&&localStorage&&localStorage.setItem("h-bar_dismiss_for",t.dismissFor.getTime()),t.destroy()},e},isDismissed:function(){if(localStorage){var e=localStorage.getItem("h-bar_dismiss_for");if(!e)return!1;if(e=e,(new Date).getTime()<=e)return!0}return!1},createSecondaryLinks:function(){var o=this;return this.secondaryLinks?this.secondaryLinks.map(function(e){var t=e.title,r=e.link,n=h("a",{classes:"".concat(o.styling.secondaryLink," ").concat(s[o.theme].secondaryLink)});return n.href=r,n.innerText=t,n},this):[]}};t.default=d}],o.c=n,o.d=function(e,t,r){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(o.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)o.d(r,n,function(e){return t[e]}.bind(null,n));return r},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=4).default;function o(e){if(n[e])return n[e].exports;var t=n[e]={i:e,l:!1,exports:{}};return r[e].call(t.exports,t,t.exports,o),t.l=!0,t.exports}var r,n}); \ No newline at end of file diff --git a/docs/example.html b/docs/example.html index 923aec0..8002942 100644 --- a/docs/example.html +++ b/docs/example.html @@ -106,8 +106,9 @@

Features

onCompleted: (e) => { console.log(e) }, - options: { - theme: 'gray', + theme: 'lightGray', + headers: { + "Authorization": "Bearer 12345", }, // dismissible: true, // dismissFor: new Date(dismissMillis), diff --git a/package.json b/package.json index ad436d5..8e23a60 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@reecem/h-bar", - "version": "1.0.1", + "version": "1.1.0", "description": "Lightweight Announcement Bar with Tailwindcss, extendable too", "main": "dist/hBar.js", "scripts": { diff --git a/src/index.js b/src/index.js index 8c6944a..f0fd865 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,7 @@ /** * h-bar announcement banner * - * @version 1.0.0 + * @version 1.1.0 * @author ReeceM */ import "./styles.css" @@ -14,7 +14,7 @@ const hBar = { /** * h-bar version number */ - version: "1.0.0", + version: "1.1.0", /** * Initialise the hBar package From 12088be750f14d242ec0876ff2688e781ed1f89f Mon Sep 17 00:00:00 2001 From: ReeceM Date: Fri, 15 May 2020 09:56:17 +0200 Subject: [PATCH 6/6] update changelog and readme --- CHANGELOG.md | 12 ++++++++++++ README.md | 22 ++++++---------------- 2 files changed, 18 insertions(+), 16 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a9fd3a8..379ce39 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,18 @@ All notable changes to `h-bar` will be documented in this file. +# 1.1.0 - 2020-05-15 + +***Changes*** + +- Only headers can be passed to the fetch function configs. + - only doing get requests basically. +- changed the names of the options values to not be so odd + +__FIX__ + +- the fetch options config cleared all defaults + # 1.0.1 - 2020-04-09 __FIX__ diff --git a/README.md b/README.md index 75b8eb9..49aba39 100644 --- a/README.md +++ b/README.md @@ -89,8 +89,8 @@ The initialization object currently has this structure and defaults: { url: "https://your.blog/api/....", onCompleted: "callback function", - postLink: "The link url, can be force and no need to fetch from API", - postTitle: "The link url, can be force and no need to fetch from API", + link: "The link url, can be force and no need to fetch from API", + title: "The link url, can be force and no need to fetch from API", secondaryLinks: [ { title: "Docs", @@ -99,20 +99,10 @@ The initialization object currently has this structure and defaults: ], parser: (data) => {/** Parser function */} dismissible: false, // dismissible banner flag - dismissFor: new Date('2020-03-30'), // would dismiss it till end of march 30th - options: { - theme: "gray", - secondaryLinks: [], - onCompleted: null, - fetchOptions: { - "method": "GET", - "mode": "cors", - "cache": "no-cache", - "headers": { - "Accept": "application/json" - }, - "redirect": "follow" - } + dismissFor: new Date('2020-03-30'), // would dismiss it till end of March 30th 2020 + theme: "gray", + headers: { + "Authorization": "Bearer {TOKEN}" }, customStyles: { wrapper: "hb-flex hb-w-full hd-flex-col md:hb-flex-row sm:hb-flex-row hb-text-sm hb-py-2 md:hb-px-20 hb-px-1 hb-items-center hb-justify-between",