Skip to content

Commit 85ece30

Browse files
author
Juuso Backman
committed
Merge pull request #475 from junaidrsd/dev
Add initial version of navigation buttons to fullscreen mode
2 parents 12e7130 + 405c42d commit 85ece30

File tree

4 files changed

+129
-57
lines changed

4 files changed

+129
-57
lines changed

‎lib/app/js/controllers/element.js

+55
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,59 @@ angular.module('sgApp')
1717
updatePageData();
1818
});
1919

20+
function previousSection(sections, result) {
21+
var sec, i, m;
22+
sec = result[0];
23+
m = modifier;
24+
if (result.length > 0) {
25+
if (!modifier || modifier <= 1) {
26+
i = sections.indexOf(result[0]) - 1;
27+
for (i; i >= 0; i--) {
28+
sec = sections[i];
29+
if (sec.hasOwnProperty('modifiers')) {
30+
if (sec.modifiers.length > 0) {
31+
break;
32+
} else if (sec.hasOwnProperty('markup') && sec.markup) {
33+
return sec.reference;
34+
}
35+
}
36+
}
37+
if (sec.hasOwnProperty('modifiers') && sec.modifiers.length > 0) {
38+
m = sec.modifiers.length + 1;
39+
} else {
40+
return false;
41+
}
42+
}
43+
return sec.reference + '-' + (parseInt(m) - 1);
44+
}
45+
}
46+
47+
function nextSection(sections, result) {
48+
var sec, i, m;
49+
sec = result[0];
50+
m = modifier;
51+
if (result.length > 0) {
52+
if (!modifier || modifier >= sec.modifiers.length) {
53+
i = sections.indexOf(result[0]) + 1;
54+
for (i; i < sections.length; i++) {
55+
sec = sections[i];
56+
if (sec.hasOwnProperty('modifiers')) {
57+
if (sec.modifiers.length > 0) {
58+
m = 0;
59+
break;
60+
} else if (sec.hasOwnProperty('markup') && sec.markup) {
61+
return sec.reference;
62+
}
63+
}
64+
}
65+
}
66+
if (sec.modifiers.length === 0) {
67+
return false;
68+
}
69+
return sec.reference + '-' + (parseInt(m) + 1);
70+
}
71+
}
72+
2073
function updatePageData() {
2174
var sections, result, element;
2275
if (!Styleguide.sections.data) {
@@ -44,6 +97,8 @@ angular.module('sgApp')
4497
}
4598

4699
// Set the actual page content
100+
$scope.previousSection = previousSection(sections, result);
101+
$scope.nextSection = nextSection(sections, result);
47102
$scope.section = element;
48103
$scope.variables = Variables.variables;
49104
$scope.markup = $filter('setVariables')(element.wrappedMarkup, $scope.variables);

‎lib/app/sass/app.scss

+12
Original file line numberDiff line numberDiff line change
@@ -1216,6 +1216,18 @@ Styleguide 4.4
12161216
top: -60px;
12171217
}
12181218

