Skip to content

Commit

Permalink
lazyload template, fixed animation positioning. much more stable in s…
Browse files Browse the repository at this point in the history 
…ome cases
  • Loading branch information
itburnz committed Jul 15, 2014
1 parent 4aed027 commit f9e7357
Show file tree
Hide file tree
Showing 9 changed files with 277 additions and 64 deletions.
8 changes: 5 additions & 3 deletions bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
{
"name": "angular-tether",
"version": "0.1.4",
"version": "0.1.5",
"main": "./dist/angular-tether.js",
"repository": {
"type": "git",
"url": "git://github.com/nissoh/angular-tether.git"
},
"dependencies": {
"angular": "~1.2.18",
"angular": "~1.2",
"tether": "~0.6.5",
"angular-animate": "~1.2.18",
"angular-animate": "~1.2.18"
},
"devDependencies": {
"angular-ui-ace": "~0.1.1"
},
"ignore": [
Expand Down
60 changes: 38 additions & 22 deletions dist/angular-tether.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/*! angular-tether - v0.1.4 - 2014-07-09 */(function (root, factory) {if (typeof define === "function" && define.amd) {define(["tether"], factory);} else if (typeof exports === "object") {module.exports = factory(require("tether"));} else {root.test = factory(root.Tether)};}(this, function(Tether) { angular.module('ngTetherPopover', ['ngTether']).directive('tetherPopover', [
/*! angular-tether - v0.1.5 - 2014-07-15 */(function (root, factory) {if (typeof define === "function" && define.amd) {define(["tether"], factory);} else if (typeof exports === "object") {module.exports = factory(require("tether"));} else {root.test = factory(root.Tether)};}(this, function(Tether) { angular.module('ngTetherPopover', ['ngTether']).directive('tetherPopover', [
'Tether',
'$parse',
'Utils',
Expand All @@ -9,7 +9,7 @@
tetherPopover: '=',
config: '='
},
link: function (scope, elem, attrs) {
link: function postLink(scope, elem, attrs) {
scope.tetherPopover = new Tether(Utils.extendDeep({
parentScope: scope.$parent,
leaveOnBlur: true,
Expand Down Expand Up @@ -46,7 +46,7 @@ angular.module('ngTetherTooltip', ['ngTether']).directive('tetherTooltip', [
content: '@tetherTooltip',
config: '=config'
},
link: function (scope, elem, attrs) {
link: function postLink(scope, elem, attrs) {
var tooltip = new Tether(Utils.extendDeep({
template: '<div class="tooltip fade-anim">{{ content }}</div>',
parentScope: scope,
Expand Down Expand Up @@ -92,14 +92,15 @@ angular.module('ngTether', []).factory('Utils', [
]).factory('Tether', [
'$compile',
'$rootScope',
'$log',
'$window',
'$animate',
'$controller',
'$timeout',
'$q',
'$http',
'$templateCache',
function ($compile, $rootScope, $window, $animate, $controller, $timeout, $q, $http, $templateCache) {
function ($compile, $rootScope, $log, $window, $animate, $controller, $timeout, $q, $http, $templateCache) {
return function (config) {
'use strict';
if (!(!config.template ^ !config.templateUrl)) {
Expand All @@ -111,20 +112,20 @@ angular.module('ngTether', []).factory('Utils', [
function attachTether() {
tether = new Tether(extend({ element: element[0] }, config.tether));
}
if (config.template) {
var deferred = $q.defer();
deferred.resolve($templateCache.get(config.template) || config.template);
html = deferred.promise;
} else {
html = $http.get(config.templateUrl, { cache: $templateCache }).then(function (response) {
return response.data;
});
function templateDfd() {
var template = config.template ? $templateCache.get(config.template) || config.template : $http.get(config.templateUrl, { cache: $templateCache }).then(function (resp) {
return resp.data;
});
return $q.when(template);
}
function create(html, locals) {
element = angular.element(html.trim());
scope = parentScope.$new();
// assign locals being passed on enter method.
if (locals) {
scope.$locals = locals;
for (var prop in locals) {
scope[prop] = locals[prop];
}
}
if (config.controller) {
var ctrl = $controller(controller, { $scope: scope });
Expand All @@ -133,20 +134,25 @@ angular.module('ngTether', []).factory('Utils', [
scope[controllerAs] = ctrl;
}
$compile(element)(scope);
scope.$on('$destroy', leave);
scope.$on('$destroy', destroy);
// Hack. html is being compiled asynchronously the dimensions of the element
// would most likley have a different dimensions after compilation
$timeout(function () {
if (!element)
return;
$animate.enter(element, bodyEl);
attachTether();
tether.position();
if (config.leaveOnBlur) {
bodyEl.on('click', leaveOnBlur);
bodyEl.on('click touchend', leaveOnBlur);
}
});
}, 15);
}
function leaveOnBlur(evt) {
var target = evt.target;
if (!element || target === element[0])
if (!element || target === element[0]) {
return;
}
while (target.parentElement !== null) {
if (target.parentElement == element[0]) {
return;
Expand All @@ -157,28 +163,38 @@ angular.module('ngTether', []).factory('Utils', [
}
// Attach tether and add it to the dom
function enter(locals) {
html.then(function (html) {
if (element) {
return $log.debug('Tethered instance is already active; now toggling');
}
templateDfd().then(function (html) {
create(html, locals);
});
}
// Detach the tether and remove it from the dom
function leave() {
if (config.leaveOnBlur) {
bodyEl.off('click touchend', leaveOnBlur);
}
if (!isActive()) {
if (element) {
element = null;
}
return false;
}
if (config.leaveOnBlur) {
bodyEl.off('click', leaveOnBlur);
}
tether.destroy();
$timeout(function () {
element && $animate.leave(element, function () {
element = null;
destroy();
});
});
}
function destroy() {
if (!element) {
return;
}
element.remove();
element = null;
}
function position() {
if (element) {
$animate.move(element, bodyEl);
Expand Down
2 changes: 1 addition & 1 deletion dist/angular-tether.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

117 changes: 109 additions & 8 deletions examples/styles/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -632,11 +632,11 @@ blockquote {
display: inline-block; }

.field {
display: inline-block;
display: block;
color: #5d5d5d;
vertical-align: middle;
padding-left: 0.5em;
padding-right: 0.5em; }
padding-left: 1em;
padding-right: 1em; }

[contenteditable] {
display: block; }
Expand Down Expand Up @@ -1266,6 +1266,8 @@ blockquote {
padding-right: 1em;
padding-left: 1em;
background-color: transparent; }
.btn-ghost:focus {
outline: 0; }



Expand All @@ -1284,6 +1286,110 @@ blockquote {



body {
margin: 0;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
line-height: 1.3;
font-weight: 300;
color: #777777;
min-height: 100%;
overflow-x: hidden;
overflow-y: scroll; }

a {
color: #208bf4;
text-decoration: none; }
a:hover {
color: #0fbcf1;
text-decoration: none; }

p a:hover {
color: #0fbcf1;
text-decoration: underline; }

::-webkit-scrollbar {
border: 1px solid #E6E6E6;
width: 8px;
height: 8px;
padding: 0 2px;
background-color: #F1F1F1; }

::-webkit-scrollbar-track {
padding: 10px;
border-radius: 10px; }

::-webkit-scrollbar-thumb {
background-color: rgba(146, 146, 146, 0.8); }
::-webkit-scrollbar-thumb:hover {
background-color: rgba(82, 82, 82, 0.8); }

html {
height: 100% !important; }

.modal-wrapper {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
zoom: 1;
padding: 10px;
background: rgba(255, 255, 255, 0.85);
overflow-y: auto;
-webkit-backface-visibility: hidden; }
.modal-wrapper + .modal-wrapper {
z-index: 1010; }
.modal-wrapper + .modal-wrapper + .modal-wrapper {
z-index: 1020; }
.modal-wrapper + .modal-wrapper + .modal-wrapper + .modal-wrapper {
z-index: 1030; }
.modal-wrapper.animate .modal-container {
-webkit-animation: slideUp 0.35s ease-in forwards;
-moz-animation: slideUp 0.35s ease-in forwards;
animation: slideUp 0.35s ease-in forwards; }
.modal-wrapper .cc .ccc {
max-width: 100%; }

.modal-container {
position: relative;
outline: none;
background-color: #ffffff;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
min-width: 250px;
box-shadow: 0px 0px 0px 1px lightgrey; }

.modal-header {
padding: 3px 13px;
background-color: #e3e3e3;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#dcdcdc), to(#e3e3e3));
background-image: -webkit-linear-gradient(top, #dcdcdc, #e3e3e3);
background-image: -moz-linear-gradient(top, #dcdcdc, #e3e3e3);
background-image: linear-gradient(to bottom, #dcdcdc, #e3e3e3);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFDCDCDC', endColorstr='#FFE3E3E3', GradientType=0);
background-color: #E2E2E2; }
.modal-header h3 {
margin: 0;
line-height: 30px; }

.modal-body {
padding: 15px;
position: relative; }

.modal-footer {
position: relative;
padding: 13px 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 0;
text-align: right;
border-top: 1px solid #d1d1d1; }

body {
margin: 0;
font-family: 'Open Sans', sans-serif;
Expand Down Expand Up @@ -1472,9 +1578,6 @@ html {
padding-left: 50px; }

.btn-ghost {
line-height: 26px;
padding-right: 1em;
padding-left: 1em;
color: #888888;
background-color: #DCDCDC;
box-shadow: 0px -1px 0 0 rgba(255, 255, 255, 0.5), 0px -1px 0 0 rgba(0, 0, 0, 0.1) inset;
Expand All @@ -1492,8 +1595,6 @@ html {
cursor: default; }
.btn-ghost.active {
background-color: #d1d1d1; }
.btn-ghost:focus {
outline: 0; }

.field {
padding-top: 5px;
Expand Down
2 changes: 1 addition & 1 deletion src/angular-tether-popover.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ angular.module('ngTetherPopover', ['ngTether'])
tetherPopover: '=',
config: '='
},
link: function (scope, elem, attrs) {
link: function postLink(scope, elem, attrs) {

scope.tetherPopover = new Tether(Utils.extendDeep({
parentScope: scope.$parent,
Expand Down
2 changes: 1 addition & 1 deletion src/angular-tether-tooltip.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ angular.module('ngTetherTooltip', ['ngTether'])
content: '@tetherTooltip',
config: '=config'
},
link: function (scope, elem, attrs) {
link: function postLink(scope, elem, attrs) {

var tooltip = new Tether(Utils.extendDeep({
template: '<div class="tooltip fade-anim">{{ content }}</div>',
Expand Down
Loading

0 comments on commit f9e7357

Please sign in to comment.