Skip to content

Commit a353050

Browse files
souly1souly1
committed
Merge branch 'pr-37' into pr-39
* pr-37: Focus element positioning fix for elements inside ng-include * added fix for `hasGlow` in original pull request * updated all tests to work with focus-element-selector instead of focus-element-id * deprecated focus-element-if * added log events when no element fits selector and when multiple elements returned for selector
2 parents 7cac8ac + 288a949 commit a353050

6 files changed

+54
-33
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ and use one of the two configurations:
122122

123123
- `is-active` (mandatory) - Any walkthrough type. Bound element controls display the directive. Set 'true' to bound element in order to display.
124124
- `walkthrough-type` (mandatory) - Any walkthrough type. Specifies what type of walkthrough to display. Currently supported are 'transparency' and 'tip' types
125-
- `focus-element-id` (optional) - Any walkthrough type. ID of DOM element we want to give focus to, without it all screen will be grayed out
125+
- `focus-element-selector` (optional) - Any walkthrough type. CSS selector of DOM element we want to give focus to, without it all screen will be grayed out. Throws warning if multiple elements return as results and displays first as selected
126126
- `is-round` (optional) - Any walkthrough type. Set to 'true' if you want the focused area to be round, otherwise it will be square set to the size of the DOM element
127127
- `has-glow` (optional) - Any walkthrough type. Set to 'true' if you want the focused area to have a glow around it
128128
- `icon` (optional) - Any walkthrough type. If set to any of the predefined values ("single_tap", "double_tap", "swipe_down", "swipe_left", "swipe_right", "swipe_up"), in such case the icon will be bound to focus element (if exists), make sure to add 'ng-walkthrough.tap_icons.js' following instructions above. any other icon can be used and will be loaded from supplied folder

‎bower.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ng-walkthrough",
3-
"version": "0.4.2",
3+
"version": "0.4.3",
44
"homepage": "https://github.com/souly1/ng-walkthrough",
55
"authors": [
66
"Ophir Stern <souly01@gmail.com>"

‎ng-walkthrough.js

+40-19
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,9 @@ angular.module('ng-walkthrough', [])
4848
'</div>',
4949
'</div>',
5050
'<!-- Always show as this gives us the gray background -->',
51-
'<div ng-show="walkthroughType==\'transparency\' || focusElementId" class="walkthrough-hole" ng-class="{\'walkthrough-hole-round\': isRound}">',
51+
'<div ng-show="walkthroughType==\'transparency\' || focusElementId || focusElementSelector" class="walkthrough-hole" ng-class="{\'walkthrough-hole-round\': isRound}">',
5252
'</div>',
53-
'<div ng-show="hasGlow && focusElementId" class="walkthrough-hole walkthrough-hole-glow" ng-class="{\'walkthrough-hole-round\': isRound}">',
53+
'<div ng-show="hasGlow && (focusElementId || focusElementSelector)" class="walkthrough-hole walkthrough-hole-glow" ng-class="{\'walkthrough-hole-round\': isRound}">',
5454
'</div>',
5555
'</div>'
5656
].join('');
@@ -62,22 +62,25 @@ angular.module('ng-walkthrough', [])
6262
walkthroughType: '@',
6363
isActive: '=',
6464
icon: '@',
65-
focusElementId: '@',
66-
focusElementSelector: '@',
67-
mainCaption: '@',
68-
forceCaptionLocation: '@',
69-
isRound: '=',
70-
hasGlow: '=',
71-
useButton: '=',
72-
iconPaddingLeft: '@',
73-
iconPaddingTop: '@',
65+
/**
66+
* @deprecated Since version 0.4.3. Will be deleted in next versions. Use property focusElementSelector instead.
67+
*/
68+
focusElementId: '@?',
69+
focusElementSelector: '@?',
70+
mainCaption: '@?',
71+
forceCaptionLocation: '@?',
72+
isRound: '=?',
73+
hasGlow: '=?',
74+
useButton: '=?',
75+
iconPaddingLeft: '@?',
76+
iconPaddingTop: '@?',
7477
/**
7578
* @deprecated Since version 0.3.1. Will be deleted in next versions. Use property forceCaptionLocation instead.
7679
*/
77-
tipLocation: '@',
78-
tipIconLocation: '@',
79-
tipColor: '@',
80-
isBindClickEventToBody: '=',
80+
tipLocation: '@?',
81+
tipIconLocation: '@?',
82+
tipColor: '@?',
83+
isBindClickEventToBody: '=?',
8184
onWalkthroughShow: '&',
8285
onWalkthroughHide: '&'
8386
},
@@ -389,8 +392,8 @@ angular.module('ng-walkthrough', [])
389392
} else {
390393
width = focusElement[0].offsetWidth;
391394
height = focusElement[0].offsetHeight;
392-
left = focusElement[0].offsetLeft;
393-
top = focusElement[0].offsetTop;
395+
left = focusElement[0].getBoundingClientRect().left;
396+
top = focusElement[0].getBoundingClientRect().top;
394397
//var parent = focusElement[0].offsetParent;
395398

396399
//while (parent) {
@@ -410,7 +413,16 @@ angular.module('ng-walkthrough', [])
410413

411414
//Attempts to highlight the given element ID and set Icon to it if exists, if not use default - right under text
412415
var setElementLocations = function(walkthroughIconWanted, focusElementSelector, iconPaddingLeft, iconPaddingTop){
413-
var focusElement = (focusElementSelector)?document.querySelector(focusElementSelector): null;
416+
var focusElement = (focusElementSelector)?document.querySelectorAll(focusElementSelector): null;
417+
if (focusElement && focusElement.length>0) {
418+
if (focusElement.length > 1) {
419+
$log.warn('Multiple items fit selector, displaying first as focus item');
420+
}
421+
focusElement = focusElement[0];
422+
} else{
423+
$log.error('No element found with selector: ' + focusElementSelector);
424+
focusElement = null;
425+
}
414426
var angularElement = (focusElement)?angular.element(focusElement):null;
415427
if (angularElement && angularElement.length > 0) {
416428
var offsetCoordinates = getOffsetCoordinates(angularElement);
@@ -476,6 +488,10 @@ angular.module('ng-walkthrough', [])
476488
}
477489
});
478490

