Publish HTML quickly. https://html.house
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.
 
 
 
 

258 rader
6.2 KiB

  1. /**
  2. * H.js
  3. *
  4. * Lightweight, extremely bare-bones library for manipulating the DOM and
  5. * saving some typing.
  6. */
  7. var Element = function(domElement) {
  8. this.el = domElement;
  9. };
  10. /**
  11. * Creates a toggle button that adds / removes the given class name from the
  12. * given element.
  13. *
  14. * @param {Element} $el - The element to modify.
  15. * @param {string} onClass - The class to add to the given element.
  16. * @param {function} onFunc - Additional actions when toggling on.
  17. * @param {function} offFunc - Additional actions when toggling off.
  18. */
  19. Element.prototype.createToggle = function($el, onClass, onFunc, offFunc) {
  20. this.on('click', function(e) {
  21. if ($el.el.className === '') {
  22. $el.el.className = onClass;
  23. onFunc(new Element(this), e);
  24. } else {
  25. $el.el.className = '';
  26. offFunc(new Element(this), e);
  27. }
  28. e.preventDefault();
  29. }, false);
  30. };
  31. Element.prototype.on = function(event, func) {
  32. events = event.split(' ');
  33. var el = this.el;
  34. if (el == null) {
  35. console.error("Error: element for event is null");
  36. return;
  37. }
  38. var addEvent = function(e) {
  39. if (el.addEventListener) {
  40. el.addEventListener(e, func, false);
  41. } else if (el.attachEvent) {
  42. el.attachEvent(e, func);
  43. }
  44. };
  45. if (events.length === 1) {
  46. addEvent(event);
  47. } else {
  48. for(var i=0; i<events.length; i++) {
  49. addEvent(events[i]);
  50. }
  51. }
  52. };
  53. Element.prototype.setClass = function(className) {
  54. if (this.el == null) {
  55. console.error("Error: element to set class on is null");
  56. return;
  57. }
  58. this.el.className = className;
  59. };
  60. Element.prototype.removeClass = function(className) {
  61. if (this.el == null) {
  62. console.error("Error: element to remove class on is null");
  63. return;
  64. }
  65. var regex = new RegExp(' ?' + className, 'g');
  66. this.el.className = this.el.className.replace(regex, '');
  67. };
  68. Element.prototype.text = function(text, className) {
  69. if (this.el == null) {
  70. console.error("Error: element for setting text is null");
  71. return;
  72. }
  73. if (this.el.innerText !== text) {
  74. this.el.innerText = text;
  75. if (typeof className !== 'undefined') {
  76. this.el.className = this.el.className + ' ' + className;
  77. }
  78. }
  79. };
  80. Element.prototype.insertAfter = function(newNode) {
  81. if (this.el == null) {
  82. console.error("Error: element for insertAfter is null");
  83. return;
  84. }
  85. this.el.parentNode.insertBefore(newNode, this.el.nextSibling);
  86. };
  87. Element.prototype.remove = function() {
  88. if (this.el == null) {
  89. console.error("Didn't remove element");
  90. return;
  91. }
  92. this.el.parentNode.removeChild(this.el);
  93. };
  94. Element.prototype.hide = function() {
  95. if (this.el == null) {
  96. console.error("Didn't hide element");
  97. return;
  98. }
  99. this.el.className += ' effect fade-out';
  100. };
  101. Element.prototype.show = function() {
  102. if (this.el == null) {
  103. console.error("Didn't show element");
  104. return;
  105. }
  106. this.el.className += ' effect';
  107. };
  108. var H = {
  109. getEl: function(elementId) {
  110. return new Element(document.getElementById(elementId));
  111. },
  112. save: function($el, key) {
  113. localStorage.setItem(key, $el.el.value);
  114. },
  115. load: function($el, key, onlyLoadPopulated) {
  116. var val = localStorage.getItem(key);
  117. if (onlyLoadPopulated && val == null) {
  118. // Do nothing
  119. return;
  120. }
  121. $el.el.value = val;
  122. },
  123. set: function(key, value) {
  124. localStorage.setItem(key, value);
  125. },
  126. get: function(key, defaultValue) {
  127. var val = localStorage.getItem(key);
  128. if (val == null) {
  129. val = defaultValue;
  130. }
  131. return val;
  132. },
  133. remove: function(key) {
  134. localStorage.removeItem(key);
  135. },
  136. exists: function(key) {
  137. return localStorage.getItem(key) !== null;
  138. },
  139. createPost: function(id, editToken, content, created) {
  140. var summaryLen = 200;
  141. var titleLen = 80;
  142. var getPostMeta = function(content) {
  143. var eol = content.indexOf("\n");
  144. if (content.indexOf("# ") === 0) {
  145. // Title is in the format:
  146. //
  147. // # Some title
  148. var summary = content.substring(eol).trim();
  149. if (summary.length > summaryLen) {
  150. summary = summary.substring(0, summaryLen) + "...";
  151. }
  152. return {
  153. title: content.substring("# ".length, eol),
  154. summary: summary,
  155. };
  156. }
  157. var blankLine = content.indexOf("\n\n");
  158. if (blankLine !== -1 && blankLine <= eol && blankLine <= titleLen) {
  159. // Title is in the format:
  160. //
  161. // Some title
  162. //
  163. // The body starts after that blank line above it.
  164. var summary = content.substring(blankLine).trim();
  165. if (summary.length > summaryLen) {
  166. summary = summary.substring(0, summaryLen) + "...";
  167. }
  168. return {
  169. title: content.substring(0, blankLine),
  170. summary: summary,
  171. };
  172. }
  173. // TODO: move this to the beginning
  174. var title = content.trim();
  175. var summary = "";
  176. if (title.length > titleLen) {
  177. // Content can't fit in the title, so figure out the summary
  178. summary = title;
  179. title = "";
  180. if (summary.length > summaryLen) {
  181. summary = summary.substring(0, summaryLen) + "...";
  182. }
  183. } else if (eol > 0) {
  184. summary = title.substring(eol+1);
  185. title = title.substring(0, eol);
  186. }
  187. return {
  188. title: title,
  189. summary: summary
  190. };
  191. };
  192. var post = getPostMeta(content);
  193. post.id = id;
  194. post.token = editToken;
  195. post.created = created ? new Date(created) : new Date();
  196. post.client = "Pad";
  197. return post;
  198. },
  199. getTitleStrict: function(content) {
  200. var eol = content.indexOf("\n");
  201. var title = "";
  202. var newContent = content;
  203. if (content.indexOf("# ") === 0) {
  204. // Title is in the format:
  205. // # Some title
  206. if (eol !== -1) {
  207. // First line should start with # and end with \n
  208. newContent = content.substring(eol).leftTrim();
  209. title = content.substring("# ".length, eol);
  210. }
  211. }
  212. return {
  213. title: title,
  214. content: newContent
  215. };
  216. },
  217. };
  218. var He = {
  219. create: function(name) {
  220. return document.createElement(name);
  221. },
  222. get: function(id) {
  223. return document.getElementById(id);
  224. },
  225. $: function(selector) {
  226. var els = document.querySelectorAll(selector);
  227. return els;
  228. },
  229. postJSON: function(url, params, callback) {
  230. var http = new XMLHttpRequest();
  231. http.open("POST", url, true);
  232. // Send the proper header information along with the request
  233. http.setRequestHeader("Content-type", "application/json");
  234. http.onreadystatechange = function() {
  235. if (http.readyState == 4) {
  236. callback(http.status, JSON.parse(http.responseText));
  237. }
  238. }
  239. http.send(JSON.stringify(params));
  240. },
  241. };
  242. String.prototype.leftTrim = function() {
  243. return this.replace(/^\s+/,"");
  244. };