Merge pull request #475 from junaidrsd/dev

Add initial version of navigation buttons to fullscreen mode

lib/app/js/controllers/element.js

@@ -17,6 +17,59 @@ angular.module('sgApp')
       updatePageData();
     });
 
+    function previousSection(sections, result) {
+      var sec, i, m;
+      sec = result[0];
+      m = modifier;
+      if (result.length > 0) {
+        if (!modifier || modifier <= 1) {
+          i = sections.indexOf(result[0]) - 1;
+          for (i; i >= 0; i--) {
+            sec = sections[i];
+            if (sec.hasOwnProperty('modifiers')) {
+              if (sec.modifiers.length > 0) {
+                break;
+              } else if (sec.hasOwnProperty('markup') && sec.markup) {
+                return sec.reference;
+              }
+            }
+          }
+          if (sec.hasOwnProperty('modifiers') && sec.modifiers.length > 0) {
+            m = sec.modifiers.length + 1;
+          } else {
+            return false;
+          }
+        }
+        return sec.reference + '-' + (parseInt(m) - 1);
+      }
+    }
+
+    function nextSection(sections, result) {
+      var sec, i, m;
+      sec = result[0];
+      m = modifier;
+      if (result.length > 0) {
+        if (!modifier || modifier >= sec.modifiers.length) {
+          i = sections.indexOf(result[0]) + 1;
+          for (i; i < sections.length; i++) {
+            sec = sections[i];
+            if (sec.hasOwnProperty('modifiers')) {
+              if (sec.modifiers.length > 0) {
+                m = 0;
+                break;
+              } else if (sec.hasOwnProperty('markup') && sec.markup) {
+                return sec.reference;
+              }
+            }
+          }
+        }
+        if (sec.modifiers.length === 0) {
+          return false;
+        }
+        return sec.reference + '-' + (parseInt(m) + 1);
+      }
+    }
+
     function updatePageData() {
       var sections, result, element;
       if (!Styleguide.sections.data) {
@@ -44,6 +97,8 @@ angular.module('sgApp')
         }
 
         // Set the actual page content
+        $scope.previousSection = previousSection(sections, result);
+        $scope.nextSection = nextSection(sections, result);
         $scope.section = element;
         $scope.variables = Variables.variables;
         $scope.markup = $filter('setVariables')(element.wrappedMarkup, $scope.variables);

lib/app/sass/app.scss

@@ -1216,6 +1216,18 @@ Styleguide 4.4
   top: -60px;
 }
 
