index.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. (function() {
  2. var $frm = $('form'),
  3. $cmp = $('#cmp'),
  4. $cls = $('#cls'),
  5. $url = $('#url'),
  6. copyKey = navigator.userAgent.indexOf('Macintosh') >= 0 ? '⌘-C' : 'Ctrl-C',
  7. lastUrl;
  8. var $e = function(name) {
  9. return $(document.createElement(name));
  10. };
  11. var resize = function() {
  12. var rect = $frm.get(0).getBoundingClientRect();
  13. $frm.css('margin-top', window.innerHeight/3 - rect.height/2);
  14. };
  15. var nameFrom = function(uri) {
  16. var parts = uri.substring(1).split('/');
  17. return parts[1];
  18. };
  19. var load = function() {
  20. var name = nameFrom(location.pathname);
  21. $.ajax({
  22. url: '/api/url/' + name,
  23. dataType: 'json'
  24. }).always(function(data) {
  25. if (!data.ok) {
  26. showError(data.error);
  27. return;
  28. }
  29. var route = data.route,
  30. url = route && route.url || '';
  31. $url.val(url).focus();
  32. urlDidChange();
  33. });
  34. }
  35. var showLink = function(name) {
  36. var lnk = location.origin + '/' + name;
  37. $cmp.text('')
  38. .removeClass('fuck')
  39. .addClass('link');
  40. var a = $(document.createElement('a'))
  41. .attr('href', lnk)
  42. .text(lnk)
  43. .appendTo($cmp);
  44. var h = $(document.createElement('span'))
  45. .addClass('hnt')
  46. .text(copyKey)
  47. .appendTo($cmp);
  48. $cmp.css('transform', 'scaleY(1)');
  49. getSelection().setBaseAndExtent(a.get(0), 0, a.get(0), 1);
  50. };
  51. var showError = function(message) {
  52. $cmp.text('')
  53. .removeClass('link')
  54. .addClass('fuck');
  55. $e('span').text('ERROR: ' + message)
  56. .appendTo($cmp);
  57. $cmp.css('transform', 'scaleY(1)');
  58. };
  59. var hideDrawer = function() {
  60. $cmp.css('transform', 'scaleY(0)');
  61. };
  62. var urlDidChange = function() {
  63. var url = $url.val().trim();
  64. if (url == lastUrl) {
  65. return;
  66. }
  67. lastUrl = url;
  68. hideDrawer();
  69. if (url) {
  70. $cls.fadeIn(200);
  71. } else {
  72. $cls.fadeOut(200);
  73. }
  74. };
  75. $frm.on('submit', function(e) {
  76. e.preventDefault();
  77. var name = nameFrom(location.pathname),
  78. url = $url.val().trim();
  79. $.ajax({
  80. type: 'POST',
  81. url : '/api/url/' + name,
  82. data : JSON.stringify({ url : url }),
  83. dataType : 'json'
  84. }).always(function(data) {
  85. if (!data.ok) {
  86. showError(data.error);
  87. return;
  88. }
  89. var route = data.route;
  90. if (!route) {
  91. hideDrawer();
  92. return;
  93. }
  94. var url = route.url || '',
  95. name = route.name || '';
  96. if (url) {
  97. history.replaceState({}, null, '/edit/' + name);
  98. showLink(name);
  99. }
  100. });
  101. });
  102. $url.on('keydown', urlDidChange)
  103. .on('paste', urlDidChange)
  104. .on('change', urlDidChange);
  105. $cls.on('click', function(e) {
  106. $url.val('');
  107. $frm.submit();
  108. urlDidChange();
  109. });
  110. window.addEventListener('resize', resize);
  111. resize();
  112. urlDidChange();
  113. load();
  114. })();