Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

removed dbucs tests =|

  • Loading branch information...
commit f87fdadb1aa54a69f03b641dfd10acdfa14f4d1a 1 parent b74f269
@pennyfx pennyfx authored
View
165 test/scroll-list.html
@@ -1,165 +0,0 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
- "http://www.w3.org/TR/html4/loose.dtd">
-<html>
-<head>
- <title>Scroll-List</title>
- <script type="text/javascript" src="../components/document.register/src/document.register.js"></script>
- <script type="text/javascript" src="../src/core.js"></script>
-
- <style>
-
- html, body {
- height: 100%;
- min-height: 100%
- }
-
- x-scroll-list {
- display: block;
- overflow: auto;
- border: 1px solid #999;
- height: 90%;
- }
-
- x-scroll-list > ul, x-scroll-list > ol {
- margin: 0;
- padding: 0;
- height: 100%;
- }
-
- x-scroll-list > ul > li, x-scroll-list > ol > li {
- padding: 4px 6px;
- background: #ccc;
- margin: 2px;
- }
-
- x-scroll-list li {
- display: none;
- }
-
- x-scroll-list li:nth-child(-n+100) {
- display: block;
- }
-
- </style>
-
-</head>
-
-<body>
-
- <input type="text" value="100"/><button id="content_button">Generate Content</button>
-
- <x-scroll-list>
- <ul id="list">
- <li>
- <div class="clearfix storyContent"><a class="actorPhoto lfloat" href="http://www.facebook.com/bethanyeggen" tabindex="-1" aria-hidden="true" data-ft="{&quot;type&quot;:60,&quot;tn&quot;:&quot;<&quot;}" data-hovercard="/ajax/hovercard/hovercard.php?id=1424139214"><img class="-cx-PRIVATE-uiSquareImage__root profilePic -cx-PRIVATE-uiSquareImage__large img" src="http://profile.ak.fbcdn.net/hprofile-ak-snc6/211289_29902675_770802461_q.jpg" alt=""></a><div class="storyInnerContent"><div class="mainWrapper"><div role="article"><h5 class="uiStreamMessage uiStreamHeadline" data-ft="{&quot;tn&quot;:&quot;:&quot;}"><div class="actorDescription uiStreamRobotextBeforeMessage"><a class="passiveName" href="http://www.facebook.com/" data-ft="{&quot;tn&quot;:&quot;;&quot;}" data-hovercard="/ajax/hovercard/user.php?id=0">Item 0</a> shared <a class="text_caption" href="http://www.facebook.com/IFeakingLoveScience?ref=stream" data-ft="{&quot;tn&quot;:&quot;P&quot;}" data-hovercard="/ajax/hovercard/page.php?id=367116489976035">Describing item 0</a>s <a class="pronoun-link " href="http://www.facebook.com/photo.php?fbid=535356253152057&amp;set=a.456449604376056.98921.367116489976035&amp;type=1" data-ft="{&quot;tn&quot;:&quot;A&quot;}">photo</a>.</div></h5><h5 class="uiStreamMessage userContentWrapper" data-ft="{&quot;type&quot;:1,&quot;tn&quot;:&quot;K&quot;}"><span class="messageBody"><span class="userContent">Ha!</span></span></h5><div class="mvm uiStreamAttachments fbMainStreamAttachment" data-ft="{&quot;type&quot;:10,&quot;tn&quot;:&quot;H&quot;}"><div class="clearfix photoRedesign"><a class="uiPhotoThumb photoRedesignAspect" href="http://www.facebook.com/photo.php?fbid=535356253152057&amp;set=a.456449604376056.98921.367116489976035&amp;type=1&amp;ref=nf" data-ft="{&quot;type&quot;:41,&quot;tn&quot;:&quot;E&quot;}" rel="theater" ajaxify="http://www.facebook.com/photo.php?fbid=535356253152057&amp;set=a.456449604376056.98921.367116489976035&amp;type=1&amp;ref=nf&amp;src=http%3A%2F%2Fsphotos-b.xx.fbcdn.net%2Fhphotos-prn1%2F59545_535356253152057_1558808218_n.jpg&amp;size=500%2C400&amp;theater"><img class="img" src="http://sphotos-b.xx.fbcdn.net/hphotos-prn1/s480x480/59545_535356253152057_1558808218_n.jpg" alt="Theres always an explanation." height="318" width="398"></a></div><div class="shareSubtext fcg">Theres always an explanation.</div></div><form rel="async" class="live_153134281505336_316526391751760 commentable_item autoexpand_mode" method="post" action="/ajax/ufi/modify.php" data-live="{&quot;seq&quot;:0}" onsubmit="return window.Event &amp;&amp; Event.__inlineSubmit &amp;&amp; Event.__inlineSubmit(this,event)" id="u_ps_0_0_2b"><input name="charset_test" value="€,´,€,´,?,?,?" type="hidden"><input name="fb_dtsg" value="AQCs63Oz" autocomplete="off" type="hidden"><input autocomplete="off" name="feedback_params" value="{&quot;actor&quot;:&quot;1424139214&quot;,&quot;target_fbid&quot;:&quot;153134281505336&quot;,&quot;target_profile_id&quot;:&quot;1424139214&quot;,&quot;type_id&quot;:&quot;17&quot;,&quot;assoc_obj_id&quot;:&quot;&quot;,&quot;source_app_id&quot;:&quot;0&quot;,&quot;extra_story_params&quot;:[],&quot;content_timestamp&quot;:&quot;1359002059&quot;,&quot;check_hash&quot;:&quot;AQCdjfCJZVHXPXby&quot;,&quot;source&quot;:&quot;13&quot;}" type="hidden"><input autocomplete="off" name="data_only_response" value="1" type="hidden"><span class="uiStreamFooter"><span class="UIActionLinks UIActionLinks_bottom" data-ft="{&quot;tn&quot;:&quot;=&quot;,&quot;type&quot;:20}"><span><a href="#" aria-live="polite" title="Like this item" data-ft="{&quot;tn&quot;:&quot;>&quot;}" class="UFILikeLink" id=".reactRoot[19]"><span id=".reactRoot[19].0">Like</span></a></span> · <label class="uiLinkButton comment_link" title="Leave a comment"><input data-ft="{&quot;type&quot;:24,&quot;tn&quot;:&quot;S&quot;}" value="Comment" onclick="return fc_click(this);" type="button"></label> · <a class="share_action_link" href="/ajax/sharer/?s=99&amp;appid=2309869772&amp;p%5B0%5D=1424139214&amp;p%5B1%5D=153134281505336" rel="dialog" data-ft="{&quot;tn&quot;:&quot;J&quot;,&quot;type&quot;:25}" title="Send this to friends or post it on your timeline." role="button">Share</a> · </span><span class="uiStreamSource" data-ft="{&quot;type&quot;:26,&quot;tn&quot;:&quot;N&quot;}"><a href="/bethanyeggen/posts/153134281505336"><abbr title="Wednesday, January 23, 2013 at 8:34pm" data-utime="1359002060" class="timestamp livetimestamp">15 hours ago</abbr></a></span> · <a data-hover="tooltip" class="uiStreamPrivacy inlineBlock fbStreamPrivacy fbPrivacyAudienceIndicator" href="#" id="u_ps_0_0_2c" aria-label="Shared with: Bethanys friends"><i class="lock img sp_6b0izw sx_28d968"></i></a></span><div><div class="uiUfi UFIContainer" id="u_ps_0_0_21"><ul data-ft="{&quot;tn&quot;:&quot;]&quot;}" class="UFIList" id=".reactRoot[20]"><li class="UFIArrow" id=".reactRoot[20].[0]"><i id=".reactRoot[20].[0].0"></i></li><li class="UFIRow UFILikeSentence" id=".reactRoot[20].[1][0]"><div class="clearfix" id=".reactRoot[20].[1][0].0"><div class="lfloat" id=".reactRoot[20].[1][0].0.[0]"><a href="#" tabindex="-1" title="Like this item" class="img -cx-PRIVATE-uiImageBlock__image -cx-PRIVATE-uiImageBlock__smallImage UFILikeThumb UFIImageBlockImage" id=".reactRoot[20].[1][0].0.[0].0"><i class="UFILikeIcon" id=".reactRoot[20].[1][0].0.[0].0.0"></i></a></div><div id=".reactRoot[20].[1][0].0.[1]"><div class="UFIImageBlockContent -cx-PRIVATE-uiFlexibleBlock__flexibleContent -cx-PRIVATE-uiImageBlock__smallContent" id=".reactRoot[20].[1][0].0.[1].0"><span id=".reactRoot[20].[1][0].0.[1].0.0"><a href="http://www.facebook.com/Speedy.Tigger" data-hovercard="/ajax/hovercard/hovercard.php?id=872795248" id=".reactRoot[20].[1][0].0.[1].0.0.[0]">Jennifer Rayann</a><span id=".reactRoot[20].[1][0].0.[1].0.0.[1]"> and </span><a rel="dialog" ajaxify="/ajax/browser/dialog/likes?id=153134281505336" href="/browse/likes?id=153134281505336" data-hover="tooltip" data-tooltip-alignh="center" data-tooltip-uri="/ajax/like/tooltip.php?comment_fbid=153134281505336&amp;comment_from=29901357&amp;seen_user_fbids[0]=872795248" id=".reactRoot[20].[1][0].0.[1].0.0.[2]"><span id=".reactRoot[20].[1][0].0.[1].0.0.[2].0">12 others</span></a><span id=".reactRoot[20].[1][0].0.[1].0.0.[3]"> like this.</span></span></div></div></div></li><li data-ft="{&quot;tn&quot;:&quot;[&quot;}" class="UFIRow UFIAddComment" id=".reactRoot[20].[1][3]"><div class="clearfix UFIMentionsInputWrap" id=".reactRoot[20].[1][3].0"><div class="lfloat" id=".reactRoot[20].[1][3].0.[0]"><img src="http://profile.ak.fbcdn.net/hprofile-ak-ash4/261076_29901357_78989931_q.jpg" alt="" class="img -cx-PRIVATE-uiImageBlock__image -cx-PRIVATE-uiImageBlock__smallImage img UFIActorImage -cx-PRIVATE-uiSquareImage__medium UFIImageBlockImage" id=".reactRoot[20].[1][3].0.[0].0"></div><div id=".reactRoot[20].[1][3].0.[1]"><div class="UFIImageBlockContent -cx-PRIVATE-uiFlexibleBlock__flexibleContent -cx-PRIVATE-uiImageBlock__smallContent" id=".reactRoot[20].[1][3].0.[1].0"><div id=".reactRoot[20].[1][3].0.[1].0.0"><div class="uiMentionsInput textBoxContainer ReactLegacyMentionsInput" id=".reactRoot[20].[1][3].0.[1].0.0.[0]"><div class="highlighter" id=".reactRoot[20].[1][3].0.[1].0.0.[0].[0]"><div id=".reactRoot[20].[1][3].0.[1].0.0.[0].[0].0"><span class="highlighterContent hidden_elem" id=".reactRoot[20].[1][3].0.[1].0.0.[0].[0].0.0"></span></div></div><div class="uiTypeahead mentionsTypeahead" id=".reactRoot[20].[1][3].0.[1].0.0.[0].[1]"><div class="wrap" id=".reactRoot[20].[1][3].0.[1].0.0.[0].[1].0"><input class="hiddenInput" id=".reactRoot[20].[1][3].0.[1].0.0.[0].[1].0.[0]" type="hidden"><div class="innerWrap" id=".reactRoot[20].[1][3].0.[1].0.0.[0].[1].0.[1]"><textarea name="add_comment_text" title="Write a comment..." placeholder="Write a comment..." class="textInput mentionsTextarea uiTextareaAutogrow uiTextareaNoResize UFIAddCommentInput DOMControl_placeholder" id=".reactRoot[20].[1][3].0.[1].0.0.[0].[1].0.[1].0">Write a comment...</textarea></div></div></div><input value="" class="mentionsHidden" id=".reactRoot[20].[1][3].0.[1].0.0.[0].[2]" type="hidden"></div></div></div></div></div></li></ul></div></div></form></div></div><div class="-cx-PRIVATE-uiInlineBlock__root mlm uiPopover highlightSelector uiStreamHide" data-ft="{&quot;type&quot;:55,&quot;tn&quot;:&quot;V&quot;}" id="u_ps_0_0_19"><a class="highlightSelectorButton uiStreamContextButton -cx-PRIVATE-uiPopover__trigger" href="#" aria-haspopup="true" aria-expanded="false" rel="toggle" id="u_ps_0_0_1a" role="button" aria-owns="u_g_0" aria-controls="js_3">Options</a></div></div></div>
- </li>
- </ul>
- </x-scroll-list>
-
-</body>
-
- <script type="text/javascript">
-
- var button = document.getElementById('content_button');
- var list = document.getElementById('list');
- var li = list.firstElementChild.outerHTML;
-
- button.addEventListener('click', function(){
- generateContent(this.previousElementSibling.value);
- }, false);
-
- function generateContent(number){
- var content = '';
- var loop = number * 1;
- while (loop--) content += li;
- list.innerHTML = content;
- console.log('finished content generation');
- };
-
-
-
- (function(){
- var lists = [], frameID = null;
-
- function fillList(list){
- //while ()
- };
-
- function renderList(list){
- if (list.firstElementChild) {
-
- }
- };
-
- function frameCallback(){
- lists.forEach(renderList);
- frameID = null;
- };
-
- function queueFrame(list){
- if (lists.indexOf(list) == -1) lists.push(list);
- if (!frameID) frameID = (window.requestAnimationFrame || window[xtag.prefix.lowercase + 'RequestAnimationFrame'])(frameCallback);
- };
-
- xtag.register('x-scroll-list', {
- lifecycle: {
- created: function(e){
- console.log(this);
- if (this.scrollHeight > this.firstElementChild.scrollHeight) queueFrame(this, e);
- }
- },
- methods: {
- loadNext: function(remove){
- showItem(this.lastItem ? this.lastItem.getAttribute('item-index') * 1 + 1 : 0, 'last');
- if (remove && this.firstItem) {
- hideItem(this.firstItem);
- this.firstItem = this.firstItem.nextElementSibling;
- }
- },
- loadPrevious: function(){
- showItem(this.firstItem ? this.firstItem.getAttribute('item-index') * 1 - 1 : 0, 'first');
- if (remove && this.lastItem) {
- hideItem(this.lastItem);
- this.lastItem = this.lastItem.previousElementSibling;
- }
- },
- showItem: function(index, dir){
- var item = this.renderItem(index);
- if (item) {
- this[dir + 'Item'] = item;
- item.setAttribute('item-index', index);
- if (item.parentNode != this.firstElementChild) {
- if (direction == 'previous' && this.firstItem) {
- this.firstElementChild.insertBefore(item, this.firstItem);
- }
- else this.firstElementChild.appendChild(item);
- }
- }
- },
- hideItem: function(item){
- item.style.display = 'none';
- },
- renderItem: function(index){
- var item = this.firstElementChild.children[index];
- item.style.display = '';
- return item;
- }
- },
- events: {
- overflow: function(e){
- console.log('overflow', e);
- },
- underflow: function(e){
- console.log('underflow', e);
- queueFrame(this, e);
- },
- scroll: function(e){
- queueFrame(this, e);
- }
- }
- });
-
- })();
- </script>
-
-</html>
View
24 test/switch/REAME.md
@@ -1,24 +0,0 @@
-
-## Syntax
-
-Flipbox allows you to place two elements back-to-back and then flip between them.
-
-```
- <x-flipbox>
- <x-card>
- <div>Front</div>
- <div>Back</div>
- </x-card>
- </x-flipbox>
-```
-
-## Usage
-
-```
-
- var flipbox = document.createElement('x-flipbox');
- flipbox.flipDirection = "up"; // up, down, left, right
- flipbox.flipped = true;
-```
-
-
View
BIN  test/switch/demo/bg.png
Deleted file not rendered
View
112 test/switch/demo/demo.html
@@ -1,112 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
- <head>
- <meta charset="utf-8" />
-
- <title>Growbox Demo - X-Tag</title>
-
- <link rel="stylesheet" type="text/css" href="../x-switch.css"/>
-
- <script type="text/javascript" src="../../../../web-components/src/document.register.js"></script>
- <script type="text/javascript" src="../../../src/core.js"></script>
- <script type="text/javascript" src="../x-switch.js"></script>
-
- <style type="text/css">
-
-
- body {
- background: url(bg.png);
- }
-
- x-switch {
- margin: 100px auto 200px;
- box-shadow: 0 0 115px 10px rgba(255, 255, 255, 0.45);
- }
-
- /*** Cover Display Styles ***/
-
- x-switch[type="cover"] {
- padding: 2px 2px 3px;
- border-color: #111 #333 #555;
- border-radius: 4px;
- text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
- }
-
- x-switch[type="cover"] .x-switch-knob {
- border-radius: 3px;
- }
-
- .x-switch-cover .x-switch-knob:before {
- content: " ";
- display: block;
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- border: 1px solid;
- border-radius: 3px;
- border-color: rgba(255,255,255,0.25) rgba(255,255,255,0.075) rgba(0,0,0,0.25);
- background: -webkit-linear-gradient(top, rgba(255,255,255,255,0.2), rgba(0,0,0,0.1));
- background: -moz-linear-gradient(top, rgba(255,255,255,0.2), rgba(255,255,255,0.1));
- background: -ms-linear-gradient(top, rgba(255,255,255,0.2), rgba(255,255,255,0.1));
- background: -o-linear-gradient(top, rgba(255,255,255,0.2), rgba(255,255,255,0.1));
- background: linear-gradient(top, rgba(255,255,255,0.2), rgba(255,255,255,0.1));
- }
-
- x-switch[type="cover"] .x-switch-on,
- x-switch[type="cover"] .x-switch-off {
- padding: 3px 4px;
- color: rgba(0,0,0,0.7);
- -webkit-transition: color 0.3s ease;
- -moz-transition: color 0.3s ease;
- -ms-transition: color 0.3s ease;
- -o-transition: color 0.3s ease;
- transition: color 0.3s ease;
- }
-
- x-switch[type="cover"][state="on"] .x-switch-off,
- x-switch[type="cover"][state="off"] .x-switch-on {
- color: rgba(255, 255, 255, 0.25);
- }
-
- /*** Slider Display Styles ***/
-
- x-switch[type="slider"] {
- border-color: #222 #333 #444;
- box-shadow: 0 0 115px 10px rgba(255, 255, 255, 0.45), 0 1px 2px 0 rgba(0, 0, 0, 0.5) inset
- }
-
- .x-switch-slider .x-switch-knob {
- width: 24px;
- background: -moz-linear-gradient(top, #f0f0f0, #aaa);
- box-shadow: 0 1px 3px 0px rgba(0,0,0,0.7);
- }
-
- .x-switch-slider .x-switch-on,
- .x-switch-slider .x-switch-off {
- max-width: 55px;
- padding: 4px 0;
- }
-
- </style>
- </head>
-
-<body>
-
- <x-switch type="cover" onText="ON" offText="OFF"></x-switch>
- <x-switch type="slider" onText="Active" offText="Inactive" rounded="true"></x-switch>
-</body>
-
-<script type="text/javascript">
-
- document.addEventListener('DOMComponentsLoaded', function(){
-
-
-
- }, false);
-
-</script>
-
-</html>
View
211 test/switch/x-switch.css
@@ -1,211 +0,0 @@
-
-x-switch {
- display: table;
- position: relative;
- cursor: default;
- overflow: hidden;
- border: 1px solid;
- font-family: monospace;
-}
-
-x-switch input {
- position: absolute;
- border: none;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- margin: 0;
- padding: 0;
- opacity: 0;
- z-index: 1;
- cursor: pointer;
-}
-
-x-switch > div,
-x-switch > div > div > div {
- display: table;
- position: relative;
- width: 100%;
- margin: 0;
- border: 0;
- padding: 0;
- text-align: center;
- border-collapse: collapse;
-}
-
-.x-switch-on,
-.x-switch-off,
-x-switch label {
- display: table-cell;
- vertical-align: middle;
-}
-
-.x-switch-on,
-.x-switch-off {
- position: relative;
- width: 50%;
- overflow: hidden;
-}
-
-x-switch label {
- width: 100%;
- white-space: nowrap;
-}
-
-.x-switch-on-text:last-child,
-.x-switch-off-text:last-child {
- height: 0 !important;
- margin-top: 0 !important;
- margin-bottom: 0 !important;
- padding-top: 0 !important;
- padding-bottom: 0 !important;
- border-top: 0 !important;
- border-bottom: 0 !important;
- overflow: hidden !important;
- visibility: hidden !important;
-}
-
-.x-switch-knob {
- overflow: hidden;
- -webkit-transition: -webkit-transform 0.3s ease, background-color 0.3s ease;
- -moz-transition: -moz-transform 0.3s ease, background-color 0.3s ease;
- -ms-transition: -ms-transform 0.3s ease, background-color 0.3s ease;
- -o-transition: -o-transform 0.3s ease, background-color 0.3s ease;
- transition: transform 0.3s ease, background-color 0.3s ease;
-}
-
-x-switch > div > .x-switch-knob {
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- width: 50%;
- padding: 0;
- background: #bbb;
-}
-
-/*** Type: COVER ***/
-
- .x-switch-cover .x-switch-on {
- -webkit-transform: translate(100%);
- -moz-transform: translate(100%);
- -ms-transform: translate(100%);
- -o-transform: translate(100%);
- transform: translate(100%);
- }
-
- .x-switch-cover .x-switch-off {
- -webkit-transform: translate(-100%);
- -moz-transform: translate(-100%);
- -ms-transform: translate(-100%);
- -o-transform: translate(-100%);
- transform: translate(-100%);
- }
-
- x-switch[state="off"] .x-switch-cover .x-switch-knob {
- -webkit-transform: translate(0%);
- -moz-transform: translate(0%);
- -ms-transform: translate(0%);
- -o-transform: translate(0%);
- transform: translate(0%);
- }
-
- x-switch[state="on"] .x-switch-cover .x-switch-knob {
- -webkit-transform: translate(100%);
- -moz-transform: translate(100%);
- -ms-transform: translate(100%);
- -o-transform: translate(100%);
- transform: translate(100%);
- }
-
- x-switch[state="on"] .x-switch-cover .x-switch-knob {
- background: limegreen;
- }
-
- x-switch[state="off"] .x-switch-cover .x-switch-knob {
- background: tomato;
- }
-
-
-/*** Type: SLIDER ***/
-
- .x-switch-slider {
- position: relative;
- width: 200%;
- left: -100%;
- z-index: -1;
- -webkit-transition: -webkit-transform 0.3s ease, left 0.3s ease;
- -moz-transition: -moz-transform 0.3s ease, left 0.3s ease;
- -ms-transition: -ms-transform 0.3s ease, left 0.3s ease;
- -o-transition: -o-transform 0.3s ease, left 0.3s ease;
- transition: transform 0.3s ease, left 0.3s ease;
- }
-
- .x-switch-slider > div .x-switch-knob {
- -webkit-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease, border-width 0.3s ease;
- -moz-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease, border-width 0.3s ease;
- -ms-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease, border-width 0.3s ease;
- -o-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease, border-width 0.3s ease;
- transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease, border-width 0.3s ease;
- }
-
- .x-switch-slider > .x-switch-knob {
- position: absolute;
- left: 50%;
- height: 100%;
- z-index: 1;
- -webkit-transform: translate(0%);
- -moz-transform: translate(0%);
- -ms-transform: translate(0%);
- -o-transform: translate(0%);
- transform: translate(0%);
- -webkit-transition: -webkit-transform 0.3s ease, left 0.3s ease;
- -moz-transition: -moz-transform 0.3s ease, left 0.3s ease;
- -ms-transition: -ms-transform 0.3s ease, left 0.3s ease;
- -o-transition: -o-transform 0.3s ease, left 0.3s ease;
- transition: transform 0.3s ease, left 0.3s ease;
- }
-
- x-switch[state="on"] .x-switch-slider {
- left: 0%;
- }
-
- x-switch[state="on"] .x-switch-slider > .x-switch-knob {
- -webkit-transform: translate(-100%);
- -moz-transform: translate(-100%);
- -ms-transform: translate(-100%);
- -o-transform: translate(-100%);
- transform: translate(-100%);
- }
-
- x-switch[state="on"] .x-switch-off .x-switch-knob,
- x-switch[state="off"] .x-switch-on .x-switch-knob {
- width: 0;
- margin-left: 0;
- margin-right: 0;
- padding-left: 0;
- padding-right: 0;
- border-left-width: 0;
- border-right-width: 0;
- }
-
- x-switch[type="slider"]:not([rounded]),
- x-switch[type="slider"][rounded="true"],
- x-switch[type="slider"]:not([rounded]) .x-switch-rounded,
- x-switch[type="slider"][rounded="true"] .x-switch-rounded {
- -webkit-border-radius: 1000px;
- -moz-border-radius: 1000px;
- -ms-border-radius: 1000px;
- -o-border-radius: 1000px;
- border-radius: 1000px;
- }
-
- x-switch[type="slider"] .x-switch-on-background {
- background: limegreen;
- }
-
- x-switch[type="slider"] .x-switch-off-background {
- background: tomato;
- }
-
View
88 test/switch/x-switch.js
@@ -1,88 +0,0 @@
-
-(function(){
-
- var types = ['cover', 'slider'],
- template = '<div class="x-switch-cover x-switch-off-background">' +
- '<div class="x-switch-knob x-switch-rounded"></div>' +
- '<div class="x-switch-on x-switch-on-background x-switch-rounded">' +
- '<div>' +
- '<label>' +
- '<div class="x-switch-on-text">On</div>' +
- '<div class="x-switch-off-text">Off</div>' +
- '</label>' +
- '<div><div class="x-switch-knob x-switch-rounded"></div></div>' +
- '</div>' +
- '</div>' +
- '<div class="x-switch-off x-switch-off-background x-switch-rounded">' +
- '<div>' +
- '<div><div class="x-switch-knob x-switch-rounded"></div></div>' +
- '<label>' +
- '<div class="x-switch-off-text">Off</div>' +
- '<div class="x-switch-on-text">On</div>' +
- '</label>' +
- '</div>' +
- '</div>' +
- '</div><input type="checkbox" />';
-
- function textSetter(state){
- var obj = {
- get: function(){
- return this.getAttribute(state + 'text') || state;
- }
- };
- obj['set:attribute(' + state + 'text)'] = function(text){
- xtag.query(this, '.x-switch-' + state + '-text').forEach(function(el){
- el.textContent = text;
- });
- }
- return obj;
- }
-
- xtag.register('x-switch', {
- lifecycle: {
- created: function(){
- this.innerHTML = template;
- this.type = this.type;
- this.onText = this.onText;
- this.offText = this.offText;
- this.toggle(this.state || 'off');
- }
- },
- methods: {
- toggle: function(state){
- this.state = state || this.state == 'on' ? 'off' : 'on';
- }
- },
- events:{
- 'change': function(e){
- e.target.focus();
- this.toggle();
- }
- },
- accessors: {
- onText: textSetter('on'),
- offText: textSetter('off'),
- type: {
- get: function(){
- return this.getAttribute('type') || 'cover';
- },
- set: function(type){
- var _type = types.indexOf(type) > -1 ? type : 'cover';
- this.setAttribute('type', _type);
- this.firstElementChild.className = ('x-switch-' + _type);
- }
- },
- state: {
- get: function(){
- return this.getAttribute('state') || 'off';
- },
- 'set:attribute': function(state){
- state = state == 'on' ? 'on' : 'off';
- this.setAttribute('state', state, true);
- this.firstElementChild.className = 'x-switch-' + this.type + ' x-switch-' + (state == 'on' ? 'off' : 'on') + '-background';
- }
- },
- }
- });
-
-})();
View
28 test/switch/xtag.json
@@ -1,28 +0,0 @@
-{
- "name": "Flipbox",
- "tagName": "x-flipbox",
- "version": "0.0.3",
- "author": "Arron Schaar, Daniel Buchner",
- "description": "The flipbox tag allows you to flip a content element with a CSS Animation to the other side to view additional content. An example use of flipbox, would be to flip and app's content to reveal a settings panel",
- "images": [],
- "categories": ["structural"],
- "demo": "demo",
- "compatibility": {
- "firefox": 5,
- "chrome": 4,
- "opera": 12,
- "android": 2.1,
- "ios": 4
- },
- "documentation":{
- "getters": {
- "flipDirection": "Returns the current flip direction.",
- "flipped": "Returns true if flipped."
-
- },
- "setters": {
- "flipDirection": "The direction to flip. Valid values are right, left, up, and down.",
- "flipped": "Sets if the box is flipped or not."
- }
- }
-}
Please sign in to comment.
Something went wrong with that request. Please try again.