diff --git a/public/assets/css/angular-tooltips.min.css b/public/assets/css/angular-tooltips.min.css new file mode 100644 index 0000000..59b6b93 --- /dev/null +++ b/public/assets/css/angular-tooltips.min.css @@ -0,0 +1,11 @@ +/* + * angular-tooltips + * 1.2.2 + * + * Angular.js tooltips module. + * http://720kb.github.io/angular-tooltips + * + * MIT license + * Tue Jun 20 2017 + */ +tooltip._bottom:not(._left):not(._right) tip tip-arrow,tooltip._top:not(._left):not(._right) tip tip-arrow{border-left:6px solid transparent;border-right:6px solid transparent;left:50%;margin-left:-6px;content:'';height:0}@-webkit-keyframes animate-tooltip{0%{opacity:0}50%{opacity:.5}60%{opacity:.8}70%{opacity:.9}90%{opacity:1}}@-moz-keyframes animate-tooltip{0%{opacity:0}50%{opacity:.5}60%{opacity:.8}70%{opacity:.9}90%{opacity:1}}@-ms-keyframes animate-tooltip{0%{opacity:0}50%{opacity:.5}60%{opacity:.8}70%{opacity:.9}90%{opacity:1}}@keyframes animate-tooltip{0%{opacity:0}50%{opacity:.5}60%{opacity:.8}70%{opacity:.9}90%{opacity:1}}._exradicated-tooltip{display:block;opacity:1;position:absolute;z-index:999}tooltip{display:inline-block;position:relative}tooltip._multiline{display:block}tooltip._slow._ready tip{animation:animate-tooltip .65s}tooltip._fast._ready tip{animation:animate-tooltip .15s}tooltip._steady._ready tip{animation:animate-tooltip .35s}tooltip tip{border-radius:3px;background:rgba(0,0,0,.85);color:#fff;display:none;line-height:normal;max-width:500px;min-width:100px;opacity:0;padding:8px 16px;position:absolute;text-align:center;width:auto;will-change:top,left,bottom,right}tooltip tip._hidden{display:block;visibility:hidden}tooltip.active:not(._force-hidden) tip{display:block;opacity:1;z-index:999}tooltip tip-tip{font-size:.95em}tooltip tip-tip._large{font-size:1.1em}tooltip tip-tip._small{font-size:.8em}tooltip._top:not(._left):not(._right) tip{left:50%;top:-9px;-webkit-transform:translateX(-50%) translateY(-100%);transform:translateX(-50%) translateY(-100%)}tooltip._top:not(._left):not(._right) tip tip-arrow{border-top:6px solid rgba(0,0,0,.85);position:absolute;top:100%;width:0}tooltip._bottom:not(._left):not(._right) tip{right:50%;top:100%;-webkit-transform:translateX(50%) translateY(9px);transform:translateX(50%) translateY(9px)}tooltip._bottom:not(._left):not(._right) tip tip-arrow{border-bottom:6px solid rgba(0,0,0,.85);bottom:100%;position:absolute;width:0}tooltip._right:not(._top):not(._bottom) tip{left:100%;top:50%;-webkit-transform:translateX(9px) translateY(-50%);transform:translateX(9px) translateY(-50%)}tooltip._right:not(._top):not(._bottom) tip tip-arrow{border-bottom:6px solid transparent;border-right:6px solid rgba(0,0,0,.85);border-top:6px solid transparent;content:'';height:0;margin-top:-6px;position:absolute;right:100%;top:50%;width:0}tooltip._left:not(._top):not(._bottom) tip{left:-9px;top:50%;-webkit-transform:translateX(-100%) translateY(-50%);transform:translateX(-100%) translateY(-50%)}tooltip._left:not(._top):not(._bottom) tip tip-arrow{border-bottom:6px solid transparent;border-left:6px solid rgba(0,0,0,.85);border-top:6px solid transparent;content:'';height:0;left:100%;margin-top:-6px;position:absolute;top:50%;width:0}tooltip._top._left tip tip-arrow,tooltip._top._right tip tip-arrow{border-top:6px solid rgba(0,0,0,.85);border-left:6px solid transparent;border-right:6px solid transparent;content:'';height:0;margin-left:-6px;position:absolute;width:0}tooltip._top._left tip{left:-9px;top:-9px;-webkit-transform:translateX(-100%) translateY(-100%);transform:translateX(-100%) translateY(-100%)}tooltip._top._left tip tip-arrow{left:90%;top:100%}tooltip._top._right tip{left:100%;top:-9px;-webkit-transform:translateX(9px) translateY(-100%);transform:translateX(9px) translateY(-100%)}tooltip._top._right tip tip-arrow{left:10%;top:100%}tooltip._bottom._left tip{left:-9px;top:100%;-webkit-transform:translateX(-100%) translateY(9px);transform:translateX(-100%) translateY(9px)}tooltip._bottom._left tip tip-arrow{border-bottom:6px solid rgba(0,0,0,.85);border-left:6px solid transparent;border-right:6px solid transparent;bottom:100%;content:'';height:0;left:90%;margin-left:-6px;position:absolute;width:0}tooltip._bottom._right tip{left:100%;top:100%;-webkit-transform:translateX(9px) translateY(9px);transform:translateX(9px) translateY(9px)}tooltip._bottom._right tip tip-arrow{border-bottom:6px solid rgba(0,0,0,.85);border-left:6px solid transparent;border-right:6px solid transparent;bottom:100%;content:'';height:0;left:10%;margin-left:-6px;position:absolute;width:0}tip-tip .close-button{cursor:pointer;float:right;left:8%;margin-top:-7%;padding:3px;position:relative} diff --git a/public/assets/css/app.css b/public/assets/css/app.css index 13bc783..87dcaf5 100644 --- a/public/assets/css/app.css +++ b/public/assets/css/app.css @@ -146,3 +146,12 @@ footer .crypto { color: #444; font-size: 0.6rem; } + +tooltip tip { + padding: 4px 12px; +} + +tooltip tip-tip { + line-height: 1.1; + display: block; +} diff --git a/public/assets/js/angular-tooltips.min.js b/public/assets/js/angular-tooltips.min.js new file mode 100644 index 0000000..1f340e0 --- /dev/null +++ b/public/assets/js/angular-tooltips.min.js @@ -0,0 +1,11 @@ +/* + * angular-tooltips + * 1.2.2 + * + * Angular.js tooltips module. + * http://720kb.github.io/angular-tooltips + * + * MIT license + * Tue Jun 20 2017 + */ +!function(t,o){"use strict";var e="tooltips",i=function(){var t,e=[],i=0,r=function(t){t-i>=15?(e.forEach(function(t){t()}),i=t):o.console.log("Skipped!")},l=function(){o.clearTimeout(t),t=o.setTimeout(function(){o.requestAnimationFrame(r)},500)},n=function(t){t&&e.push(t)};return{add:function(t){e.length||o.addEventListener("resize",l),n(t)},remove:function(){e.length||(o.clearTimeout(t),o.removeEventListener("resize",l))}}}(),r=function(t){var o={};return t.removeAttr(e),void 0!==t.attr("tooltip-template")&&(o["tooltip-template"]=t.attr("tooltip-template"),t.removeAttr("tooltip-template")),void 0!==t.attr("tooltip-template-url")&&(o["tooltip-template-url"]=t.attr("tooltip-template-url"),t.removeAttr("tooltip-template-url")),void 0!==t.attr("tooltip-template-url-cache")&&(o["tooltip-template-url-cache"]=t.attr("tooltip-template-url-cache"),t.removeAttr("tooltip-template-url-cache")),void 0!==t.attr("tooltip-controller")&&(o["tooltip-controller"]=t.attr("tooltip-controller"),t.removeAttr("tooltip-controller")),void 0!==t.attr("tooltip-side")&&(o["tooltip-side"]=t.attr("tooltip-side"),t.removeAttr("tooltip-side")),void 0!==t.attr("tooltip-show-trigger")&&(o["tooltip-show-trigger"]=t.attr("tooltip-show-trigger"),t.removeAttr("tooltip-show-trigger")),void 0!==t.attr("tooltip-hide-trigger")&&(o["tooltip-hide-trigger"]=t.attr("tooltip-hide-trigger"),t.removeAttr("tooltip-hide-trigger")),void 0!==t.attr("tooltip-smart")&&(o["tooltip-smart"]=t.attr("tooltip-smart"),t.removeAttr("tooltip-smart")),void 0!==t.attr("tooltip-class")&&(o["tooltip-class"]=t.attr("tooltip-class"),t.removeAttr("tooltip-class")),void 0!==t.attr("tooltip-show")&&(o["tooltip-show"]=t.attr("tooltip-show"),t.removeAttr("tooltip-show")),void 0!==t.attr("tooltip-close-button")&&(o["tooltip-close-button"]=t.attr("tooltip-close-button"),t.removeAttr("tooltip-close-button")),void 0!==t.attr("tooltip-size")&&(o["tooltip-size"]=t.attr("tooltip-size"),t.removeAttr("tooltip-size")),void 0!==t.attr("tooltip-speed")&&(o["tooltip-speed"]=t.attr("tooltip-speed"),t.removeAttr("tooltip-speed")),o},l=function(t){return o.getComputedStyle?o.getComputedStyle(t,""):t.currentStyle?t.currentStyle:void 0},n=function(e){for(var i,r,l=o.document.querySelectorAll("._exradicated-tooltip"),n=0,p=l.length;no.document.body.offsetHeight||e.left<0||e.left>o.document.body.offsetWidth||e.bottom<0||e.bottom>o.document.body.offsetHeight||e.right<0||e.right>o.document.body.offsetWidth)&&(t.css({top:"",left:"",bottom:"",right:""}),!0)}throw new Error("You must provide a position")},s=function(t){return t.split(" ").map(function(t){return"_"+t}).join(" ")},d=["_top","_top _left","_left","_bottom _left","_bottom","_bottom _right","_right","_top _right"],c=function(t,o,e){for(var i=d.indexOf(s(e)),r=d.length,l=0;l=d.length&&(i=0),o.removeClass("_top _left _bottom _right"),o.addClass(d[i])},u=function(){var t={side:"top",showTrigger:"mouseenter",hideTrigger:"mouseleave","class":"",smart:!1,closeButton:!1,size:"",speed:"steady",tooltipTemplateUrlCache:!1,show:null};return{configure:function(o){var e,i=Object.keys(t),r=0;if(o)for(;r1?w.addClass("_multiline"):w.removeClass("_multiline")},k=function(e){if(e&&!w.hasClass("active")&&e.stopImmediatePropagation(),E.addClass("_hidden"),b.tooltipSmart)switch(b.tooltipSide){case"top":case"left":case"bottom":case"right":case"top left":case"top right":case"bottom left":case"bottom right":c(E,w,b.tooltipSide);break;default:throw new Error("Position not supported")}if(b.tooltipAppendToBody){var i,r,n,a,s,d=l(P[0]),u=l(H[0]),m=l(E[0]),f=E[0].getBoundingClientRect(),g=t.copy(E),h=0,v=d.length,C=0,y=u.length,_=0,T=m.length,S={},$={},A={};for(E.removeClass("_hidden"),g.removeClass("_hidden"),g.data("_tooltip-parent",w),p(w);ht[0].clientHeight||t[0].scrollWidth>t[0].clientWidth)&&t.on("scroll",function(){var t=this;o&&u.cancel(o),o=u(function(){var o=n(w),e=w[0].getBoundingClientRect(),i=t.getBoundingClientRect();e.topi.bottom||e.lefti.right?p(w):o&&k(!0)})}),e&&e.length&&ft(e)},R=function(t){w.removeClass("_force-hidden"),P.empty(),P.append(x),P.append(t),u(function(){k()})},W=function(){P.empty(),w.addClass("_force-hidden")},Y=function(t){var o=h.get(t);return"undefined"!=typeof o?v.resolve(o):a.get(t).then(function(o){return h.put(t,o.data),o.data})},j=function(t){t?R(t):W()},q=function(t){t&&!b.tooltipTemplateUrlCache?Y(t).then(function(t){R(d(t)(g))})["catch"](function(t){e.error(t)}):W()},L=function(t){t&&b.tooltipTemplateUrl?Y(b.tooltipTemplateUrl).then(function(t){R(d(t)(g))})["catch"](function(t){e.error(t)}):W()},F=function(t){t&&(T&&w.removeClass(T),w.addClass(s(t)),T=t)},X=function(t){t&&(S&&w.off(S),w.on(t,k),S=t)},D=function(t){t&&($&&w.off($),w.on(t,I),$=t)},G=function(t){"true"===t?w.addClass("active"):w.removeClass("active")},J=function(t){t&&(_&&E.removeClass(_),E.addClass(t),_=t)},K=function(){"boolean"!=typeof b.tooltipSmart&&(b.tooltipSmart="true"===b.tooltipSmart)},M=function(t){var o="true"===t;o?(x.on("click",I),x.css("display","block")):(x.off("click"),x.css("display","none"))},N=function(o){if(o){var e,i=m(o,{$scope:g}),r=g.$new(!1,g),l=o.indexOf("as");l>=0?(e=o.substr(l+3),r[e]=i):t.extend(r,i),P.replaceWith(d(P)(r)),dt()}},Q=function(t){t&&(A&&P.removeClass("_"+A),P.addClass("_"+t),A=t)},Z=function(t){t&&(B&&w.removeClass("_"+B),w.addClass("_"+t),B=t)},tt=b.$observe("tooltipTemplate",j),ot=b.$observe("tooltipTemplateUrl",q),et=b.$observe("tooltipTemplateUrlCache",L),it=b.$observe("tooltipSide",F),rt=b.$observe("tooltipShowTrigger",X),lt=b.$observe("tooltipHideTrigger",D),nt=b.$observe("tooltipShow",G),pt=b.$observe("tooltipClass",J),at=b.$observe("tooltipSmart",K),st=b.$observe("tooltipCloseButton",M),dt=b.$observe("tooltipController",N),ct=b.$observe("tooltipSize",Q),ut=b.$observe("tooltipSpeed",Z),mt=g.$watch(V,U);x.addClass("close-button"),x.html("×"),E.addClass("_hidden"),P.append(x),P.append(b.tooltipTemplate),E.append(P),E.append(H),z.append(f),w.attr(y),w.addClass("tooltips"),w.append(z),w.append(E),C.after(w),b.tooltipAppendToBody&&(i.add(function(){O(w)}),O(w)),i.add(function(){U(),k()}),u(function(){k(),E.removeClass("_hidden"),w.addClass("_ready")}),g.$on("$destroy",function(){tt(),ot(),et(),it(),rt(),lt(),nt(),pt(),at(),st(),ct(),ut(),mt(),i.remove(),f.off(b.tooltipShowTrigger+" "+b.tooltipHideTrigger)})})};return{restrict:"A",transclude:"element",priority:1,terminal:!0,link:C}}];t.module("720kb.tooltips",[]).provider(e+"Conf",u).directive(e,m)}(angular,window); diff --git a/public/assets/js/app.js b/public/assets/js/app.js index 6650b12..45ba0d7 100644 --- a/public/assets/js/app.js +++ b/public/assets/js/app.js @@ -1,7 +1,7 @@ (function() { angular - .module('NginxConfigIoApp', ['ngclipboard']) + .module('NginxConfigIoApp', ['ngclipboard', '720kb.tooltips']) .controller('NginxConfigIoController', function NginxConfigIoController($scope, $location, $timeout) { /////////////////////// // PRIVATE VARIABLES // @@ -149,6 +149,12 @@ ////////// $scope.setDataFromHash(); }) + .config(['tooltipsConfProvider', function (tooltipsConfProvider) { + tooltipsConfProvider.configure({ + side: 'right', + size: 'small', + }); + }]) .directive('ngIncludeTabs', function () { return { require: 'ngInclude', diff --git a/public/index.html b/public/index.html index 654320f..2ef8b9c 100644 --- a/public/index.html +++ b/public/index.html @@ -6,7 +6,8 @@ - + + nginxconfig.io @@ -42,49 +43,49 @@
- +
- +
- +
- +
@@ -105,13 +106,13 @@
@@ -122,13 +123,13 @@
@@ -158,43 +159,43 @@
- +
- +
- +
- +
@@ -202,19 +203,19 @@
- +
- +
- +
- +
@@ -335,6 +336,7 @@ - + +