Skip to content

Commit

Permalink
added responsive positioning
Browse files Browse the repository at this point in the history
  • Loading branch information
ahmed wagdi committed Nov 7, 2016
1 parent 04b087b commit 8c2ede0
Show file tree
Hide file tree
Showing 4 changed files with 44 additions and 17 deletions.
17 changes: 17 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,23 @@ joyride.config.steps = [
});
}
````
### Responsive Positioning
It's possible to switch the placement of a step based on the screen width by declaring a `responsive` property inside a step object:

````
{
type: 'element',
selector: '.button',
title: "Step 2",
content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
placement: 'left',
responsive: {
breakpoint: 600,
placement: 'top'
}
}
````
The `responsive` object takes 2 properties, the breakpoint where you want to change the placement (in pixels) and the new placement, if no placement is given then it will be set to bottom by default. This directive only supports the use of 1 breakpoint.

### Methods
| Method | Description
Expand Down
21 changes: 13 additions & 8 deletions dist/joyride.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,6 @@ var joyrideDirective = function($animate, joyrideService, $compile, $templateReq
scope: {},
template: '<div class="jr_overlay"></div>',
link: function(scope, element, attrs){

scope.joyride = joyrideService;
var joyrideContainer,
// overlay = '<div class="jr_overlay"></div>',
Expand Down Expand Up @@ -242,7 +241,7 @@ var joyrideDirective = function($animate, joyrideService, $compile, $templateReq
}

// Handles joyride positioning
var setPos = function(){
function setPos(){
var currentStep = scope.joyride.config.steps[scope.joyride.current];

$timeout(function(){
Expand All @@ -255,18 +254,24 @@ var joyrideDirective = function($animate, joyrideService, $compile, $templateReq
if (step.type == 'element') {
joyrideContainer.removeAttribute('style');
angular.element(joyrideContainer).addClass('jr_element');


if (document.querySelector(".jr_target")) {
angular.element(document.querySelector(".jr_target")).removeClass('jr_target');
}

var jrElement = angular.element(document.querySelector(step.selector));
var position = getElementOffset(jrElement[0]);
var jrElement = angular.element(document.querySelector(step.selector)),
position = getElementOffset(jrElement[0]),
window_width = window.innerWidth;

jrElement.addClass('jr_target');



// Check where the step should be positioned then change the position property accordingly
var placement = step.placement || 'bottom';
if (step.responsive && window_width < step.responsive.breakpoint) {
placement = step.responsive.placement || 'bottom';
}

angular.element(joyrideContainer).addClass('jr_pos_'+placement);

if (currentStep.appendToBody){
Expand Down Expand Up @@ -295,11 +300,11 @@ var joyrideDirective = function($animate, joyrideService, $compile, $templateReq

}

else if((position.left + jrWidth) > angular.element($window).width()){
else if((position.left + jrWidth) > window_width){
var tempPos = position.left + (jrWidth/2)
var triangle = document.querySelector(".jr_container .triangle");
triangle.style.right = "auto";
position.left = angular.element($window).width() - jrWidth;
position.left = window_width - jrWidth;
triangle.style.left = tempPos - position.left - triangle.offsetWidth / 2 + 'px';
}

Expand Down
2 changes: 1 addition & 1 deletion dist/joyride.min.js
View file

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

21 changes: 13 additions & 8 deletions js/joyride.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,6 @@ var joyrideDirective = function($animate, joyrideService, $compile, $templateReq
scope: {},
template: '<div class="jr_overlay"></div>',
link: function(scope, element, attrs){

scope.joyride = joyrideService;
var joyrideContainer,
// overlay = '<div class="jr_overlay"></div>',
Expand Down Expand Up @@ -242,7 +241,7 @@ var joyrideDirective = function($animate, joyrideService, $compile, $templateReq
}

// Handles joyride positioning
var setPos = function(){
function setPos(){
var currentStep = scope.joyride.config.steps[scope.joyride.current];

$timeout(function(){
Expand All @@ -255,18 +254,24 @@ var joyrideDirective = function($animate, joyrideService, $compile, $templateReq
if (step.type == 'element') {
joyrideContainer.removeAttribute('style');
angular.element(joyrideContainer).addClass('jr_element');


if (document.querySelector(".jr_target")) {
angular.element(document.querySelector(".jr_target")).removeClass('jr_target');
}

var jrElement = angular.element(document.querySelector(step.selector));
var position = getElementOffset(jrElement[0]);
var jrElement = angular.element(document.querySelector(step.selector)),
position = getElementOffset(jrElement[0]),
window_width = window.innerWidth;

jrElement.addClass('jr_target');



// Check where the step should be positioned then change the position property accordingly
var placement = step.placement || 'bottom';
if (step.responsive && window_width < step.responsive.breakpoint) {
placement = step.responsive.placement || 'bottom';
}

angular.element(joyrideContainer).addClass('jr_pos_'+placement);

if (currentStep.appendToBody){
Expand Down Expand Up @@ -295,11 +300,11 @@ var joyrideDirective = function($animate, joyrideService, $compile, $templateReq

}

else if((position.left + jrWidth) > angular.element($window).width()){
else if((position.left + jrWidth) > window_width){
var tempPos = position.left + (jrWidth/2)
var triangle = document.querySelector(".jr_container .triangle");
triangle.style.right = "auto";
position.left = angular.element($window).width() - jrWidth;
position.left = window_width - jrWidth;
triangle.style.left = tempPos - position.left - triangle.offsetWidth / 2 + 'px';
}

Expand Down

0 comments on commit 8c2ede0

Please sign in to comment.