Gadget-ReferenceTooltips-ko.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. var isMobile = navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i);
  2. var drawer, origin, content;
  3. function showDrawer(id, name, orgId) {
  4. origin.attr("href", id);
  5. origin.attr("data-origin", orgId);
  6. origin.text(name);
  7. content.html($(id + " > .reference-text").html());
  8. drawer.addClass("visible");
  9. }
  10. function getSettings(key, type) {
  11. if ("localStorage" in window) {
  12. if (type === "boolean") {
  13. return (window.localStorage[key] === "true");
  14. } else {
  15. return window.localStorage[key];
  16. }
  17. } else {
  18. var value = "; " + document.cookie;
  19. var parts = value.split("; " + key + "=");
  20. if (parts.length == 2) {
  21. if (type === "boolean") {
  22. return (parts.pop().split(";").shift() === "true");
  23. } else {
  24. return parts.pop().split(";").shift();
  25. }
  26. }
  27. }
  28. }
  29. function setSettings(key, value) {
  30. if ("localStorage" in window) {
  31. window.localStorage[key] = value;
  32. } else {
  33. var now = new Date();
  34. var time = now.getTime();
  35. var expireTime = time + (10 * 365 * 24 * 24);
  36. now.setTime(expireTime);
  37. document.cookie = key + "=" + value + ";expires=" + now.toGMTString() +";path=/";
  38. }
  39. }
  40. function initSettings() {
  41. if (document.getElementById("reference-settings")) {
  42. $("#reference-settings").show();
  43. return;
  44. }
  45. var setbox = $("<form>").attr("id", "reference-settings").append(
  46. $("<div>").addClass("content").append(
  47. $("<label>").append(
  48. $("<input>").attr({"type": "checkbox", "name": "showRefOnHover", "checked": getSettings("showRefOnHover", "boolean")}),
  49. "No Click footnote."
  50. )
  51. ),
  52. $("<div>").addClass("foot").append(
  53. $("<input>").attr({"type": "button", "value": "Cancel"}).click(function() {
  54. $("#reference-settings").hide();
  55. }),
  56. $("<input>").addClass("save-settings").attr({"type": "submit", "value": "Save"})
  57. )
  58. ).submit(function(e) {
  59. e.preventDefault();
  60. setSettings("showRefOnHover", $(this).find("[name=showRefOnHover]").is(":checked"));
  61. location.reload();
  62. });
  63. $(document.body).append(setbox);
  64. }
  65. function showTooltip(elem) {
  66. showDrawer(elem.parentNode.getAttribute("href"), elem.textContent, elem.parentNode.parentNode.getAttribute("id"));
  67. drawer.show();
  68. drawer.css({ top: ($(elem).offset().top - drawer.outerHeight()), left: $(elem).offset().left });
  69. drawer.stop().animate({opacity: 1}, 100);
  70. }
  71. function hideTooltip() {
  72. drawer.removeClass("visible");
  73. drawer.animate({opacity: 0}, 100, function() { $(this).hide(); });
  74. }
  75. $(document).ready(function($) {
  76. if (getSettings("showRefOnHover") === undefined) {
  77. setSettings("showRefOnHover", true);
  78. }
  79. if (isMobile) {
  80. $(document.body).addClass("mode-drawer");
  81. } else {
  82. $(document.body).addClass("mode-tooltip");
  83. }
  84. /* create drawer */
  85. drawer = $("<div>").attr("id", "reference-drawer");
  86. origin = $("<a>").attr("id", "reference-origin").click(function() {
  87. $('html, body').animate({scrollTop: ($($(this).attr("href")).offset().top - 60)}, 400);
  88. });
  89. content = $("<span>").attr("id", "reference-drawer-text");
  90. var settingsIcon = $("<span>").addClass("settings-icon").click(function() {
  91. initSettings();
  92. });
  93. var closeDrawer = $("<span>").addClass("close-icon").click(function() {
  94. drawer.removeClass("visible");
  95. });
  96. drawer.append(settingsIcon);
  97. drawer.append(closeDrawer);
  98. drawer.append(origin);
  99. drawer.append(content);
  100. $(document.body).append(drawer);
  101. $(document).click(function(e) {
  102. if (!$(e.target).closest("#reference-drawer").length) {
  103. if (!isMobile) {
  104. hideTooltip();
  105. } else {
  106. drawer.removeClass("visible");
  107. }
  108. }
  109. }).scroll(function(e) {
  110. if ("ontouchstart" in window && isMobile) {
  111. drawer.removeClass("visible");
  112. }
  113. });
  114. $(".reference a").each(function() {
  115. var span = document.createElement("span");
  116. span.className = "reference-hooker";
  117. span.appendChild(this.childNodes[0]);
  118. this.appendChild(span);
  119. });
  120. if (getSettings("showRefOnHover", "boolean") && !isMobile) {
  121. drawer.hover(function(e) {
  122. showTooltip($("#" + origin.attr("data-origin") + " .reference-hooker").get(0));
  123. }, function(e) {
  124. hideTooltip();
  125. });
  126. $(".reference-hooker").hover(function(e) {
  127. showTooltip(this);
  128. }, function(e) {
  129. hideTooltip();
  130. });
  131. }
  132. $(".reference-hooker").click(function(e) {
  133. if (isMobile) {
  134. e.preventDefault();
  135. e.stopPropagation();
  136. showDrawer(this.parentNode.getAttribute("href"), this.textContent);
  137. drawer.addClass("visible");
  138. } else if (!getSettings("showRefOnHover", "boolean")) {
  139. e.preventDefault();
  140. e.stopPropagation();
  141. showTooltip(this);
  142. }
  143. });
  144. });
  145. /* 오리위키에서 가져옴 */