implement client-accessible js versioning & footer tooltip

Author: iliakan

.gitignore

@@ -24,6 +24,7 @@ Thumbs.db
 
 # generated content
 public.versions.json
+client/versions.json
 
 # NPM packages folder.
 node_modules/

assets/fonts/icons/icons.woff

@@ -0,0 +1,7 @@
+
+var showLinkType = require('./showLinkType');
+
+exports.init = function() {
+  showLinkType();
+};
+

client/footer/index.js

@@ -0,0 +1,35 @@
+var closest = require('client/dom/closest');
+
+module.exports = function() {
+
+  var tooltipSpan = null;
+  var shiftX = 8;
+  var shiftY = 10;
+
+  function updatePosition(event) {
+    tooltipSpan.style.left = Math.min(event.clientX + shiftX, window.innerWidth - tooltipSpan.offsetWidth) + 'px';
+    tooltipSpan.style.top = Math.min(event.clientY + shiftY, window.innerHeight - tooltipSpan.offsetHeight) + 'px';
+  }
+
+  document.addEventListener('mouseover', function(event) {
+    var link = closest(event.target, 'a');
+    if (!link) return;
+
+    tooltipSpan = document.createElement('span');
+    tooltipSpan.className = 'link__type';
+    tooltipSpan.setAttribute('data-url', link.getAttribute('href'));
+
+    document.body.appendChild(tooltipSpan);
+    updatePosition(event);
+
+    document.addEventListener('mousemove', updatePosition);
+  });
+
+  document.addEventListener('mouseout', function() {
+    if (!tooltipSpan) return;
+
+    document.removeEventListener('mousemove', updatePosition);
+    tooltipSpan.remove();
+    tooltipSpan = null;
+  });
+};

client/footer/showLinkType.js

@@ -6,5 +6,5 @@ exports.login = require('./login');
 exports.logout = require('./logout');
 exports.Modal = require('./modal');
 exports.fontTest = require('./fontTest');
-require('./sitetoolbar');
 
+require('./sitetoolbar');

client/head/index.js

@@ -1,11 +1,15 @@
+var versions = require('client/versions');
 
 // insert <script src="..."> into document
 //   --> does not block rendering
 //   --> keeps execution order
