Skip to content

Commit

Permalink
Add config options
Browse files Browse the repository at this point in the history
* defaultTheme
* defaultSize (TODO)
* includedThemes
* excludedThemes

exclude will take out themes from include, and if include is blank, all themes are included, with
exclude removing from there as well.

If you exclude a theme, and then use it, the component will still render,
but will be transparent. The todo here is to use 'default', which probably
should always be included.
  • Loading branch information
Ilya Radchenko committed Oct 10, 2014
1 parent eaf4525 commit 7b39160
Show file tree
Hide file tree
Showing 11 changed files with 244 additions and 203 deletions.
4 changes: 3 additions & 1 deletion app/components/x-toggle.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import Ember from 'ember';
import ENV from '../config/environment';

var observer = Ember.observer;
var on = Ember.on;
var computed = Ember.computed;
var config = ENV['ember-cli-toggle'];

export default Ember.Component.extend({
tagName: 'span',
theme: 'default',
theme: config.defaultTheme || 'default',
off: 'Off',
on: 'On',
toggled: false,
Expand Down
2 changes: 1 addition & 1 deletion config/environment.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
'use strict';

module.exports = function(/* environment, appConfig */) {
module.exports = function(/*environment, appConfig */) {
return { };
};
42 changes: 41 additions & 1 deletion index.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,43 @@
module.exports = {
name: 'ember-cli-toggle'
name: 'ember-cli-toggle',

included: function(app) {
this.app = app;

var config = this.project.config(this.app.env);
var toggleConfig = config['ember-cli-toggle'];

app.import('vendor/ember-cli-toggle/base.css');

if (toggleConfig && Object.keys(toggleConfig).length) {
var allThemes = ['light', 'ios', 'default', 'flat', 'skewed', 'flip'];
var themes = [];

if (toggleConfig.includedThemes) {
themes = themes.concat(toggleConfig.includedThemes);
}

if (!themes.length) {
themes = allThemes;
}

if (toggleConfig.excludedThemes) {
var excluded = toggleConfig.excludedThemes;

themes = themes.filter(function (theme) {
return excluded.indexOf(theme) === -1;
});
}

themes = themes.filter(function (theme) {
return theme && allThemes.indexOf(theme) !== -1;
});

themes.forEach(function (theme) {
app.import('vendor/ember-cli-toggle/themes/' + theme + '.css');
});

toggleConfig.userThemes = themes;
}
}
};
7 changes: 7 additions & 0 deletions tests/dummy/config/environment.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,13 @@ module.exports = function(environment) {
APP: {
// Here you can pass flags/options to your application instance
// when it is created
},

'ember-cli-toggle': {
//includedThemes: ['light', 'ios', 'flip'],
excludedThemes: ['flip'],
defaultTheme: 'light',
defaultSize: 'm'
}
};

Expand Down
200 changes: 0 additions & 200 deletions vendor/ember-cli-toggle/base.css
Original file line number Diff line number Diff line change
Expand Up @@ -66,203 +66,3 @@
.x-toggle:checked + .x-toggle-btn:after {
left: 50%;
}

/* Themes */
.x-toggle-default + .x-toggle-btn {
padding: 0.1em;
background-color: #E7E7E7;
border-radius: 0.2em;
transition: background-color 0.2s;
}

.x-toggle-default:checked + .x-toggle-btn {
background-color: #797979;
}

.x-toggle-default + .x-toggle-btn:after {
background-color: #FFFFFF;
transition: left 0.2s;
border-radius: 0.2em;
}


.x-toggle-light + .x-toggle-btn {
background: #f0f0f0;
border-radius: 2em;
padding: 2px;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}

.x-toggle-light + .x-toggle-btn:after {
border-radius: 50%;
background: #fff;
-webkit-transition: all .2s ease;
transition: all .2s ease;
}

.x-toggle-light:checked + .x-toggle-btn {
background: #9FD6AE;
}

.x-toggle-ios + .x-toggle-btn {
background: #fbfbfb;
border-radius: 2em;
padding: 2px;
-webkit-transition: all .4s ease;
transition: all .4s ease;
border: 1px solid #e8eae9;
}
.x-toggle-ios + .x-toggle-btn:after {
border-radius: 2em;
background: #fbfbfb;
-webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
}
.x-toggle-ios + .x-toggle-btn:active {
box-shadow: inset 0 0 0 2em #e8eae9;
}
.x-toggle-ios + .x-toggle-btn:active:after {
padding-right: .8em;
}
.x-toggle-ios:checked + .x-toggle-btn {
background: #86d993;
}
.x-toggle-ios:checked + .x-toggle-btn:active {
box-shadow: none;
}
.x-toggle-ios:checked + .x-toggle-btn:active:after {
margin-left: -.8em;
}

.x-toggle-skewed + .x-toggle-btn {
overflow: hidden;
-webkit-transform: skew(-10deg);
-ms-transform: skew(-10deg);
transform: skew(-10deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all .2s ease;
transition: all .2s ease;
font-family: sans-serif;
background: #888;
}
.x-toggle-skewed + .x-toggle-btn:after, .x-toggle-skewed + .x-toggle-btn:before {
-webkit-transform: skew(10deg);
-ms-transform: skew(10deg);
transform: skew(10deg);
display: inline-block;
-webkit-transition: all .2s ease;
transition: all .2s ease;
width: 100%;
text-align: center;
position: absolute;
line-height: 2em;
font-weight: bold;
color: #fff;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
.x-toggle-skewed + .x-toggle-btn:after {
left: 100%;
content: attr(data-tg-on);
}
.x-toggle-skewed + .x-toggle-btn:before {
left: 0;
content: attr(data-tg-off);
}
.x-toggle-skewed + .x-toggle-btn:active {
background: #888;
}
.x-toggle-skewed + .x-toggle-btn:active:before {
left: -10%;
}
.x-toggle-skewed:checked + .x-toggle-btn {
background: #86d993;
}
.x-toggle-skewed:checked + .x-toggle-btn:before {
left: -100%;
}
.x-toggle-skewed:checked + .x-toggle-btn:after {
left: 0;
}
.x-toggle-skewed:checked + .x-toggle-btn:active:after {
left: 10%;
}

.x-toggle-flat + .x-toggle-btn {
padding: 2px;
-webkit-transition: all .2s ease;
transition: all .2s ease;
background: #fff;
border: 4px solid #f2f2f2;
border-radius: 2em;
}
.x-toggle-flat + .x-toggle-btn:after {
-webkit-transition: all .2s ease;
transition: all .2s ease;
background: #f2f2f2;
content: "";
border-radius: 1em;
}
.x-toggle-flat:checked + .x-toggle-btn {
border: 4px solid #7FC6A6;
}
.x-toggle-flat:checked + .x-toggle-btn:after {
left: 50%;
background: #7FC6A6;
}

.x-toggle-flip + .x-toggle-btn {
padding: 2px;
-webkit-transition: all .2s ease;
transition: all .2s ease;
font-family: sans-serif;
-webkit-perspective: 100px;
perspective: 100px;
}
.x-toggle-flip + .x-toggle-btn:after, .x-toggle-flip + .x-toggle-btn:before {
display: inline-block;
-webkit-transition: all .4s ease;
transition: all .4s ease;
width: 100%;
text-align: center;
position: absolute;
line-height: 2em;
font-weight: bold;
color: #fff;
position: absolute;
top: 0;
left: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 4px;
}
.x-toggle-flip + .x-toggle-btn:after {
content: attr(data-tg-on);
background: #02C66F;
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.x-toggle-flip + .x-toggle-btn:before {
background: #FF3A19;
content: attr(data-tg-off);
}
.x-toggle-flip + .x-toggle-btn:active:before {
-webkit-transform: rotateY(-20deg);
transform: rotateY(-20deg);
}
.x-toggle-flip:checked + .x-toggle-btn:before {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.x-toggle-flip:checked + .x-toggle-btn:after {
-webkit-transform: rotateY(0);
transform: rotateY(0);
left: 0;
background: #7FC6A6;
}
.x-toggle-flip:checked + .x-toggle-btn:active:after {
-webkit-transform: rotateY(20deg);
transform: rotateY(20deg);
}
16 changes: 16 additions & 0 deletions vendor/ember-cli-toggle/themes/default.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
.x-toggle-default + .x-toggle-btn {
padding: 0.1em;
background-color: #E7E7E7;
border-radius: 0.2em;
transition: background-color 0.2s;
}

.x-toggle-default:checked + .x-toggle-btn {
background-color: #797979;
}

.x-toggle-default + .x-toggle-btn:after {
background-color: #FFFFFF;
transition: left 0.2s;
border-radius: 0.2em;
}
22 changes: 22 additions & 0 deletions vendor/ember-cli-toggle/themes/flat.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
.x-toggle-flat + .x-toggle-btn {
padding: 2px;
-webkit-transition: all .2s ease;
transition: all .2s ease;
background: #fff;
border: 4px solid #f2f2f2;
border-radius: 2em;
}
.x-toggle-flat + .x-toggle-btn:after {
-webkit-transition: all .2s ease;
transition: all .2s ease;
background: #f2f2f2;
content: "";
border-radius: 1em;
}
.x-toggle-flat:checked + .x-toggle-btn {
border: 4px solid #7FC6A6;
}
.x-toggle-flat:checked + .x-toggle-btn:after {
left: 50%;
background: #7FC6A6;
}
53 changes: 53 additions & 0 deletions vendor/ember-cli-toggle/themes/flip.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
.x-toggle-flip + .x-toggle-btn {
padding: 2px;
-webkit-transition: all .2s ease;
transition: all .2s ease;
font-family: sans-serif;
-webkit-perspective: 100px;
perspective: 100px;
}
.x-toggle-flip + .x-toggle-btn:after, .x-toggle-flip + .x-toggle-btn:before {
display: inline-block;
-webkit-transition: all .4s ease;
transition: all .4s ease;
width: 100%;
text-align: center;
position: absolute;
line-height: 2em;
font-weight: bold;
color: #fff;
position: absolute;
top: 0;
left: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 4px;
}
.x-toggle-flip + .x-toggle-btn:after {
content: attr(data-tg-on);
background: #02C66F;
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.x-toggle-flip + .x-toggle-btn:before {
background: #FF3A19;
content: attr(data-tg-off);
}
.x-toggle-flip + .x-toggle-btn:active:before {
-webkit-transform: rotateY(-20deg);
transform: rotateY(-20deg);
}
.x-toggle-flip:checked + .x-toggle-btn:before {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.x-toggle-flip:checked + .x-toggle-btn:after {
-webkit-transform: rotateY(0);
transform: rotateY(0);
left: 0;
background: #7FC6A6;
}
.x-toggle-flip:checked + .x-toggle-btn:active:after {
-webkit-transform: rotateY(20deg);
transform: rotateY(20deg);
}
Loading

0 comments on commit 7b39160

Please sign in to comment.