Skip to content

Adding Click Trigger #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 15 commits into
base: master
Choose a base branch
from
Open

Adding Click Trigger #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
79aeeab
added onclick attrs to change hover mode
justingshreve Oct 20, 2015
3eee1a6
new dist files
justingshreve Oct 20, 2015
77fc7fc
got tests passing and new distribution
justingshreve Oct 20, 2015
55145ab
cleaned up trigger and added delay attribute
justingshreve Oct 20, 2015
90f708f
new build
justingshreve Oct 20, 2015
c133fa8
got rid of delay, bad idea :(
justingshreve Oct 20, 2015
be63e55
trying to scope triggerEvent
justingshreve Oct 20, 2015
e9e6ddd
new build
justingshreve Oct 20, 2015
d39dd29
moved onmouseout back to html
justingshreve Oct 20, 2015
eeba9a6
debugging
justingshreve Oct 20, 2015
8f5bdb5
testing events
justingshreve Oct 20, 2015
7813330
use show object
justingshreve Oct 20, 2015
1955542
case issue
justingshreve Oct 20, 2015
115bc21
another round
justingshreve Oct 20, 2015
c1e6326
variable fix
justingshreve Oct 20, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion demo/angular-hovercard.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* Angular hovercard directive.
* @version v1.0.3 - 2015-06-29
* @version v1.0.3 - 2015-10-20
* @link https://github.com/yaru22/angular-hovercard
* @author Brian Park <[email protected]>
* @license MIT License, http://www.opensource.org/licenses/MIT
Expand Down
27 changes: 24 additions & 3 deletions demo/angular-hovercard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* Angular hovercard directive.
* @version v1.0.3 - 2015-06-29
* @version v1.0.3 - 2015-10-20
* @link https://github.com/yaru22/angular-hovercard
* @author Brian Park <[email protected]>
* @license MIT License, http://www.opensource.org/licenses/MIT
Expand Down Expand Up @@ -58,14 +58,35 @@ angular.module('yaru22.hovercard', ['yaru22.hovercard.tmpls']).directive('hoverc
$scope.hoverCardStyle.left = '-1em';
$scope.hoverCardStyle.right = '';
}
} // if (placement)
}
// if (placement)
var triggerEvent = 'mouseenter';
if ($attrs.trigger) {
triggerEvent = $attrs.trigger;
}
var show = function () {
$scope.show.card = true;
if ($scope.onHoverIn) {
$scope.onHoverIn();
}
};
$scope.showMouse = function () {
if (triggerEvent === 'mouseenter') {
show();
}
};
$scope.showClick = function () {
if (triggerEvent === 'click') {
show();
}
};
} // link function
};
});
angular.module('yaru22.hovercard.tmpls', []).run([
'$templateCache',
function ($templateCache) {
'use strict';
$templateCache.put('template/angular-hovercard.tmpl', '<div class=angular-hovercard ng-mouseenter="showCard = true; onHoverIn()" ng-mouseleave="showCard = false; onHoverOut()"><label class=angular-hovercard-label ng-class="{ \'angular-hovercard-active\': showCard }" ng-style=hoverLabelStyle ng-transclude></label><div class=angular-hovercard-detail ng-class="{ \'angular-hovercard-active\': showCard }" ng-include=hoverTmplUrl ng-style=hoverCardStyle></div></div>');
$templateCache.put('template/angular-hovercard.tmpl', '<div class=angular-hovercard ng-click=showClick() ng-mouseenter=showMouse() ng-mouseleave="show.card = false; onHoverOut()"><label class=angular-hovercard-label ng-class="{ \'angular-hovercard-active\': show.card }" ng-style=hoverLabelStyle ng-transclude></label><div class=angular-hovercard-detail ng-class="{ \'angular-hovercard-active\': show.card }" ng-include=hoverTmplUrl ng-style=hoverCardStyle></div></div>');
}
]);
2 changes: 1 addition & 1 deletion dist/angular-hovercard.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* Angular hovercard directive.
* @version v1.0.3 - 2015-06-29
* @version v1.0.3 - 2015-10-20
* @link https://github.com/yaru22/angular-hovercard
* @author Brian Park <[email protected]>
* @license MIT License, http://www.opensource.org/licenses/MIT
Expand Down
27 changes: 24 additions & 3 deletions dist/angular-hovercard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* Angular hovercard directive.
* @version v1.0.3 - 2015-06-29
* @version v1.0.3 - 2015-10-20
* @link https://github.com/yaru22/angular-hovercard
* @author Brian Park <[email protected]>
* @license MIT License, http://www.opensource.org/licenses/MIT
Expand Down Expand Up @@ -58,14 +58,35 @@ angular.module('yaru22.hovercard', ['yaru22.hovercard.tmpls']).directive('hoverc
$scope.hoverCardStyle.left = '-1em';
$scope.hoverCardStyle.right = '';
}
} // if (placement)
}
// if (placement)
var triggerEvent = 'mouseenter';
if ($attrs.trigger) {
triggerEvent = $attrs.trigger;
}
var show = function () {
$scope.show.card = true;
if ($scope.onHoverIn) {
$scope.onHoverIn();
}
};
$scope.showMouse = function () {
if (triggerEvent === 'mouseenter') {
show();
}
};
$scope.showClick = function () {
if (triggerEvent === 'click') {
show();
}
};
} // link function
};
});
angular.module('yaru22.hovercard.tmpls', []).run([
'$templateCache',
function ($templateCache) {
'use strict';
$templateCache.put('template/angular-hovercard.tmpl', '<div class=angular-hovercard ng-mouseenter="showCard = true; onHoverIn()" ng-mouseleave="showCard = false; onHoverOut()"><label class=angular-hovercard-label ng-class="{ \'angular-hovercard-active\': showCard }" ng-style=hoverLabelStyle ng-transclude></label><div class=angular-hovercard-detail ng-class="{ \'angular-hovercard-active\': showCard }" ng-include=hoverTmplUrl ng-style=hoverCardStyle></div></div>');
$templateCache.put('template/angular-hovercard.tmpl', '<div class=angular-hovercard ng-click=showClick() ng-mouseenter=showMouse() ng-mouseleave="show.card = false; onHoverOut()"><label class=angular-hovercard-label ng-class="{ \'angular-hovercard-active\': show.card }" ng-style=hoverLabelStyle ng-transclude></label><div class=angular-hovercard-detail ng-class="{ \'angular-hovercard-active\': show.card }" ng-include=hoverTmplUrl ng-style=hoverCardStyle></div></div>');
}
]);
4 changes: 2 additions & 2 deletions dist/angular-hovercard.min.js
View file
Open in desktop

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