-module.exports = function(src) {
+module.exports = function(src, options) {
   var script = document.createElement('script');
+  if (versions[src]) {
+    src = src.replace('.js', '.v' + versions[src] + '.js');
+  }
   script.src = src;
-  script.async = false; // maintain the execution order
+  script.async = options.async || false; // maintain the execution order if async is not set
   document.head.appendChild(script);
   return script; // for onload handlers
 };

client/head/insertNonBlockingScript.js

@@ -1,23 +1,26 @@
 function Modal() {
   document.body.insertAdjacentHTML('beforeEnd', '<div class="modal"><div class="modal-dialog"></div></div>');
 
+  var self = this;
   this.elem = document.body.lastChild;
   this.contentElem = this.elem.lastChild;
 
-//  this.onClick = this.onClick.bind(this);
+  this.onClick = this.onClick.bind(this);
   this.onDocumentKeyDown = this.onDocumentKeyDown.bind(this);
 
-//  this.elem.addEventListener("click", this.onClick);
+  this.elem.addEventListener('click', this.onClick);
+
   document.addEventListener("keydown", this.onDocumentKeyDown);
 }
 
-/*
+
 Modal.prototype.onClick = function(event) {
-  if (event.target == this.elem) { // click on the outer element, outside of the window
+  if (event.target.classList.contains('close-button')) {
     this.remove();
   }
 };
-*/
+
+
 Modal.prototype.onDocumentKeyDown = function(event) {
   if (event.keyCode == 27) {
     event.preventDefault();

client/head/modal.js

@@ -44,7 +44,11 @@ gulp.task("nodemon", lazyRequireTask('./tasks/nodemon', {
   watch:  ["hmvc", "modules"]
 }));
 
-gulp.task("client:livereload", lazyRequireTask("./tasks/livereload", { watch: "public/{i,img,js,styles}/**/*.*" }));
+gulp.task("client:livereload", lazyRequireTask("./tasks/livereload", {
+  // watch files *.*, not directories, no need to reload for new/removed files,
+  // we're only interested in changes
+  watch: "public/{i,img,js,styles}/**/*.*"
+}));
 
 gulp.task('link-modules', lazyRequireTask('./tasks/linkModules', { src: ['client', 'modules/*', 'hmvc/*'] }));
 
@@ -65,6 +69,7 @@ gulp.task('watch', lazyRequireTask('./tasks/watch', {
     },
     {
       watch: ['client/**', 'hmvc/**/client/**'],
+      ignore: 'client/versions.json',
       task:  "client:browserify"
     },
     {
@@ -104,7 +109,9 @@ gulp.task('client:minify', lazyRequireTask('./tasks/minify', {
   root: './public'
 }));
 
-gulp.task("client:browserify:clean", lazyRequireTask('./tasks/browserifyClean', { dst: './public/js'}));
+gulp.task("client:browserify:clean", lazyRequireTask('./tasks/browserifyClean', {
+  dst: './public/js'
+}));
 
 gulp.task("client:browserify", ['client:browserify:clean'], lazyRequireTask('./tasks/browserify'));
 
@@ -118,7 +125,6 @@ gulp.task('build', function(callback) {
 });
 
 gulp.task('dev', function(callback) {
-//  runSequence('build', ["client:sync-resources", 'client:compile-css', 'client:browserify', 'client:sync-css-images', 'client:build-md5-list', 'nodemon', 'client:livereload'], callback);
   runSequence('build', ['nodemon', 'client:livereload', 'watch'], callback);
 });
 

gulpfile.js

@@ -7,23 +7,13 @@ <h2><a class="main__anchor" id="что-такое-javascript" href="#что-та
   Программы на этом языке называются <em>скриптами</em>. Они подключаются напрямую к HTML и, как только загружается
   страничка &mdash; тут же выполняются.</p>
 <p><a href="http://en.wikipedia.org/wiki/ECMAScript">ECMAScript</a>
-  <a href="mailto:me@example.com">намылить</a> <a target="_blank" href="habrahabr.ru">новая вкладка</a> <a
-      href="/play/ECMAScript">песочница</a> <a href="http://plnkr.co/edit/mafDHHQUVJy7jdhlSMTB?p=preview">песочница
-    plnkr.co</a> <a href="/files/file.doc">документ</a> <a href="/files/file.zip">архив</a> <a href="/files/file.xls">таблица</a>
-  <a href="/files/file.pdf">pdf-документ</a> <a href="http://developer.mozilla.org/topic">справка в MDN</a> <a
-      href="http://msdn.microsoft.com/topic">справка microsoft</a> <a href="http://www.w3.org/TR/HTML401">документация
-    w3c</a> <a href="http://es5.github.com">спецификация ECMA</a></p>
-<p><a class="plain" href="http://en.wikipedia.org/wiki/ECMAScript">ECMAScript</a>
-  <a class="plain" href="mailto:me@example.com">намылить</a> <a class="plain" target="_blank" href="habrahabr.ru">новая
-    вкладка</a> <a class="plain" href="/play/ECMAScript">песочница</a> <a class="plain"
-                                                                          href="http://plnkr.co/edit/mafDHHQUVJy7jdhlSMTB?p=preview">песочница
-    plnkr.co</a> <a class="plain" href="/files/file.doc">документ</a> <a class="plain" href="/files/file.zip">архив</a>
-  <a class="plain" href="/files/file.xls">таблица</a> <a class="plain" href="/files/file.pdf">pdf-документ</a> <a
-      class="plain" href="http://developer.mozilla.org/topic">справка в MDN</a> <a class="plain"
-                                                                                   href="http://msdn.microsoft.com/topic">справка
-    microsoft</a> <a class="plain" href="http://www.w3.org/TR/HTML401">документация w3c</a> <a class="plain"
-                                                                                               href="http://es5.github.com">спецификация
-    ECMA</a></p>
+  <a href="mailto:me@example.com">намылить</a> <a target="_blank" href="habrahabr.ru">новая вкладка</a> <a href="/play/ECMAScript">песочница</a> <a href="http://plnkr.co/edit/mafDHHQUVJy7jdhlSMTB?p=preview">песочница plnkr.co</a> <a href="/files/file.doc">документ</a> <a href="/files/file.zip">архив</a> <a href="/files/file.xls">таблица</a> <a href="/files/file.pdf">pdf-документ</a> <a href="http://developer.mozilla.org/topic">справка в MDN</a> <a href="http://msdn.microsoft.com/topic">справка microsoft</a> <a href="http://www.w3.org/TR/HTML401">документация w3c</a> <a href="http://es5.github.com">спецификация ECMA</a>
+  <!-- Чтобы показать тултип с типом ссылки в конец документа добавляем span с классом link__type,
+       в атрибут data-url копируем href ссылки. Абсолютное позиционирование у него уже задано,
+       достаточно указать left и top относительно документа. -->
+  <span class="link__type " data-url="/doc.doc"></span>
+  </p>
+<p><a class="plain" href="http://en.wikipedia.org/wiki/ECMAScript">ECMAScript</a> <a class="plain" href="mailto:me@example.com">намылить</a> <a class="plain" target="_blank" href="habrahabr.ru">новая вкладка</a> <a class="plain" href="/play/ECMAScript">песочница</a> <a class="plain" href="http://plnkr.co/edit/mafDHHQUVJy7jdhlSMTB?p=preview">песочница plnkr.co</a> <a class="plain" href="/files/file.doc">документ</a> <a class="plain" href="/files/file.zip">архив</a> <a class="plain" href="/files/file.xls">таблица</a> <a class="plain" href="/files/file.pdf">pdf-документ</a> <a class="plain" href="http://developer.mozilla.org/topic">справка в MDN</a> <a class="plain" href="http://msdn.microsoft.com/topic">справка microsoft</a> <a class="plain" href="http://www.w3.org/TR/HTML401">документация w3c</a> <a class="plain" href="http://es5.github.com">спецификация ECMA</a></p>
 <p><a class="wiki" href="#01">ECMAScript</a>
   <a class="mailto" href="#02">намылить</a> <a class="external" target="_blank" href="#03">новая вкладка</a> <a
       class="sandbox" href="#04">песочница</a> <a class="sandbox" href="#999">песочница plnkr.co</a> <a class="doc"

hmvc/markup/templates/pages/article.html

@@ -21,6 +21,7 @@
     "browserify-jade": "*",
     "bunyan": "*",
     "co": "*",
+    "crc": "^3.0.0",
     "escape-html": "*",
     "event-stream": "*",
     "fs-extra": "*",