index.js 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. (function() {
  2. var $frm = $('form'),
  3. $cmp = $('#cmp'),
  4. $cls = $('#cls'),
  5. $url = $('#url'),
  6. lastUrl;
  7. var resize = function() {
  8. var rect = $frm.get(0).getBoundingClientRect();
  9. $frm.css('margin-top', window.innerHeight/3 - rect.height/2);
  10. };
  11. var nameFrom = function(uri) {
  12. var parts = uri.substring(1).split('/');
  13. return parts[1];
  14. };
  15. var load = function() {
  16. var name = nameFrom(location.pathname);
  17. $.ajax({
  18. url: '/api/url/' + name,
  19. dataType: 'json'
  20. }).always(function(data) {
  21. if (!data.ok) {
  22. // TODO(knorton): Error
  23. return;
  24. }
  25. var route = data.route,
  26. url = route && route.url || '';
  27. $url.val(url).focus();
  28. urlDidChange();
  29. });
  30. }
  31. var showLink = function(name) {
  32. var lnk = location.origin + '/' + name;
  33. $cmp.find('a').remove();
  34. var a = $(document.createElement('a'))
  35. .attr('href', lnk)
  36. .text(lnk)
  37. .appendTo($cmp.text(''));
  38. $cmp.css('transform', 'scaleY(1)');
  39. getSelection().setBaseAndExtent(a.get(0), 0, a.get(0), 1);
  40. };
  41. var hideLink = function() {
  42. $cmp.css('transform', 'scaleY(0)');
  43. };
  44. var urlDidChange = function() {
  45. var url = $url.val().trim();
  46. if (url == lastUrl) {
  47. return;
  48. }
  49. lastUrl = url;
  50. if (url) {
  51. $cls.fadeIn(200);
  52. } else {
  53. $cls.fadeOut(200);
  54. }
  55. };
  56. $frm.on('submit', function(e) {
  57. e.preventDefault();
  58. var name = nameFrom(location.pathname),
  59. url = $url.val().trim();
  60. $.ajax({
  61. type: 'POST',
  62. url : '/api/url/' + name,
  63. data : JSON.stringify({ url : url }),
  64. dataType : 'json'
  65. }).always(function(data) {
  66. if (!data.ok) {
  67. hideLink();
  68. return;
  69. }
  70. var route = data.route;
  71. if (!route) {
  72. hideLink();
  73. return;
  74. }
  75. var url = route.url || '',
  76. name = route.name || '';
  77. if (url) {
  78. history.replaceState({}, null, '/edit/' + name);
  79. showLink(name);
  80. }
  81. });
  82. });
  83. $url.on('keydown', urlDidChange)
  84. .on('paste', urlDidChange)
  85. .on('change', urlDidChange);
  86. $cls.on('click', function(e) {
  87. $url.val('');
  88. $frm.submit();
  89. urlDidChange();
  90. });
  91. window.addEventListener('resize', resize);
  92. resize();
  93. urlDidChange();
  94. load();
  95. })();