Skip to content

Commit a7907e2

Browse files
souly1souly1
committed
* Added correct support for walkthrough text position at top of screen or bottom for both transparency and tip walkthroughs.
* Better support for tip walkthrough to not be dependent on number of text rows in it when placing icon/exit button
1 parent a31952d commit a7907e2

6 files changed

+135
-66
lines changed

‎README.md

+1-7
Original file line numberDiff line numberDiff line change
@@ -126,17 +126,11 @@ and use one of the two configurations:
126126
- `icon-padding-left` (optional) - Any walkthrough type. Add padding to the icon from the left in percentage
127127
- `icon-padding-top` (optional) - Any walkthrough type. Add padding to the icon from the top in pixels
128128
- `tip-icon-location` (optional) - For tip walkthrough. In case there is an overlap between the tip text box and the tip icon you can define here which is on top. Either "FRONT" or "BACK"
129-
- `tip-location` (optional) - For tip walkthrough. Set tip location at the top of screen of closer to bottom. Acceptable values: "TOP" or "BOTTOM"
129+
- `force-caption-location` (optional) - Any walkthrough type. Set caption location at the top of screen or closer to bottom. Acceptable values: "TOP" or "BOTTOM"
130130
- `tip-color` (optional) - For tip walkthrough. Define the tip textbox background color. Currently supports "BLACK" or "WHITE" values
131-
<<<<<<< HEAD
132-
- `onWalkthroughShow` (optional) - Any walkthrough type. Bind method to be called when walkthrough is displayed
133-
- `onWalkthroughHide` (optional) - Any walkthrough type. Bind method to be called when walkthrough is hidden
134-
- `caption-on-bottom` (optional) - Forces the caption to be displayed on the bottom of the screen.
135-
=======
136131
- `is-bind-click-event-to-body` (optional) - Any walkthrough type. If 'use-botton' is not set to true, then any this will bind the click events to the body to capture events outside walkthrough, for example: ionic header
137132
- `on-walkthrough-show` (optional) - Any walkthrough type. Bind method to be called when walkthrough is displayed
138133
- `on-walkthrough-hide` (optional) - Any walkthrough type. Bind method to be called when walkthrough is hidden
139-
>>>>>>> db350fb4241a762e253e727d2263ff07536a8241
140134

141135
## Testing
142136

‎css/ng-walkthrough.css

+48-20
Original file line numberDiff line numberDiff line change
@@ -106,28 +106,50 @@
106106
border-radius: 200px;
107107
}
108108

