This repository has been archived by the owner on Aug 10, 2021. It is now read-only.
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Gary Paige
committed
Apr 30, 2015
1 parent
c27ba5a
commit c15353d
Showing
7 changed files
with
365 additions
and
153 deletions.
There are no files selected for viewing
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| 'use strict'; | ||
|
|
||
| /** | ||
| * @ngdoc directive | ||
| * @name iLayers.directive:about | ||
| * @description | ||
| * # about | ||
| */ | ||
| angular.module('iLayers') | ||
| .directive('about', ['$timeout', '$templateRequest', function ($timeout, $templateRequest) { | ||
| return { | ||
| restrict: 'A', | ||
| scope: {}, | ||
| controller: function($scope) { | ||
| $templateRequest('views/about-menu.html'); | ||
| }, | ||
| link: function postLink(scope, element, attrs) { | ||
| var position = element.position(), | ||
| height = element.outerHeight(), | ||
| speed = 400; | ||
|
|
||
| scope.bindEvents = function(menu) { | ||
| menu.bind('mouseover', function() { | ||
| scope.menuActive = true; | ||
| }); | ||
| menu.bind('mouseleave', function() { | ||
| scope.menuActive = false; | ||
| scope.hideMenu(menu); | ||
| }); | ||
| }; | ||
|
|
||
| scope.unbindEvents = function(menu) { | ||
| menu.unbind('mouseover'); | ||
| menu.unbind('mouseleave'); | ||
| }; | ||
|
|
||
| scope.showMenu = function(aboutMenu) { | ||
| if (!scope.menuVisible) { | ||
| scope.bindEvents(aboutMenu); | ||
|
|
||
| aboutMenu.css('display', 'block'); | ||
| aboutMenu.animate({ | ||
| 'top': (position.top + height) + 'px', | ||
| 'opacity': 1 | ||
| }, speed, function() { | ||
| scope.menuVisible = true; | ||
| }); | ||
| } | ||
| }; | ||
|
|
||
| scope.hideMenu = function(aboutMenu) { | ||
| if (scope.menuVisible && !scope.menuActive) { | ||
| scope.unbindEvents(aboutMenu); | ||
|
|
||
| aboutMenu.animate({ | ||
| 'top': (position.top + 90) + 'px', | ||
| 'opacity': 0 | ||
| }, speed, function() { | ||
| aboutMenu.css('display','none'); | ||
| scope.menuVisible = false; | ||
| }); | ||
| } | ||
| }; | ||
|
|
||
| scope.menuVisible = false; | ||
| scope.menuActive = false; | ||
|
|
||
| element.bind('mouseover', function() { | ||
| var aboutMenu = $('ul.about'); | ||
| scope.showMenu(aboutMenu); | ||
| }); | ||
|
|
||
| element.bind('mouseleave', function() { | ||
| var aboutMenu = $('ul.about'); | ||
| $timeout(function() { | ||
| scope.hideMenu(aboutMenu); | ||
| }, 120); | ||
| }); | ||
| } | ||
|
|
||
| }; | ||
| }]); |
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| <ul class="about"> | ||
| <li> | ||
| <img class="logo" src="images/logo_image_layers.svg"> | ||
| <p class="clear strong"> | ||
| ImageLayers.io, is a CenturyLink Cloud hosted utility and CenturyLink Labs open-source project that provides a visualization in the browser of user specified Docker Images and their layers. This visualization provides key information on the composition of a Docker Image and any commonalities between them. ImageLayers.io allows Docker users to easily discover best practices for image construction, and aid in determining which images are most appropriate to use in their specific use cases. | ||
| </p> | ||
| <p> | ||
| <a href="https://github.com/CenturyLinkLabs/imagelayers-graph" target="_blank">ImageLayers UI on GitHub</a> | ||
| <a href="https://github.com/CenturyLinkLabs/imagelayers" target="_blank">ImageLayers API on GitHub</a> | ||
| </p> | ||
| <hr> | ||
| <h3>Other Projects from CenturyLink Labs</h3> | ||
| <a class="project" href="http://panamax.io" target="_blank"> | ||
| <article> | ||
| <div class="pmx-logo"></div> | ||
| <h4>Panamax</h4> | ||
| <p> | ||
| Docker Management for Humans<br> | ||
| <mark>panamax.io</mark> | ||
| </p> | ||
| </article> | ||
| </a> | ||
| <a class="project" href="http://lorry.io" target="_blank"> | ||
| <article> | ||
| <div class="lorry-logo"></div> | ||
| <h4>Lorry.io</h4> | ||
| <p> | ||
| Compose YML validator.<br> | ||
| <mark>lorry.io</mark> | ||
| </p> | ||
| </article> | ||
| </a> | ||
| <a class="project" href="http://dray.it" target="_blank"> | ||
| <article> | ||
| <div class="dray-logo"></div> | ||
| <h4>Dray</h4> | ||
| <p> | ||
| Docker Workflow Engine.<br> | ||
| <mark>dray.it</mark> | ||
| </p> | ||
| </article> | ||
| </a> | ||
| <div class="clear"></div> | ||
| <hr> | ||
| <h4> | ||
| Read tutorials and articles about these tools at <a href="http://www.centurylinklabs.com" target="_blank">centurylinklabs.com</a> | ||
| </h4> | ||
| </li> | ||
| </ul> |
Oops, something went wrong.