+.navigation-section {
+  padding: 10px;
+  position: fixed;
+  z-index: 99999;
+  right: 0;
+  display: inline;
+  .next-nav, .prev-nav {
+    float: left;
+    cursor: pointer;
+  }
+}
+
 .sg.disconnection-icon {
   line-height: 32px;
 

lib/app/views/element-fullscreen.html

@@ -1,3 +1,11 @@
+<div class="navigation-section">
+  <a ng-hide="!previousSection" ui-sref="app.fullscreen({section: previousSection })">
+    <i class="fa fa-arrow-left"></i>
+  </a>
+  <a ng-hide="!nextSection" ui-sref="app.fullscreen({section: nextSection })">
+    <i class="fa fa-arrow-right"></i>
+  </a>
+</div>
 <shadow-dom>
   <div ng-bind-html="markup | addWrapper | unsafe" dynamic-compile></div>
 </shadow-dom>

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

@@ -5,7 +5,6 @@ describe('element-fullscreen template', function() {
   var scope,
       template,
       html,
-      templateText,
       content,
       Styleguide;
 
@@ -35,89 +34,87 @@ describe('element-fullscreen template', function() {
     inject(function($compile) {
       html = $compile(template)(scope);
       scope.$digest();
-      templateText = html.prop('outerHTML');
-      content = angular.element(html.html()).html();
+      var shadowDom = angular.element(html[2]);
+      content = angular.element(shadowDom[0]).find('div').html();
     });
   }
 
-  function expectDirectiveWithoutValue(directive) {
-    var regex = new RegExp('\\s+' + directive + '(\\s+|\\>)[^=]', 'g');
-    expect(template).to.match(regex);
-  }
+  describe('component markup', function() {
 
-  it('should be wrapped in shadow-dom element', function() {
-    expect(templateText).to.match(/^<shadow-dom/);
-    expect(templateText).to.match(/<\/shadow-dom>$/);
-  });
+    it('should be wrapped in shadow-dom element', function() {
+      expect(template).to.match(/<shadow-dom>[\s\S]*<\/shadow-dom>/);
+    });
 
-  describe('should have directive', function() {
+    describe('should have directive', function() {
 
-    it('dynamic-compile without value', function() {
-      expectDirectiveWithoutValue('dynamic-compile');
-    });
+      it('dynamic-compile without value', function() {
+        expect(template).to.match(/<div[\s\S]+dynamic-compile\S/);
+      });
 
-    it('ng-bind-html', function() {
-      expect(template).to.match(/\s+ng-bind-html="/);
-    });
+      it('ng-bind-html', function() {
+        expect(template).to.match(/<div[\s\S]+ng-bind-html="/);
+      });
 
-  });
+    });
 
-  describe('directive ng-bind-html', function() {
+    describe('directive ng-bind-html', function() {
 
-    it('should filter scope.markup through addWrapper and unsafe', function() {
-      var dir = 'ng-bind-html="',
+      it('should filter scope.markup through addWrapper and unsafe', function() {
+        var dir = 'ng-bind-html="',
           start = template.indexOf(dir) + dir.length,
           value = template.substring(start, template.indexOf('"', start));
-      expect(value).to.match(/markup\s*\|\s*addWrapper\s*\|\s*unsafe\s*/);
+        expect(value).to.match(/markup\s*\|\s*addWrapper\s*\|\s*unsafe\s*/);
+      });
+
     });
 
-  });
+    describe('when commonClass is not defined', function() {
 
-  describe('when commonClass is not defined', function() {
+      describe('template contents should be', function() {
 
-    describe('template contents should be', function() {
+        it('an empty string if scope.markup is not set', function() {
+          expect(content).to.eql('');
+        });
 
-      it('an empty string if scope.markup is not set', function() {
-        expect(content).to.eql('');
-      });
+        it('text from scope.markup', function() {
+          scope.markup = 'hello';
+          compileTemplate();
+          expect(content).to.eql('hello');
+        });
 
-      it('text from scope.markup', function() {
-        scope.markup = 'hello';
-        compileTemplate();
-        expect(content).to.eql('hello');
-      });
+        it('html from scope.markup', function() {
+          var expected = '<p>hello!</p>';
+          scope.markup = expected;
+          compileTemplate();
+          expect(content).to.eql(expected);
+        });
 
-      it('html from scope.markup', function() {
-        var expected = '<p>hello!</p>';
-        scope.markup = expected;
-        compileTemplate();
-        expect(content).to.eql(expected);
       });
 
     });
 
-  });
+    describe('when commonClass is defined', function() {
 
-  describe('when commonClass is defined', function() {
+      beforeEach(function() {
+        Styleguide.config = {
+          data: {
+            commonClass: 'foobar'
+          }
+        };
+      });
 
-    beforeEach(function() {
-      Styleguide.config = {
-        data: {
-          commonClass: 'foobar'
-        }
-      };
-    });
+      it('should wrap scope.markup html in <sg-common-class-wrapper> element', function() {
+        scope.markup = '<p>hello!</p>';
+        compileTemplate();
+        expect(content).to.contain('<p>hello!</p></sg-common-class-wrapper>');
+      });
 
-    it('should wrap scope.markup html in <sg-common-class-wrapper> element', function() {
-      scope.markup = '<p>hello!</p>';
-      compileTemplate();
-      expect(content).to.contain('<p>hello!</p></sg-common-class-wrapper>');
-    });
+      it('wrapper element should have class defined in commonClass', function() {
+        scope.markup = '<p>hello!</p>';
+        compileTemplate();
+        expect(content).to.contain('<sg-common-class-wrapper class="foobar"><p>hello!</p>');
+      });
 
-    it('wrapper element should have class defined in commonClass', function() {
-      scope.markup = '<p>hello!</p>';
-      compileTemplate();
-      expect(content).to.contain('<sg-common-class-wrapper class="foobar"><p>hello!</p>');
     });
 
   });