docsify-likert
Version:
A docsify plugin for creating likert scales.
145 lines (144 loc) • 8.86 kB
JavaScript
/*!
* docsify-likert
* v1.0.0
* https://github.com/difranca/docsify-likert#readme
* (c) 2019-2020 difranca
* MIT license
*/
(function() {
"use strict";
function styleInject(css, ref) {
if (ref === void 0) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === "undefined") {
return;
}
var head = document.head || document.getElementsByTagName("head")[0];
var style = document.createElement("style");
style.type = "text/css";
if (insertAt === "top") {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css = ".likert{border-style:ridge;height:content;display:block;margin-top:75px;margin-left:auto;margin-right:auto;width:50%;border-radius:12px;background-color:var(--blockquote-background)}.likert-button{background-color:transparent;border:none;border-radius:50%;font-size:25px;transition:background-color 1s}.likert-button:hover{background-color:#fff}.likert-thanks{height:0;visibility:collapse;transition:1s}";
styleInject(css);
(function() {
var CONFIG = {
question: "How satisfied were you with this page information?",
img1: "https://github.githubassets.com/images/icons/emoji/tired_face.png",
img2: "https://github.githubassets.com/images/icons/emoji/sweat.png",
img3: "https://github.githubassets.com/images/icons/emoji/neutral_face.png",
img4: "https://github.githubassets.com/images/icons/emoji/smile.png",
img5: "https://github.githubassets.com/images/icons/emoji/heart_eyes.png",
val1: "1",
val2: "2",
val3: "3",
val4: "4",
val5: "5",
alt1: "Very Unsatisfied",
alt2: "Unsatisfied",
alt3: "Neutral",
alt4: "Satisfied",
alt5: "Very Satisfied",
message: "Thanks for your support!"
};
function mergeObjects(obj1, obj2) {
var level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
for (var property in obj2) {
try {
if (obj2[property].constructor === Object && level < 1) {
obj1[property] = mergeObjects(obj1[property], obj2[property], level + 1);
} else {
obj1[property] = obj2[property];
}
} catch (e) {
obj1[property] = obj2[property];
}
}
return obj1;
}
var install = function install(hook, vm) {
var options = mergeObjects(CONFIG, vm.config["likert"] || vm.config.likert);
var findSetting = function findLikertSetting(input, key, fallback, callback) {
var match = (input || "").match(new RegExp("".concat(key, ":(([\\s\\w\\u00A0-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFEF-]*))")));
if (!match) {
return callback ? callback(fallback) : fallback;
}
return callback ? callback(match[1]) : match[1];
};
hook.afterEach(function(html, next) {
var modHtml = html.replace(/<!--\s*LIKERT\s*-->/g, function(match, key, settings, value) {
if (!options) {
return match;
}
var question = findSetting(settings, "question", options.question);
var img1 = findSetting(settings, "img1", options.img1);
var img2 = findSetting(settings, "img2", options.img2);
var img3 = findSetting(settings, "img3", options.img3);
var img4 = findSetting(settings, "img4", options.img4);
var img5 = findSetting(settings, "img5", options.img5);
var val1 = findSetting(settings, "val1", options.val1);
var val2 = findSetting(settings, "val2", options.val2);
var val3 = findSetting(settings, "val3", options.val3);
var val4 = findSetting(settings, "val4", options.val4);
var val5 = findSetting(settings, "val5", options.val5);
var alt1 = findSetting(settings, "alt1", options.alt1);
var alt2 = findSetting(settings, "alt2", options.alt2);
var alt3 = findSetting(settings, "alt3", options.alt3);
var alt4 = findSetting(settings, "alt4", options.alt4);
var alt5 = findSetting(settings, "alt5", options.alt5);
var message = findSetting(settings, "message", options.message);
var likertDiv = "\n <div id='likert' class='likert'>\n <p align='center' class='likert-question'>".concat(question, "</p>\n <p>\n <div id='likert-buttons' align='center'>\n <button onclick='likertClick(").concat(val1, ")' class='likert-button'>\n <img class='emoji' src='").concat(img1, "' alt='").concat(alt1, "'>\n </button>\n <button onclick='likertClick(").concat(val2, ")' class='likert-button'>\n <img class='emoji' src='").concat(img2, "' alt='").concat(alt2, "'>\n </button>\n <button onclick='likertClick(").concat(val3, ")' class='likert-button'>\n <img class='emoji' src='").concat(img3, "' alt='").concat(alt3, "'>\n </button>\n <button onclick='likertClick(").concat(val4, ")' class='likert-button'>\n <img class='emoji' src='").concat(img4, "' alt='").concat(alt4, "'>\n </button>\n <button onclick='likertClick(").concat(val5, ")' class='likert-button'>\n <img class='emoji' src='").concat(img5, "' alt='").concat(alt5, "'>\n </button>\n </div>\n <div id='likert-thanks' align='center' class='likert-thanks'>\n <span>").concat(message, "</span>\n </div>\n </p>\n </div>\n ");
return likertDiv;
});
next(modHtml);
});
hook.doneEach(function() {
var likertBtns = document.getElementsByClassName("likert-button");
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = likertBtns[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var item = _step.value;
item.addEventListener("click", function() {
var likertButtons = document.getElementById("likert-buttons");
var likertThanks = document.getElementById("likert-thanks");
likertButtons.style.visibility = "collapse";
likertButtons.style.height = "0px";
likertThanks.style.visibility = "visible";
likertThanks.style.height = "100%";
});
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return != null) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
});
};
window.$docsify = window.$docsify || {};
window.$docsify.plugins = [].concat(install, window.$docsify.plugins);
})();
})();
//# sourceMappingURL=docsify-likert.js.map