Skip to content

Commit

Permalink
big refactored to be more iron-selector API compliant (no more intern…
Browse files Browse the repository at this point in the history 
…al function used), remove iron-last-selected class, etc...
  • Loading branch information
@MeTaNoV
MeTaNoV committed Apr 1, 2016
1 parent 95b3544 commit f7f30c9
Show file tree
Hide file tree
Showing 3 changed files with 194 additions and 150 deletions.
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "iron-swipeable-pages",
"version": "1.2.0",
"version": "1.2.1",
"authors": [
"Pascal Gula aka MeTaNoV <[email protected]>"
],
Expand Down
124 changes: 80 additions & 44 deletions demo/conditional.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,26 +23,15 @@
@apply(--layout-vertical);
}

iron-swipeable-pages {
@apply(--layout-flex);
}

iron-swipeable-pages > * {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
cursor: default;
}

div {
color: white;
font-size: 2rem;
span {
background: var(--paper-grey-500);
@apply(--paper-font-title);
padding: 8px;
}

#checkboxContainer {
#checkboxContainer1, #checkboxContainer2 {
@apply(--layout-horizontal);
@apply(--layout-center-justified);
@apply(--layout-around-justified);
}

paper-checkbox:nth-child(1) {
Expand All @@ -65,52 +54,99 @@
--paper-checkbox-label-color: var(--paper-purple-500);
}

iron-swipeable-pages > div:nth-child(1) {
background: var(--paper-red-500);
iron-swipeable-pages {
@apply(--layout-flex);
}

iron-swipeable-pages > div:nth-child(3) {
background: var(--paper-blue-500);
iron-swipeable-pages > * {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
cursor: default;
height: 100%;
}

iron-swipeable-pages > div:nth-child(5) {
background: var(--paper-orange-500);
div {
color: white;
font-size: 2rem;
}

iron-swipeable-pages > div:nth-child(7) {
background: var(--paper-green-500);
iron-swipeable-pages > div {
background: var(--paper-grey-500);
@apply(--layout-flex);
@apply(--layout-horizontal);
@apply(--layout-center-center);
}

iron-swipeable-pages > div:nth-child(9) {
.red {
background: var(--paper-red-500);
}
.blue {
background: var(--paper-blue-500);
}
.orange {
background: var(--paper-orange-500);
}
.green {
background: var(--paper-green-500);
}
.purple {
background: var(--paper-purple-500);
}

</style>
</head>
<body>
<template is="dom-bind">
<div id="checkboxContainer">
<paper-checkbox checked="{{!page1}}"> page 1</paper-checkbox>
<paper-checkbox checked="{{!page2}}"> page 2</paper-checkbox>
<paper-checkbox checked="{{!page3}}"> page 3</paper-checkbox>
<paper-checkbox checked="{{!page4}}"> page 4</paper-checkbox>
<paper-checkbox checked="{{!page5}}"> page 5</paper-checkbox>
<span>You can select which page will be displayed (dom-if do NOT restamp)</span>
<div id="checkboxContainer1">
<paper-checkbox checked="{{!page11}}"> page 1</paper-checkbox>
<paper-checkbox checked="{{!page12}}"> page 2</paper-checkbox>
<paper-checkbox checked="{{!page13}}"> page 3</paper-checkbox>
<paper-checkbox checked="{{!page14}}"> page 4</paper-checkbox>
<paper-checkbox checked="{{!page15}}"> page 5</paper-checkbox>
</div>
<iron-swipeable-pages selected="0" threshold="0.1" force-update>
<template is="dom-if" if="[[page11]]">
<div class="red">Page 1</div>
</template>
<template is="dom-if" if="[[page12]]">
<div class="blue">Page 2</div>
</template>
<template is="dom-if" if="[[page13]]">
<div class="orange">Page 3</div>
</template>
<template is="dom-if" if="[[page14]]">
<div class="green">Page 4</div>
</template>
<template is="dom-if" if="[[page15]]">
<div class="purple">Page 5</div>
</template>
</iron-swipeable-pages>
<span>You can select which page will be displayed (dom-if DO restamp)</span>
<div id="checkboxContainer2">
<paper-checkbox checked="{{!page21}}"> page 1</paper-checkbox>
<paper-checkbox checked="{{!page22}}"> page 2</paper-checkbox>
<paper-checkbox checked="{{!page23}}"> page 3</paper-checkbox>
<paper-checkbox checked="{{!page24}}"> page 4</paper-checkbox>
<paper-checkbox checked="{{!page25}}"> page 5</paper-checkbox>
</div>
<iron-swipeable-pages selected="0" threshold="0.1" check-display>
<template is="dom-if" if="[[page1]]">
<div>Page 1</div>
<iron-swipeable-pages selected="0" threshold="0.1" force-update>
<template is="dom-if" if="[[page21]]" restamp>
<div class="red">Page 1</div>
</template>
<template is="dom-if" if="[[page2]]">
<div>Page 2</div>
<template is="dom-if" if="[[page22]]" restamp>
<div class="blue">Page 2</div>
</template>
<template is="dom-if" if="[[page3]]">
<div>Page 3</div>
<template is="dom-if" if="[[page23]]" restamp>
<div class="orange">Page 3</div>
</template>
<template is="dom-if" if="[[page4]]">
<div>Page 4</div>
<template is="dom-if" if="[[page24]]" restamp>
<div class="green">Page 4</div>
</template>
<template is="dom-if" if="[[page5]]">
<div>Page 5</div>
<template is="dom-if" if="[[page25]]" restamp>
<div class="purple">Page 5</div>
</template>
</iron-swipeable-pages>
</template>
Expand Down
Loading

0 comments on commit f7f30c9

Please sign in to comment.