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
| <link rel="import" href="../../bower_components/polymer/polymer.html"> | |
| <polymer-element name="" attributes="" extends="" noscript="" constructor=""> | |
| <template> | |
| <style> | |
| :host { |
simplesthing
/ gist:c36c675d0b9f00870235
Created
January 26, 2015 00:31
getting-started-with-web-components Hello World template
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
| <template> | |
| <style> | |
| :host { | |
| display: block; | |
| } | |
| #container { | |
| min-width:100px; | |
| min-height:100px; | |
| margin: 50px auto; | |
| text-align: center; |
simplesthing
/ gist:bd5a7410703fbd9b5af9
Created
January 26, 2015 00:40
getting-started-with-web-components Hello World final code
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
| <link rel="import" href="../../bower_components/polymer/polymer.html"> | |
| <polymer-element name="hello-world" constructor="HelloWorld"> | |
| <template> | |
| <style> | |
| :host { | |
| display: block; | |
| } | |
| #container { | |
| min-width:100px; | |
| min-height:100px; |
simplesthing
/ gist:7c40d2c199d91ea303fb
Created
January 30, 2015 18:21
getting-started-with-web-components index.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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Hello World</title> | |
| <script src="../../bower_components/webcomponentsjs/webcomponents.js"></script> | |
| <link rel="import" href="hello-world.html"> | |
| </head> | |
| <body> | |
| <hello-world></hello-world> |
simplesthing
/ gist:b33a953e9c8864cda3d4
Last active
August 29, 2015 14:18
timeline code to be optimized
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'; | |
| app | |
| .directive('journeyStep', function ($window, $state, $rootScope, $document, _){ | |
| return { | |
| restrict: 'AE', | |
| scope: { | |
| challenge: '=', | |
| index: '@', | |
| total: '@', |
simplesthing
/ gist:59c1582ab7c253986dc0
Created
March 31, 2015 22:38
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
| <nav class="c-header navigation-dark" ng-include="'modules/navigation/header-authenticated.html'" role="navigation"></nav> | |
| <coach-mark config="coachMarks.journey" on-skip="coachMarks.setNonce('journey')" on-finish="coachMarks.setNonce('journey')"></coach-mark> | |
| <div id="journey-wrapper"> | |
| <div class="journey" ng-class="{'ready' : !coachMarks.journey.start}"> | |
| <article ng-repeat="ch in challenges" | |
| class="challenge pointer" | |
| journey-step | |
| challenge="ch" |
simplesthing
/ gist:b4848fae864c8e5279f8
Created
April 1, 2015 19:00
set css for each repeated section with jQuery
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
| angular.element('.challenge').each(function (){ | |
| var self = angular.element(this); | |
| // determine direction of slide and apply styles | |
| if(self.data('position') > scope.index) { | |
| self.addClass('right'); | |
| self.css({ | |
| 'display': 'block', | |
| 'width': avgWidth + 'px', | |
| 'float': 'left' | |
| }); |
simplesthing
/ gist:d9d8325bc2f6237865a1
Created
April 1, 2015 19:02
set css for each repeated section JS
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
| _.map(document.querySelectorAll('.challenge'), function(element) { | |
| var position; | |
| position = element.getAttribute('data-position'); | |
| // determine direction of slide and apply styles | |
| if(position > scope.index){ // slide right | |
| element.classList.add('right'); | |
| element.setAttribute('style', 'display:block; width:' + avgWidth + 'px; float:left;'); | |
| } | |
| if(position < scope.index) { // slide left | |
| element.classList.add('left'); |
simplesthing
/ gist:e54942d3630a3ab9eab6
Created
April 1, 2015 20:11
wrap in a directional floated parent jQuery
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
| angular.element('.right').wrapAll('<div style="float: right; height:100%;"></div>'); | |
| angular.element('.left').wrapAll('<div style="float: left; height: 100%; "></div>'); |
simplesthing
/ gist:69077100b6c257b59991
Last active
August 29, 2015 14:18
wrap in a directional floated parent JS
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
| var rightSlideContainer, leftSlideContainer, rightSlideContent, leftSLideContent, journeyContainer, selectedChallenge; | |
| // create right and left slider wrappers | |
| rightSlideContainer = document.createElement('div'); | |
| rightSlideContainer.setAttribute('style', 'float: right; height:100%;'); | |
| leftSlideContainer = document.createElement('div'); | |
| leftSlideContainer.setAttribute('style', 'float: left; height: 100%;'); | |
| // get content to wrap | |
| rightSlideContent = document.querySelectorAll('.right'); |
OlderNewer