25 changes: 25 additions & 0 deletions src/angular-hovercard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,31 @@ angular.module('yaru22.hovercard', [
$scope.hoverCardStyle.right = '';
}
} // if (placement)

var triggerEvent = 'mouseenter';
if ($attrs.trigger) {
triggerEvent = $attrs.trigger;
}

var show = function() {
$scope.show.card = true;
if ($scope.onHoverIn) {
$scope.onHoverIn();
}
};

$scope.showMouse = function () {
if (triggerEvent === 'mouseenter') {
show();
}
};

$scope.showClick = function () {
if (triggerEvent === 'click') {
show();
}
};

} // link function
};
});
8 changes: 4 additions & 4 deletions template/angular-hovercard.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="angular-hovercard" ng-mouseenter="showCard = true; onHoverIn()" ng-mouseleave="showCard = false; onHoverOut()">
<label class="angular-hovercard-label" ng-class="{ 'angular-hovercard-active': showCard }" ng-style="hoverLabelStyle" ng-transclude></label>
<div class="angular-hovercard-detail" ng-class="{ 'angular-hovercard-active': showCard }" ng-include="hoverTmplUrl" ng-style="hoverCardStyle"></div>
</div>
<div class="angular-hovercard" ng-click="showClick()" ng-mouseenter="showMouse()" ng-mouseleave="show.card = false; onHoverOut()">
<label class="angular-hovercard-label" ng-class="{ 'angular-hovercard-active': show.card }" ng-style="hoverLabelStyle" ng-transclude></label>
<div class="angular-hovercard-detail" ng-class="{ 'angular-hovercard-active': show.card }" ng-include="hoverTmplUrl" ng-style="hoverCardStyle"></div>
</div>
4 changes: 2 additions & 2 deletions test/unit/hovercardSpec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,14 +27,14 @@ describe('hovercard', function() {


it('should create a label', inject(function() {
var label = elm.find('.angular-hovercard-label');
var label = angular.element(elm[0].querySelector('.angular-hovercard-label')); //elm.find('.angular-hovercard-label');

expect(label).to.have.length(1);
expect(label.eq(0).text().trim()).to.equal('Brian Park');
}));

it('should load template specified on hover-tmpl-url', inject(function() {
var detail = elm.find('.angular-hovercard-detail');
var detail = angular.element(elm[0].querySelector('.angular-hovercard-detail'));

expect(detail).to.have.length(1);
expect(detail.eq(0).text().trim()).to.equal('Hover card detail.');
Expand Down