491+
var handleFocusElementIdDeprecated = function(){
492+
console.warn("Since version 0.4.3 focusElementId is deprecated and will be deleted in next versions. Use property 'focusElementSelector' instead.");
493+
};
494+
479495
var handleTipLocationDeprecated = function(){
480496
console.warn("Since version 0.3.1 tipLocation is deprecated and will be deleted in next versions. Use property 'forceCaptionLocation' instead.");
481497
//noinspection JSDeprecatedSymbols
@@ -487,6 +503,11 @@ angular.module('ng-walkthrough', [])
487503
handleTipLocationDeprecated();
488504
}
489505

506+
//noinspection JSDeprecatedSymbols
507+
if (scope.focusElementId){
508+
handleFocusElementIdDeprecated();
509+
}
510+
490511
scope.$watch('isActive', function(newValue){
491512
if(newValue){
492513
bindScreenResize();
@@ -495,7 +516,7 @@ angular.module('ng-walkthrough', [])
495516
}
496517
//if (!scope.hasTransclude){//remarked cause did not focus on search field in recipe select
497518
try {
498-
if (attrs.focusElementSelector) {
519+
if (attrs.focusElementSelector) {
499520
scope.setFocusOnElement(attrs.focusElementSelector);
500521
}
501522
} catch(e){

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ng-walkthrough",
3-
"version": "0.4.2",
3+
"version": "0.4.3",
44
"homepage": "https://github.com/souly1/ng-walkthrough",
55
"authors": [
66
"Ophir Stern <souly01@gmail.com>"

‎test/ng-walkthroughIonicSpec.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ describe('ionic specific Tests', function() {
4747
var padding = 5;
4848
var html =
4949
'<div ng-view>'+
50-
'<walkthrough walkthrough-type="transparency" focus-element-id="' + walkthroughFocusItemDOM + '" icon="single_tap" main-caption="This is some text"' +
50+
'<walkthrough walkthrough-type="transparency" focus-element-selector="#' + walkthroughFocusItemDOM + '" icon="single_tap" main-caption="This is some text"' +
5151
'is-active="isActive">' +
5252
'</walkthrough>' +
5353
'<ion-nav-bar class="bar-positive">' +

‎test/ng-walkthroughSpec.js

+10-10
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,7 @@ describe('ng-walkthrough Directive', function() {
161161
}, 100);
162162
});
163163

164-
it("Should create highlight/focus on element with the given DOM id set in attribute 'focus-element-id'", function(){
164+
it("Should create highlight/focus on element with the given DOM id set in attribute 'focus-element-selector'", function(){
165165
//Arrange
166166
var marginLeft = 50;
167167
var width = 150;
@@ -174,7 +174,7 @@ describe('ng-walkthrough Directive', function() {
174174
setFixtures('<walkthrough' +
175175
' is-active="isActive"' +
176176
' walkthrough-type="transparency"' +
177-
' focus-element-id="' + mockedFocusItemId + '">' +
177+
' focus-element-selector="#' + mockedFocusItemId + '">' +
178178
'</walkthrough>');
179179

180180
jasmine.getFixtures().appendSet('<div id="' + mockedFocusItemId + '" style="margin-left:' + marginLeft + 'px;width:' + width + 'px;margin-top:' + marginTop + 'px;height:' + height + 'px;display: inline-block;"></div>');
@@ -243,7 +243,7 @@ describe('ng-walkthrough Directive', function() {
243243
' is-active="isActive"' +
244244
' has-glow="true"'+
245245
' walkthrough-type="transparency"' +
246-
' focus-element-id="' + mockedFocusItemId + '">' +
246+
' focus-element-selector="#' + mockedFocusItemId + '">' +
247247
'</walkthrough>');
248248

249249
jasmine.getFixtures().appendSet('<div id="' + mockedFocusItemId + '" style="margin-left:' + marginLeft + 'px;width:' + width + 'px;margin-top:' + marginTop + 'px;height:' + height + 'px;display: inline-block;"></div>');
@@ -275,7 +275,7 @@ describe('ng-walkthrough Directive', function() {
275275
var mockedFocusItemId = "mockedFocusItem";
276276
setFixtures('<walkthrough' +
277277
' is-active="isActive"' +
278-
' focus-element-id="' + mockedFocusItemId + '"' +
278+
' focus-element-selector="#' + mockedFocusItemId + '"' +
279279
' is-round=true>' +
280280
'</walkthrough>');
281281

@@ -320,7 +320,7 @@ describe('ng-walkthrough Directive', function() {
320320
testIconLoadedWithExpectedImage("swipe_up", ngWalkthroughTapIcons.swipe_up);
321321
});
322322

323-
it("Should display icon on focus element given it is set by 'focus-element-id'", function(done){
323+
it("Should display icon on focus element given it is set by 'focus-element-selector'", function(done){
324324
//Arrange
325325
var iconWanted = "single_tap";
326326
var walkthroughIconDOM = ".walkthrough-icon";
@@ -333,7 +333,7 @@ describe('ng-walkthrough Directive', function() {
333333
setFixtures('<walkthrough' +
334334
' is-active="isActive"' +
335335
' walkthrough-type="transparency"' +
336-
' focus-element-id="' + mockedFocusItemId + '"' +
336+
' focus-element-selector="#' + mockedFocusItemId + '"' +
337337
' icon="' + iconWanted + '">' +
338338
'</walkthrough>');
339339

@@ -376,7 +376,7 @@ describe('ng-walkthrough Directive', function() {
376376
setFixtures('<walkthrough' +
377377
' is-active="isActive"' +
378378
' walkthrough-type="transparency"' +
379-
' focus-element-id="' + mockedFocusItemId + '"' +
379+
' focus-element-selector="#' + mockedFocusItemId + '"' +
380380
' icon-padding-left="' + paddingLeft + '"' +
381381
' icon-padding-top="' + paddingTop + '"' +
382382
' icon="' + iconWanted + '">' +
@@ -419,7 +419,7 @@ describe('ng-walkthrough Directive', function() {
419419
setFixtures('<walkthrough' +
420420
' is-active="isActive"' +
421421
' walkthrough-type="transparency"' +
422-
' focus-element-id="' + mockedFocusItemId + '"' +
422+
' focus-element-selector="#' + mockedFocusItemId + '"' +
423423
' icon="' + arrowIcon + '">' +
424424
'</walkthrough>');
425425

@@ -523,7 +523,7 @@ describe('ng-walkthrough Directive', function() {
523523
setFixtures('<walkthrough' +
524524
' is-active="isActive"' +
525525
' walkthrough-type="transparency"' +
526-
' focus-element-id="' + mockedFocusItemId + '"' +
526+
' focus-element-selector="#' + mockedFocusItemId + '"' +
527527
' main-caption="' + mockedCaption + '"' +
528528
' icon="' + iconWanted + '">' +
529529
'</walkthrough>');
@@ -765,7 +765,7 @@ describe('ng-walkthrough Directive', function() {
765765
' id="walkthrough"' +
766766
' is-active="isActive"' +
767767
' icon="' + iconWanted + '"' +
768-
' focus-element-id="' + mockedFocusItemId + '"' +
768+
' focus-element-selector="#' + mockedFocusItemId + '"' +
769769
' walkthrough-type="transparency"' +
770770
' main-caption="' + mockedCaption + '">' +
771771
'</walkthrough>');

0 commit comments

Comments
 (0)