1219+
.navigation-section {
1220+
padding: 10px;
1221+
position: fixed;
1222+
z-index: 99999;
1223+
right: 0;
1224+
display: inline;
1225+
.next-nav, .prev-nav {
1226+
float: left;
1227+
cursor: pointer;
1228+
}
1229+
}
1230+
12191231
.sg.disconnection-icon {
12201232
line-height: 32px;
12211233

‎lib/app/views/element-fullscreen.html

+8
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1+
<div class="navigation-section">
2+
<a ng-hide="!previousSection" ui-sref="app.fullscreen({section: previousSection })">
3+
<i class="fa fa-arrow-left"></i>
4+
</a>
5+
<a ng-hide="!nextSection" ui-sref="app.fullscreen({section: nextSection })">
6+
<i class="fa fa-arrow-right"></i>
7+
</a>
8+
</div>
19
<shadow-dom>
210
<div ng-bind-html="markup | addWrapper | unsafe" dynamic-compile></div>
311
</shadow-dom>

‎test/angular/functional/element-fullscreen.test.js

+54-57
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ describe('element-fullscreen template', function() {
55
var scope,
66
template,
77
html,
8-
templateText,
98
content,
109
Styleguide;
1110

@@ -35,89 +34,87 @@ describe('element-fullscreen template', function() {
3534
inject(function($compile) {
3635
html = $compile(template)(scope);
3736
scope.$digest();
38-
templateText = html.prop('outerHTML');
39-
content = angular.element(html.html()).html();
37+
var shadowDom = angular.element(html[2]);
38+
content = angular.element(shadowDom[0]).find('div').html();
4039
});
4140
}
4241

43-
function expectDirectiveWithoutValue(directive) {
44-
var regex = new RegExp('\\s+' + directive + '(\\s+|\\>)[^=]', 'g');
45-
expect(template).to.match(regex);
46-
}
42+
describe('component markup', function() {
4743

48-
it('should be wrapped in shadow-dom element', function() {
49-
expect(templateText).to.match(/^<shadow-dom/);
50-
expect(templateText).to.match(/<\/shadow-dom>$/);
51-
});
44+
it('should be wrapped in shadow-dom element', function() {
45+
expect(template).to.match(/<shadow-dom>[\s\S]*<\/shadow-dom>/);
46+
});
5247

53-
describe('should have directive', function() {
48+
describe('should have directive', function() {
5449

55-
it('dynamic-compile without value', function() {
56-
expectDirectiveWithoutValue('dynamic-compile');
57-
});
50+
it('dynamic-compile without value', function() {
51+
expect(template).to.match(/<div[\s\S]+dynamic-compile\S/);
52+
});
5853

59-
it('ng-bind-html', function() {
60-
expect(template).to.match(/\s+ng-bind-html="/);
61-
});
54+
it('ng-bind-html', function() {
55+
expect(template).to.match(/<div[\s\S]+ng-bind-html="/);
56+
});
6257

63-
});
58+
});
6459

65-
describe('directive ng-bind-html', function() {
60+
describe('directive ng-bind-html', function() {
6661

67-
it('should filter scope.markup through addWrapper and unsafe', function() {
68-
var dir = 'ng-bind-html="',
62+
it('should filter scope.markup through addWrapper and unsafe', function() {
63+
var dir = 'ng-bind-html="',
6964
start = template.indexOf(dir) + dir.length,
7065
value = template.substring(start, template.indexOf('"', start));
71-
expect(value).to.match(/markup\s*\|\s*addWrapper\s*\|\s*unsafe\s*/);
66+
expect(value).to.match(/markup\s*\|\s*addWrapper\s*\|\s*unsafe\s*/);
67+
});
68+
7269
});
7370

74-
});
71+
describe('when commonClass is not defined', function() {
7572

76-
describe('when commonClass is not defined', function() {
73+
describe('template contents should be', function() {
7774

78-
describe('template contents should be', function() {
75+
it('an empty string if scope.markup is not set', function() {
76+
expect(content).to.eql('');
77+
});
7978

80-
it('an empty string if scope.markup is not set', function() {
81-
expect(content).to.eql('');
82-
});
79+
it('text from scope.markup', function() {
80+
scope.markup = 'hello';
81+
compileTemplate();
82+
expect(content).to.eql('hello');
83+
});
8384

84-
it('text from scope.markup', function() {
85-
scope.markup = 'hello';
86-
compileTemplate();
87-
expect(content).to.eql('hello');
88-
});
85+
it('html from scope.markup', function() {
86+
var expected = '<p>hello!</p>';
87+
scope.markup = expected;
88+
compileTemplate();
89+
expect(content).to.eql(expected);
90+
});
8991

90-
it('html from scope.markup', function() {
91-
var expected = '<p>hello!</p>';
92-
scope.markup = expected;
93-
compileTemplate();
94-
expect(content).to.eql(expected);
9592
});
9693

9794
});
9895

99-
});
96+
describe('when commonClass is defined', function() {
10097

101-
describe('when commonClass is defined', function() {
98+
beforeEach(function() {
99+
Styleguide.config = {
100+
data: {
101+
commonClass: 'foobar'
102+
}
103+
};
104+
});
102105

103-
beforeEach(function() {
104-
Styleguide.config = {
105-
data: {
106-
commonClass: 'foobar'
107-
}
108-
};
109-
});
106+
it('should wrap scope.markup html in <sg-common-class-wrapper> element', function() {
107+
scope.markup = '<p>hello!</p>';
108+
compileTemplate();
109+
expect(content).to.contain('<p>hello!</p></sg-common-class-wrapper>');
110+
});
110111

111-
it('should wrap scope.markup html in <sg-common-class-wrapper> element', function() {
112-
scope.markup = '<p>hello!</p>';
113-
compileTemplate();
114-
expect(content).to.contain('<p>hello!</p></sg-common-class-wrapper>');
115-
});
112+
it('wrapper element should have class defined in commonClass', function() {
113+
scope.markup = '<p>hello!</p>';
114+
compileTemplate();
115+
expect(content).to.contain('<sg-common-class-wrapper class="foobar"><p>hello!</p>');
116+
});
116117

117-
it('wrapper element should have class defined in commonClass', function() {
118-
scope.markup = '<p>hello!</p>';
119-
compileTemplate();
120-
expect(content).to.contain('<sg-common-class-wrapper class="foobar"><p>hello!</p>');
121118
});
122119

123120
});

0 commit comments

Comments
 (0)