Re-fix the SVG element on scroll, making for easier editing again

inspiraf · Feb 23, 2015 · e15a03a · e15a03a
1 parent c079793
commit e15a03a
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 3 deletions.
diff --git a/app/index.html b/app/index.html
@@ -85,6  85,7 @@ <h1>CardKit v2.0.0-alpha</h1>
         <script src="scripts/services/snapsvg.js"></script>
         <script src="scripts/directives/snapsvg.js"></script>
         <script src="scripts/services/savesvgaspng.js"></script>
         <script src="scripts/directives/fixedscroll.js"></script>
         <!-- endbuild -->
 </body>
 </html>
diff --git a/app/scripts/directives/fixedscroll.js b/app/scripts/directives/fixedscroll.js
@@ -0,0  1,21 @@
 'use strict';
 
 /**
  * @ngdoc directive
  * @name cardkitApp.directive:fixedScroll
  * @description
  * # fixedScroll
  */
 angular.module('cardkitApp')
   .directive('fixedScroll', function ($window) {
     return function(scope, element, attrs) {
     	var offset = element.offset().top-20;
     	angular.element($window).bind('scroll', function() {
     		if(angular.element($window).scrollTop() >= offset) {
     			element.addClass('fixed');
     		} else {
     			element.removeClass('fixed');
     		}
     	});
    	};
   });
diff --git a/app/styles/main.scss b/app/styles/main.scss
@@ -22,6  22,19 @@ body {
   margin: 20px;
 }
 
 .fixed {
 	position: fixed;
 	top: 20px;
 	width: 47.2%;
 }
 
 @media screen and (max-width: 992px) {
 	.fixed {
 		position: relative;
 		top: 0; width: 100%;
 	}
 } 
 
 #svg, #snap-svg {
   *[draggable="true"]{
   	cursor: move;

diff --git a/app/views/main.html b/app/views/main.html
@@ -6,9  6,11 @@
 
 <div class="row">
   <div class="col-md-7">
-    <div class="svg-wrapper" ng-if="((config.themes.length > 0 && theme) || config.themes.length == 0) && ((config.sizes.length > 0 && size) || config.sizes.length == 0)">
-      <snap-svg svg-config="config.svg" svg-theme="config.theme"></snap-svg>
-      <button class="btn btn-primary" ng-click="downloadSvg()">Download Image</button>
     <div fixed-scroll>
       <div class="svg-wrapper" ng-if="((config.themes.length > 0 && theme) || config.themes.length == 0) && ((config.sizes.length > 0 && size) || config.sizes.length == 0)">
         <snap-svg svg-config="config.svg" svg-theme="config.theme"></snap-svg>
         <button class="btn btn-primary" ng-click="downloadSvg()">Download Image</button>
       </div>
     </div>
   </div>
   <div class="col-md-5">

diff --git a/test/spec/directives/fixedscroll.js b/test/spec/directives/fixedscroll.js
@@ -0,0  1,20 @@
 'use strict';
 
 describe('Directive: fixedScroll', function () {
 
   // load the directive's module
   beforeEach(module('cardkitApp'));
 
   var element,
     scope;
 
   beforeEach(inject(function ($rootScope) {
     scope = $rootScope.$new();
   }));
 
   it('should make hidden element visible', inject(function ($compile) {
     element = angular.element('<fixed-scroll></fixed-scroll>');
     element = $compile(element)(scope);
     expect(element.text()).toBe('this is the fixedScroll directive');
   }));
 });