109-
.walkthrough-tip-top{
110-
top: 25px;
111-
position: absolute;
109+
.walkthrough-tip-text-box {
110+
/*top: 128px;*/
111+
position: relative;
112+
margin-left: 16px;
113+
margin-right: 16px;
114+
border: 2px solid;
115+
border-radius: 35px;
116+
padding: 14px;
117+
/*margin-top: 0;*/
118+
/*margin-bottom: 0;*/
119+
}
120+
121+
.walkthrough-container{
122+
float: left;
123+
position: relative;
124+
height: 100vh;
112125
width: 100%;
113126
}
114127

115-
.walkthrough-tip-bottom{
116-
bottom: 190px;
128+
.walkthrough-inner{
117129
position: absolute;
118130
width: 100%;
119131
}
120132

121-
.walkthrough-tip-text-box {
122-
top: 128px;
133+
.walkthrough-container-transparency > .walkthrough-inner{
134+
height: 100%;
135+
}
136+
137+
.walkthrough-text-container{
123138
position: absolute;
124-
left: 16px;
125-
right: 16px;
126-
border: 2px solid;
127-
border-radius: 35px;
128-
padding: 14px;
129-
margin-top: 0;
130-
margin-bottom: 0;
139+
width: 100%;
140+
}
141+
142+
.walkthrough-container-tip > .walkthrough-top, .walkthrough-container-transparency > .walkthrough-top .walkthrough-text-container{
143+
top: 15px;
144+
}
145+
146+
.walkthrough-container-tip > .walkthrough-bottom {
147+
bottom: 0;
148+
}
149+
150+
/* take 'done' button into consideration */
151+
.walkthrough-container-transparency > .walkthrough-bottom .walkthrough-text-container{
152+
bottom: 70px;
131153
}
132154

133155
.walkthrough-tip-icon-image-front{
@@ -138,19 +160,25 @@
138160
z-index: 999;
139161
}
140162

141-
.walkthrough-tip-icon-text-box{
163+
.walkthrough-tip-icon-text-box {
142164
height: 142px;
143-
right: 5%;
144-
position: absolute;
165+
/*right: 9%;*/
166+
position: relative;
167+
margin-bottom: -32px;
168+
margin-right: -250px;
169+
/*bottom: 70px;*/
145170
}
146171

147172
.walkthrough-tip-done-button-text-box{
148-
top: 109px;
149-
position: absolute;
173+
/*top: 109px;*/
174+
/*bottom: 59px;*/
175+
position: relative;
150176
z-index: 1002;
151-
right: -8px;
177+
/*right: -7px;*/
178+
margin-top: 107px;
152179
background-color: transparent;
153180
border: 0;
181+
float: right;
154182
}
155183

156184
.walkthrough-tip-button-image-text-box{

‎ng-walkthrough.html

+23-17
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,29 @@
11
<div class="walkthrough-background" ng-class="{'walkthrough-active': isActive}" ng-click="onCloseClicked($event)" on-touch="onCloseTouched($event)">
2-
<div ng-show="walkthroughType=='transparency'">
3-
<div class="walkthrough-transclude" ng-transclude></div>
4-
<div class="walkthrough-non-transclude-template" ng-show="!hasTransclude">
5-
<pre class="walkthrough-element walkthrough-text" ng-bind="mainCaption">
6-
</pre>
7-
<img class="walkthrough-element walkthrough-icon" ng-show="icon && icon!='arrow'" ng-src="{{walkthroughIcon}}">
8-
<div class="walkthrough-element walkthrough-arrow" ng-show="icon=='arrow'"></div>
9-
<button class="walkthrough-element walkthrough-button-positive walkthrough-done-button" type="button" ng-if="useButton" ng-click="onCloseClicked($event)" on-touch="onCloseTouched($event)">
10-
{{buttonCaption}}
11-
</button>
2+
<div class="walkthrough-container walkthrough-container-transparency" ng-show="walkthroughType=='transparency'">
3+
<div class="walkthrough-inner" ng-class="{'walkthrough-top': (!forceCaptionLocation || forceCaptionLocation=='TOP'), 'walkthrough-bottom': forceCaptionLocation=='BOTTOM'}">
4+
<div class="walkthrough-transclude" ng-transclude></div>
5+
<div class="walkthrough-non-transclude-template" ng-show="!hasTransclude">
6+
<div class="walkthrough-text-container">
7+
<pre class="walkthrough-element walkthrough-text" ng-bind="mainCaption">
8+
</pre>
9+
</div>
10+
<img class="walkthrough-element walkthrough-icon" ng-show="icon && icon!='arrow'" ng-src="{{walkthroughIcon}}">
11+
<div class="walkthrough-element walkthrough-arrow" ng-show="icon=='arrow'"></div>
12+
<button class="walkthrough-element walkthrough-button-positive walkthrough-done-button" type="button" ng-if="useButton" ng-click="onCloseClicked($event)" on-touch="onCloseTouched($event)">
13+
{{buttonCaption}}
14+
</button>
15+
</div>
1216
</div>
1317
</div>
14-
<div ng-show="walkthroughType=='tip'" ng-class="{'walkthrough-tip-top': tipLocation=='TOP', 'walkthrough-tip-bottom': tipLocation=='BOTTOM'}">
15-
<img class="walkthrough-element walkthrough-tip-icon-text-box" ng-class="{'walkthrough-tip-icon-image-front': tipIconLocation=='FRONT', 'walkthrough-tip-icon-image-back': tipIconLocation=='BACK'}" ng-show="icon!='arrow'" ng-src="{{icon}}" alt="icon">
16-
<button class="walkthrough-done-button walkthrough-tip-done-button-text-box" type="button" ng-if="useButton" ng-click="onCloseClicked($event)" on-touch="onCloseTouched($event)">
17-
<img class="walkthrough-tip-button-image-text-box" ng-src="{{closeIcon}}" alt="x">
18-
</button>
19-
<pre class="walkthrough-element walkthrough-tip-text-box" ng-class="{'walkthrough-tip-text-box-color-black': tipColor=='BLACK', 'walkthrough-tip-text-box-color-white': tipColor=='WHITE'}" ng-bind="mainCaption">
20-
</pre>
18+
<div class="walkthrough-container walkthrough-container-tip" ng-show="walkthroughType=='tip'">
19+
<div class="walkthrough-inner" ng-class="{'walkthrough-top': ((!forceCaptionLocation && !tipLocation) || forceCaptionLocation=='TOP' || tipLocation =='TOP'), 'walkthrough-bottom': (forceCaptionLocation=='BOTTOM' || tipLocation =='BOTTOM')}">
20+
<img class="walkthrough-element walkthrough-tip-icon-text-box" ng-class="{'walkthrough-tip-icon-image-front': tipIconLocation=='FRONT', 'walkthrough-tip-icon-image-back': tipIconLocation=='BACK'}" ng-show="icon!='arrow'" ng-src="{{icon}}" alt="icon">
21+
<button class="walkthrough-done-button walkthrough-tip-done-button-text-box" type="button" ng-if="useButton" ng-click="onCloseClicked($event)" on-touch="onCloseTouched($event)">
22+
<img class="walkthrough-tip-button-image-text-box" ng-src="{{closeIcon}}" alt="x">
23+
</button>
24+
<pre class="walkthrough-element walkthrough-tip-text-box" ng-class="{'walkthrough-tip-text-box-color-black': tipColor=='BLACK', 'walkthrough-tip-text-box-color-white': tipColor=='WHITE'}" ng-bind="mainCaption">
25+
</pre>
26+
</div>
2127
</div>
2228
<!-- Always show as this gives us the gray background -->
2329
<div ng-show="walkthroughType=='transparency' || focusElementId" class="walkthrough-hole" ng-class="{'walkthrough-hole-round': isRound}">

‎ng-walkthrough.js

+33-15
Original file line numberDiff line numberDiff line change
@@ -29,12 +29,15 @@ angular.module('ng-walkthrough', [])
2929
icon: '@',
3030
focusElementId: '@',
3131
mainCaption: '@',
32-
captionOnBottom: '=',
32+
forceCaptionLocation: '@',
3333
isRound: '=',
3434
hasGlow: '=',
3535
useButton: '=',
3636
iconPaddingLeft: '@',
3737
iconPaddingTop: '@',
38+
/**
39+
* @deprecated Since version 0.3.1. Will be deleted in next versions. Use property forceCaptionLocation instead.
40+
*/
3841
tipLocation: '@',
3942
tipIconLocation: '@',
4043
tipColor: '@',
@@ -160,19 +163,19 @@ angular.module('ng-walkthrough', [])
160163
if ((!scope.useButton) ||
161164
($event.currentTarget.className.indexOf(DOM_WALKTHROUGH_DONE_BUTTON_CLASS) > -1)) {
162165
scope.closeWalkthrough();
163-
$event.stopPropagation();
164166
}
165167
}
168+
$event.stopPropagation();
166169
};
167170

168171
scope.onCloseTouched = function($event) {
169172
if (scope.clickEvent == 'touch') {
170173
if ((!scope.useButton) ||
171174
($event.currentTarget.className.indexOf(DOM_WALKTHROUGH_DONE_BUTTON_CLASS) > -1)) {
172175
scope.closeWalkthrough();
173-
$event.stopPropagation();
174176
}
175177
}
178+
$event.stopPropagation();
176179
};
177180
scope.closeIcon = iconsUrl + "Hotspot-close.png";
178181
scope.walkthroughIcon = getIcon(scope.icon);
@@ -223,8 +226,8 @@ angular.module('ng-walkthrough', [])
223226
var iconRight = iconLeftWithPadding + iconWidth;
224227
var iconBottom = iconTopWithPadding + iconHeight;
225228

226-
//Check if text overlaps icon, if does, move it to bottom
227-
if (scope.captionOnBottom || isItemOnText(iconLeftWithPadding, iconTopWithPadding, iconRight, iconBottom)){
229+
//Check if text overlaps icon or user explicitly wants text at bottom, if does, move it to bottom
230+
if (isItemOnText(iconLeftWithPadding, iconTopWithPadding, iconRight, iconBottom)){
228231
moveTextToBottom(iconBottom);
229232
}
230233

@@ -240,8 +243,11 @@ angular.module('ng-walkthrough', [])
240243
var setArrowAndText = function(pointSubjectLeft, pointSubjectTop, pointSubjectWidth, pointSubjectHeight, paddingLeft){
241244
var offsetCoordinates = getOffsetCoordinates(scope.walkthroughTextElement);
242245
var startLeft = offsetCoordinates.left + offsetCoordinates.width /2;
243-
var startTop = offsetCoordinates.top + offsetCoordinates.height + PADDING_ARROW_START;
246+
var startTop = offsetCoordinates.top + PADDING_ARROW_START;
244247

248+
if (scope.forceCaptionLocation === "TOP"){
249+
startTop += offsetCoordinates.height;
250+
}
245251
var endTop = 0;
246252
var endLeft = 0;
247253

@@ -253,8 +259,8 @@ angular.module('ng-walkthrough', [])
253259
endTop = pointSubjectTop + (pointSubjectHeight/2);
254260
}
255261

256-
//Check if text overlaps icon, if does, move it to bottom
257-
if (scope.captionOnBottom || isItemOnText(startLeft, startTop, endLeft, endTop)){
262+
//Check if text overlaps icon or user explicitly wants text at bottom, if does, move it to bottom
263+
if (isItemOnText(startLeft, startTop, endLeft, endTop)){
258264
moveTextToBottom(startTop);
259265
}
260266

@@ -333,11 +339,16 @@ angular.module('ng-walkthrough', [])
333339
if (!paddingTop) { paddingTop = 0;}
334340

335341
//If Gesture icon given bind it to hole as well
336-
if (walkthroughIconWanted && walkthroughIconWanted != "arrow"){
337-
setIconAndText(left + width/2, top + height/2, paddingLeft, paddingTop);
342+
if (walkthroughIconWanted && walkthroughIconWanted !== "arrow" && scope.walkthroughType === "transparency"){
343+
scope.$applyAsync(function () {
344+
setIconAndText(left + width/2, top + height/2, paddingLeft, paddingTop);
345+
});
338346
}
339347
if (walkthroughIconWanted == "arrow"){
340-
setArrowAndText(left, top + paddingTop, width, height, paddingLeft);
348+
//Need to update text location according to conditional class added 'walkthrough-transparency-bottom'
349+
scope.$applyAsync(function () {
350+
setArrowAndText(left, top + paddingTop, width, height, paddingLeft);
351+
});
341352
}
342353
//if tip mode with icon that we want to set padding to, set it
343354
if (scope.walkthroughType== "tip" &&
@@ -378,6 +389,17 @@ angular.module('ng-walkthrough', [])
378389
}
379390
});
380391

392+
var handleTipLocationDeprecated = function(){
393+
console.warn("Since version 0.3.1 tipLocation is deprecated and will be deleted in next versions. Use property 'forceCaptionLocation' instead.");
394+
//noinspection JSDeprecatedSymbols
395+
scope.forceCaptionLocation = scope.tipLocation;
396+
};
397+
398+
//noinspection JSDeprecatedSymbols
399+
if (scope.tipLocation){
400+
handleTipLocationDeprecated();
401+
}
402+
381403
scope.$watch('isActive', function(newValue){
382404
if(newValue){
383405
bindScreenResize();
@@ -407,8 +429,4 @@ angular.module('ng-walkthrough', [])
407429
},
408430
templateUrl: templateUrl
409431
};
410-
<<<<<<< HEAD
411-
});
412-
=======
413432
}]);
414-
>>>>>>> db350fb4241a762e253e727d2263ff07536a8241

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ng-walkthrough",
3-
"version": "0.2.4",
3+
"version": "0.3.1",
44
"description": "One of the most common design challenges emerging in mobile design is that of 'invitation' - creating an explanation walk through during user first interaction with the app so to engage the customer. Following Theresa Neil's design pattern from Mobile Design Pattern Gallery",
55
"dependencies": {},
66
"devDependencies": {

‎test/ng-walkthroughSpec.js

+29-6
Original file line numberDiff line numberDiff line change
@@ -608,11 +608,11 @@ describe('ng-walkthrough Directive', function() {
608608

609609
it("Should display tip walkthrough text box at bottom part of screen", function(){
610610
//Arrange
611-
var mockedCaption = "mockedCaption";
611+
var mockedCaption = "mocked caption at bottom";
612612
setFixtures('<walkthrough' +
613613
' is-active="isActive"' +
614614
' walkthrough-type="tip"' +
615-
' tip-location="BOTTOM"' +
615+
' force-caption-location="BOTTOM"' +
616616
' main-caption="' + mockedCaption + '">' +
617617
'</walkthrough>');
618618
$compile($("body"))($scope);
@@ -622,19 +622,42 @@ describe('ng-walkthrough Directive', function() {
622622
$scope.isActive = true;
623623
$scope.$digest();
624624

625-
var walkthroughTipTextBox = $('.walkthrough-tip-bottom');
625+
var documentRectangle = document.body.getBoundingClientRect();
626+
var walkthroughTipTextBox = $('.walkthrough-container-tip > .walkthrough-bottom');
626627

627628
//Assert
628629
expect(walkthroughTipTextBox[0]).toExist();
629630
});
630631

632+
it("Should display transparency walkthrough text at bottom part of screen", function(){
633+
//Arrange
634+
var mockedCaption = "mocked caption at bottom";
635+
setFixtures('<walkthrough' +
636+
' is-active="isActive"' +
637+
' walkthrough-type="transparency"' +
638+
' force-caption-location="BOTTOM"' +
639+
' main-caption="' + mockedCaption + '">' +
640+
'</walkthrough>');
641+
$compile($("body"))($scope);
642+
$scope.$digest();
643+
644+
//Act
645+
$scope.isActive = true;
646+
$scope.$digest();
647+
648+
var walkthroughTransparencyTextBox = $('.walkthrough-container-transparency > .walkthrough-bottom .walkthrough-text-container');
649+
650+
//Assert
651+
expect(walkthroughTransparencyTextBox[0]).toExist();
652+
});
653+
631654
it("Should display tip walkthrough text box at top part of screen", function(){
632655
//Arrange
633-
var mockedCaption = "mockedCaption";
656+
var mockedCaption = "mocked caption at top";
634657
setFixtures('<walkthrough' +
635658
' is-active="isActive"' +
636659
' walkthrough-type="tip"' +
637-
' tip-location="TOP"' +
660+
' force-caption-location="TOP"' +
638661
' main-caption="' + mockedCaption + '">' +
639662
'</walkthrough>');
640663
$compile($("body"))($scope);
@@ -644,7 +667,7 @@ describe('ng-walkthrough Directive', function() {
644667
$scope.isActive = true;
645668
$scope.$digest();
646669

647-
var walkthroughTipTextBox = $('.walkthrough-tip-top');
670+
var walkthroughTipTextBox = $('.walkthrough-container-tip > .walkthrough-top');
648671

649672
//Assert
650673
expect(walkthroughTipTextBox[0]).toExist();

0 commit comments

Comments
 (0)