Created
March 17, 2014 09:37
-
-
Save robinboehm/9596459 to your computer and use it in GitHub Desktop.
Overlay with widgets
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html ng-app="angularLeapUi"> | |
| <head> | |
| <title></title> | |
| <style> | |
| .leap-hover { | |
| background-color: red; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <span leap-overlay style="height: 500px;width: 500px;position: relative;display: block"> | |
| <h1 leap-hover>This is a headline</h1> | |
| <span leap-hover> | |
| Hover Effect | |
| </span> | |
| <span leap-hover> | |
| Hover Effect | |
| </span> | |
| <span leap-hover> | |
| Hover Effect | |
| </span> | |
| <span leap-hover> | |
| Hover Effect | |
| </span> | |
| <span leap-hover> | |
| Hover Effect | |
| </span> | |
| <span leap-hover> | |
| Hover Effect | |
| </span> | |
| <span leap-hover> | |
| Hover Effect | |
| </span> | |
| <span leap-hover> | |
| Hover Effect | |
| </span> | |
| <span leap-hover> | |
| Hover Effect | |
| </span> | |
| </span> | |
| <script src="bower_components/leapjs/leap.min.js"></script> | |
| <script src="bower_components/angular/angular.js"></script> | |
| <script src="bower_components/angular-leap/build/angular-leap.min.js"></script> | |
| <script src="src/module.js"></script> | |
| <script src="src/directive/overlay.js"></script> | |
| <script src="src/directive/leapHover.js"></script> | |
| <script src="src/service/NormalizePointablesService.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 'use strict'; | |
| angular.module('angularLeapUi') | |
| .directive('leapHover', function ($interval, NormalizePointables) { | |
| return { | |
| restrict: 'EACM', | |
| require: '^leapOverlay', | |
| link: function (scope, element, attrs, controller) { | |
| var dataArray = NormalizePointables.get(); | |
| var className = 'leap-hover'; | |
| $interval(function () { | |
| angular.forEach(dataArray, function (pointable) { | |
| var cursor = { | |
| x: pointable[0] * controller.offsetWidth, | |
| y: controller.offsetHeight - pointable[1] * controller.offsetHeight | |
| }; | |
| var box = element[0].getBoundingClientRect(); | |
| if (cursor.x > box.left && cursor.x < box.right && cursor.y > box.top && cursor.y < box.bottom) { | |
| angular.element(element).addClass(className); | |
| } | |
| else { | |
| angular.element(element).removeClass(className); | |
| } | |
| }); | |
| }, 50); | |
| } | |
| }; | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 'use strict'; | |
| angular.module('angularLeapUi') | |
| .directive('leapOverlay', function (NormalizePointables) { | |
| return { | |
| restrict: 'EACM', | |
| transclude: true, | |
| controller: function () {}, | |
| link: function (scope, element, attrs, controller) { | |
| scope.offsetHeight = controller.offsetHeight = element[0].offsetHeight; | |
| scope.offsetWidth = controller.offsetWidth = element[0].offsetWidth; | |
| scope.getRelativePosition = NormalizePointables.get(); | |
| var getElementBehindPoint = function (behind, x, y) { | |
| var originalDisplay = behind.css('display'); | |
| behind.css('display', 'none'); | |
| var element = angular.element($document[0].elementFromPoint(x, y)); | |
| behind.css('display', originalDisplay); | |
| return element; | |
| }; | |
| }, | |
| templateUrl: 'src/view/leapOverlay.tpl.html' | |
| }; | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 'use strict'; | |
| /** | |
| * @ngdoc overview | |
| * @name angularLeapUi | |
| * | |
| * @description | |
| * The main module which holds everything together. | |
| */ | |
| angular.module('angularLeapUi', ['angularLeap']); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 'use strict'; | |
| angular.module('angularLeapUi') | |
| .factory('screenPosition', function ($interval, leap) { | |
| var currentPosition = {}; | |
| $interval(50, function () { | |
| var frame = leap.getLastFrame(); | |
| var interactionBox = frame.interactionBox; | |
| currentPosition.x = frame.pointable.tipPosition[0] / (( +(frame.pointable.tipPosition[0] - interactionBox.center[0])) ); | |
| }); | |
| return { | |
| getCurrentPosition: function () { | |
| return currentPosition; | |
| } | |
| }; | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 'use strict'; | |
| angular.module('angularLeapUi') | |
| .factory('NormalizePointables', function ($interval, leap) { | |
| var normalizedPointables = []; | |
| var updateFn = function () { | |
| var frame = leap.getLastFrame(); | |
| var interactionBox = frame.interactionBox; | |
| normalizedPointables.length = 0; | |
| angular.forEach(frame.pointables, function (pointable) { | |
| normalizedPointables.push(interactionBox.normalizePoint(pointable.tipPosition, true)); | |
| }); | |
| return normalizedPointables; | |
| }; | |
| $interval(updateFn, 50); | |
| return{ | |
| get: function () { | |
| return normalizedPointables; | |
| } | |
| }; | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div> | |
| <div ng-transclude></div> | |
| <div ng-repeat="pointable in getRelativePosition track by $index" | |
| style="background-color:red; | |
| border-radius: 50%; | |
| width: {{ pointable[2] * 100}}px; | |
| height: {{ pointable[2] * 100}}px; | |
| position: absolute; | |
| left:{{ pointable[0] * offsetWidth }}px; | |
| bottom:{{ pointable[1] * offsetHeight}}px;"> | |
| </div> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment