use-cornify
Version:
🦄 Put unicorns and rainbows on any website on the Internet with a single React Hook!
452 lines (346 loc) • 14.5 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = require('react');
var useKonami = _interopDefault(require('react-use-konami'));
var Cornify = /*#__PURE__*/function () {
function Cornify(options) {
var _this = this;
if (options === void 0) {
options = {};
}
this.options = {};
this.count = 0;
this.magicalWords = ['Happy', 'Sparkly', 'Glittery', 'Fun', 'Magical', 'Lovely', 'Cute', 'Charming', 'Amazing', 'Wonderful'];
this.addKeyboardEvent = function (_e) {
return _this.add();
};
this.options = options; // Retrieve our click count from the cookie when we start up.
this.initCounter();
}
var _proto = Cornify.prototype;
_proto.start = function start() {
// Bind keydown event to add unicorns
this.bindEvents(); // Add cupcake button if addCupcakeButton option is true
if (this.options.addCupcakeButton) this.addCupcakeButton(); // Add a unicorn
this.add();
};
_proto.initCounter = function initCounter() {
this.count = parseInt(this.getCookie('cornify'));
if (isNaN(this.count)) {
this.count = 0;
}
};
_proto.bindEvents = function bindEvents() {
window.addEventListener('keydown', this.addKeyboardEvent);
};
_proto.removeEvents = function removeEvents() {
window.removeEventListener('keydown', this.addKeyboardEvent);
};
_proto.createUnicornContainer = function createUnicornContainer() {
var _this2 = this;
var div = document.createElement('div');
div.style.position = 'fixed';
div.className = '__cornify_unicorn';
div.style.zIndex = '143143';
div.style.outline = '0';
div.onclick = function () {
return _this2.add();
}; // Click for more magic.
return div;
};
_proto.showGrandUnicorn = function showGrandUnicorn(container) {
container.style.top = '50%';
container.style.left = '50%';
container.style.zIndex = '143143143';
};
_proto.randomizeUnicornPosition = function randomizeUnicornPosition(container) {
container.style.top = Math.round(Math.random() * 100) + "%";
container.style.left = Math.round(Math.random() * 100) + "%";
};
_proto.createUnicornImage = function createUnicornImage() {
var img = document.createElement('img');
img.style.opacity = '0'; // Add a nice hover wigggle.
img.style.transition = 'all .1s linear';
img.alt = 'A lovely unicorn or rainbow';
img.onload = function () {
img.style.opacity = '1';
}; // img.style.transition = 'all .1s linear'
return img;
};
_proto.onUnicornMouseOver = function onUnicornMouseOver(img) {
var size = 1 + Math.round(Math.random() * 10) / 100;
var angle = Math.round(Math.random() * 20 - 10);
var result = "rotate(" + angle + "deg) scale(" + size + "," + size + ")";
img.style.transform = result;
img.style.webkitTransform = result;
};
_proto.onUnicornMouseOut = function onUnicornMouseOut(img) {
var size = 0.9 + Math.round(Math.random() * 10) / 100;
var angle = Math.round(Math.random() * 6 - 3);
var result = "rotate(" + angle + "deg) scale(" + size + "," + size + ")";
img.style.transform = result;
img.style.webkitTransform = result;
};
_proto.add = function add() {
var _document,
_this3 = this;
// Track how often we cornified.
this.count += 1; // Prepare our lovely variables.
var cornify_url = 'https://www.cornify.com/';
var showGrandUnicorn = this.count === 15;
var transform = 'translate(-50%, -50%)'; // Create a container for our 'corn or 'bow.
var container = this.createUnicornContainer();
if (showGrandUnicorn) {
// Clicking 15 times summons the grand unicorn - which is centered on the screen.
this.showGrandUnicorn(container);
} else {
// Otherwise we randomize the position.
this.randomizeUnicornPosition(container);
transform += " rotate(" + Math.round(Math.random() * 10 - 5) + "deg)";
} // Create the image element.
var img = this.createUnicornImage(); // Used as a cache buster so the browser makes a new request every time instead of using the previous, cached one.
var currentTime = new Date();
var submitTime = currentTime.getTime();
if (showGrandUnicorn) {
// Caching doesn't matter for the Grand Unicorn.
submitTime = 0;
} // Construct our unicorn & rainbow request.
var url = cornify_url + "getacorn.php?r=" + submitTime + "&url=" + ((_document = document) == null ? void 0 : _document.location.href); // Add younicorns if requested.
if (this.options && (this.options.y || this.options.younicorns)) {
url += "&y=" + (this.options.y ? this.options.y : this.options.younicorns); // Flip horizontally at random.
if (Math.random() > 0.5 && transform.length > 0) {
transform += ' scaleX(-1)';
}
}
container.style.transform = transform;
container.style.webkitTransform = transform;
img.setAttribute('src', url);
container.onmouseover = function () {
return _this3.onUnicornMouseOver(img);
};
container.onmouseout = function () {
return _this3.onUnicornMouseOut(img);
}; // Append our container DIV to the page.
var body = document.getElementsByTagName('body')[0];
body.appendChild(container);
container.appendChild(img); // Hooray - now we have a sparkly unicorn (or rainbow) on the page. Another cornification well done. Congrats!
// When clicking more than 5 times:
// - add a custom stylesheet to make the page look awesome (when not already there)
// - add magical word when addMagicalWords option is true
if (this.count > 5) {
this.addCornifyCss();
if (this.options.addMagicalWords) this.addMagicalWords();
}
this.updateCount(); // Trigger an event on the document so anyone could listen to that... for whatever reason..
this.dispatchAddEvent();
};
_proto.dispatchAddEvent = function dispatchAddEvent() {
var event = new Event('cornify');
document.dispatchEvent(event);
};
_proto.createCountElement = function createCountElement(id) {
var p = document.createElement('p');
p.id = id;
p.style.position = 'fixed';
p.style.bottom = '5px';
p.style.left = '0px';
p.style.right = '0px';
p.style.zIndex = '1000000000';
p.style.color = '#ff00ff';
p.style.textAlign = 'center';
p.style.fontSize = '24px';
p.style.fontFamily = "'Comic Sans MS', 'Comic Sans', 'Marker Felt', serif"; // Only the best!
p.style.textTransform = 'uppercase';
return p;
} // Tracks how often we cornified.
;
_proto.updateCount = function updateCount() {
var id = '__this.count';
var p = document.getElementById(id);
if (p === null) {
p = this.createCountElement(id); // Append element to DOM
var body = document.getElementsByTagName('body')[0];
body.appendChild(p);
} // Set content of counter
if (this.count === 1) {
p.innerHTML = 'You cornified!';
} else {
p.innerHTML = "You cornified " + this.count + " times!";
} // Stores our count in a cookie for our next session.
this.setCookie('cornify', "" + this.count, 1000);
};
_proto.setCookie = function setCookie(name, value, days) {
if (typeof window === 'undefined') return;
var d = new Date();
d.setTime(d.getTime() + days * 24 * 60 * 60 * 1000);
var expires = "expires=" + d.toUTCString();
document.cookie = name + "=" + value + "; " + expires;
};
_proto.getCookie = function getCookie(cname) {
if (typeof window === 'undefined') return '';
var name = cname + "=";
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var c = cookies[i].trim();
if (c.indexOf(name) === 0) {
return c.substring(name.length, c.length);
}
}
return '';
} // Clicking the rainbow cupcake button makes all the unicorns
// disappear (should only be used in an emergency, since it's sad).
;
_proto.remove = function remove() {
// Remove all Unicorns
this.removeAllUnicorns(); // Remove our counter.
this.removeCounter(); // Remove the cupcake button.
this.removeCupcakeButton(); // Remove the css
this.removeCornifyCss(); // Remove all magical words
if (this.options.addMagicalWords) this.removeMagicalWords(); // remove event listeners
this.removeEvents();
};
_proto.removeAllUnicorns = function removeAllUnicorns() {
var unicorns = Array.from(document.querySelectorAll('.__cornify_unicorn'));
if (unicorns) {
unicorns.forEach(function (unicorn) {
var _unicorn$parentNode;
(_unicorn$parentNode = unicorn.parentNode) == null ? void 0 : _unicorn$parentNode.removeChild(unicorn);
});
}
};
_proto.removeCounter = function removeCounter() {
var counter = document.getElementById('__this.count');
if (counter && counter.parentNode) {
counter.parentNode.removeChild(counter);
}
};
_proto.removeCupcakeButton = function removeCupcakeButton() {
var cupcakeButton = document.getElementById('__cornify_cupcake_button');
if (cupcakeButton && cupcakeButton.parentNode) {
cupcakeButton.parentNode.removeChild(cupcakeButton);
}
};
_proto.addCornifyCss = function addCornifyCss() {
var cssExisting = document.getElementById('__cornify_css');
if (!cssExisting) {
var head = document.getElementsByTagName('head')[0];
var css = document.createElement('link');
css.id = '__cornify_css';
css.type = 'text/css';
css.rel = 'stylesheet';
css.href = 'https://www.cornify.com/css/cornify.css';
css.media = 'screen';
head.appendChild(css);
}
};
_proto.removeCornifyCss = function removeCornifyCss() {
var css = document.getElementById('__cornify_css');
if (css && css.parentNode) {
css.parentNode.removeChild(css);
}
};
_proto.getHeadings = function getHeadings() {
return Array.from(document.querySelectorAll('h1, h2, h3, h4, h5, h6'));
} // Adds happy words at the beginning of all headers on the page.
;
_proto.addMagicalWords = function addMagicalWords() {
var _this4 = this;
var headings = this.getHeadings();
headings.forEach(function (heading) {
heading.innerHTML = _this4.magicalWords[Math.floor(Math.random() * _this4.magicalWords.length)] + " " + heading.innerHTML;
});
} // Removes happy words at the beginning of all headers on the page.
;
_proto.removeMagicalWords = function removeMagicalWords() {
var _this5 = this;
var headings = this.getHeadings();
headings.forEach(function (heading) {
_this5.magicalWords.forEach(function (word) {
heading.innerHTML = heading.innerHTML.split(word).join('').trim();
});
});
};
_proto.createCupcakeButton = function createCupcakeButton(id) {
var _this6 = this;
var button = document.createElement('div');
button.id = id;
button.onclick = function () {
return _this6.remove();
};
button.style.position = 'fixed';
button.style.top = '10px';
button.style.right = '10px';
button.style.zIndex = '2147483640';
button.setAttribute('aria-label', 'Hide unicorns and rainbows');
return button;
};
_proto.createCupcakeImage = function createCupcakeImage() {
var image = document.createElement('img');
image.src = 'https://www.cornify.com/assets/cornify-cupcake-button.png';
image.alt = 'Cupcake button';
image.width = 50;
image.height = 50;
image.style.width = '50px !important';
image.style.height = '50px !important';
image.style.display = 'block !important';
image.style.cursor = 'pointer !important';
image.style.margin = '0 !important';
image.style.padding = '0 !important';
return image;
} // Add the rainbow cupcake button to the page.
;
_proto.addCupcakeButton = function addCupcakeButton() {
var id = '__cornify_cupcake_button';
var button = document.getElementById(id);
if (!button) {
button = this.createCupcakeButton(id);
var image = this.createCupcakeImage();
button.appendChild(image); // Append to Dom
var body = document.getElementsByTagName('body')[0];
body.appendChild(button);
}
};
return Cornify;
}();
/*
_______ ,-----. .-------. ,---. .--..-./`) ________ ____ __
/ __ \ .' .-, '. | _ _ \ | \ | |\ .-.')| | \ \ / /
| ,_/ \__) / ,-.| \ _ \ | ( ' ) | | , \ | |/ `-' \| .----' \ _. / '
,-./ ) ; \ '_ / | :|(_ o _) / | |\_ \| | `-'`"`| _|____ _( )_ .'
\ '_ '`) | _`,/ \ _/ || (_,_).' __ | _( )_\ | .---. |_( )_ | ___(_ o _)'
> (_) ) __: ( '\_/ \ ;| |\ \ | || (_ o _) | | | (_ o._)__|| |(_,_)'
( . .-'_/ )\ `"/ \ ) / | | \ `' /| (_,_)\ | | | |(_,_) | `-' /
`-'`-' / '. \_/``".' | | \ / | | | | | | | | \ /
`._____.' '-----' ''-' `'-' '--' '--' '---' '---' `-..-'
*/
var defaultKeys = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'];
var useCornify = function useCornify(_temp) {
var _ref = _temp === void 0 ? {} : _temp,
keys = _ref.keys,
_ref$addMagicalWords = _ref.addMagicalWords,
addMagicalWords = _ref$addMagicalWords === void 0 ? true : _ref$addMagicalWords,
_ref$addCupcakeButton = _ref.addCupcakeButton,
addCupcakeButton = _ref$addCupcakeButton === void 0 ? true : _ref$addCupcakeButton,
younicorns = _ref.younicorns;
var _React$useState = React.useState(keys || defaultKeys),
code = _React$useState[0];
var cornify = new Cornify({
younicorns: younicorns,
addMagicalWords: addMagicalWords,
addCupcakeButton: addCupcakeButton
});
var initCornify = React.useCallback(function () {
cornify.start();
}, [cornify]);
useKonami(initCornify, {
code: code
});
return {
remove: function remove() {
return cornify.remove();
}
};
};
exports.useCornify = useCornify;
//# sourceMappingURL=use-cornify.cjs.development.js.map