Skip to content

Commit

Permalink
applyTo #30
Browse files Browse the repository at this point in the history
  • Loading branch information
@kof
kof committed Dec 18, 2014
1 parent 3dd4134 commit 80f4458
Show file tree
Hide file tree
Showing 13 changed files with 116 additions and 4 deletions.
2 changes: 1 addition & 1 deletion bower.json
View file
@@ -1,7 +1,7 @@
{
"name": "jss",
"description": "Dynamic stylesheets for web components.",
"version": "0.8.2",
"version": "0.9.0",
"author": {
"name": "Oleg Slobodskoi",
"email": "oleg008@gmail.com"
Expand Down
15 changes: 15 additions & 0 deletions dist/jss.js
View file
Expand Up @@ -65,6 +65,21 @@ Rule.prototype.addChild = function (selector, style) {
return this
}

/**
* Apply rule to an element inline.
*
* @param {Element} element
* @return {Rule}
* @api public
*/
Rule.prototype.applyTo = function (element) {
for (var prop in this.style) {

This comment has been minimized.

Sign in to view

Copy link
@trusktr

trusktr Dec 28, 2014

@kof I found this: http://stackoverflow.com/questions/21011126/dom-replace-entire-style-attribute-cssstyledeclaration-on-element

Might that help for performance, applying all styles at once for a single render?

This comment has been minimized.

Sign in to view

Copy link
@kof

kof Dec 28, 2014

Author Member

Need to mesure perf difference. I think cssText will be slower as it needs to parse more, but maybe I am wrong who knows. We need a jsperf bench for this.

Another problem is - I don't know if some styles are already applied to that element. I can't overwrite them. But actually I believe to have tested that cssText replaces only styles it can parse out of your string.

This comment has been minimized.

Sign in to view

Copy link
@trusktr

trusktr Dec 28, 2014

Well apparently if you += '; '+newStyles then it just overrides the ones you added, not all of the styles. Is that what you mean?

This comment has been minimized.

Sign in to view

Copy link
@kof

kof Dec 28, 2014

Author Member

yes, I believe it was the case once I have tested.

This comment has been minimized.

Sign in to view

Copy link
@kof

kof Dec 28, 2014

Author Member

just retested, no cssText will replace it completely.

cssText makes sense if we want to have a method which completely replaces style on the element. But you need to consider that its only about inline styles. Styles applied via stylesheet are not overwritten by this.

I miss a use case currently for this kind of stuff.

This comment has been minimized.

Sign in to view

Copy link
@trusktr

trusktr Dec 28, 2014

cssText will replace it completely.

You mean that if I do $('div')[0].style.cssText += "color: pink" that it will completely override that element's inline color property, right? This is expected, and it's the same as doing $('div')[0].style.color = "pink". f.e., if we start with

<div style="width: 100px; height: 100px; color: mediumturquoise; background: rgb(45,45,45)"></div>

and then we do

$('div')[0].style.cssText += "color: pink"

we end up with

<div style="width: 100px; height: 100px; color: pink; background: rgb(45,45,45)"></div>

and only color was changed, not the whole style. The use case would be just for this applyTo method if performance happens to be better.

This comment has been minimized.

Sign in to view

Copy link
@kof

kof Dec 28, 2014

Author Member

yeah, and its not better.

This comment has been minimized.

Sign in to view

Copy link
@trusktr

trusktr Dec 28, 2014

The applyTo workflow seems essentially the same as using generated class names. In the first case rule.applyTo(el) is the way to apply styles to an element, and in the second case el.classList.add(rule.className), but either way, both methods require a point in the script where the style has to be associated with an element. They're inherently the same from the perspective of someone who doesn't care how the HTML markup ultimately looks like (and never looks at it) but in that case rule.applyTo(el) seems easier to use.

This comment has been minimized.

Sign in to view

Copy link
@trusktr

trusktr Dec 28, 2014

I corrected my previous comment to use className.

Idea: If adding a class name to an element turns out to be faster than inline styles (after considering the rendering process that happens), then rule.applyTo can just apply the rule's generated class name to an element. As a "developer", I don't care what actually happens behind the scenes to the HTML/DOM, but what I care about is using the easiest, quickest API. To me, that seems to be applyTo when it comes to modules, where each one of my modules has encapsulated elements to use applyTo on (e.g. a Backbone.View, famous.core.Surface, angular directive, etc). Styles can be shared across modules by importing individual rules into each module (I could see a stylesheet being more useful for shared rules). But ultimately, the syntax of .applyTo is short and nice. :) Someone coming from C++, for example, won't care if applyTo is applying a generated class or applying inline styles, just that it works and that the end result is the same.

This comment has been minimized.

Sign in to view

Copy link
@trusktr

trusktr Dec 28, 2014

To that effect, I thought of something: #35 and #36.

This comment has been minimized.

Sign in to view

Copy link
@kof

kof Dec 28, 2014

Author Member

I see the point, but I also see that the "ease" of use might mess with "understanding" whats going on. I am not sure mixing this to different things is a good idea. Sometimes optimizations targeted to a "stupid" user are bad, because it makes the software less understandable for "clever" users.

This comment has been minimized.

Sign in to view

Copy link
@trusktr

trusktr Dec 30, 2014

For sure. Well on the other hand, you've been good at keeping the docs up to date, so a clever user will be sure to read them. xD
element.style[prop] = this.style[prop]
}

return this
}

/**
* Converts the rule to css string.
*
Expand Down
2 changes: 1 addition & 1 deletion dist/jss.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

14 changes: 14 additions & 0 deletions examples/apply-to/app.js
View file
@@ -0,0 +1,14 @@
(function () {
var buttons = document.querySelectorAll('button')

// Apply from stylesheet rule.
var sheet = jss.createStyleSheet(window.styles, true).attach()
sheet.rules.button1.applyTo(buttons[0])

// Apply from separate rule.
var button2 = jss.createRule({
padding: '20px',
background: 'green'
})
button2.applyTo(buttons[1])
}())
14 changes: 14 additions & 0 deletions examples/apply-to/index.html
View file
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>applyTo in jss</title>
</head>
<body>
<button>Button 1</button>
<button>Button 2</button>
<script src="../../dist/jss.js"></script>
<script src="./style.js"></script>
<script src="./app.js"></script>
</body>
</html>
6 changes: 6 additions & 0 deletions examples/apply-to/style.js
View file
@@ -0,0 +1,6 @@
window.styles = {
button1: {
padding: '20px',
background: 'blue'
}
}
15 changes: 15 additions & 0 deletions examples/calendar/dist/index.js
View file
Expand Up @@ -747,6 +747,21 @@ Rule.prototype.addChild = function (selector, style) {
return this
}

/**
* Apply rule to an element inline.
*
* @param {Element} element
* @return {Rule}
* @api public
*/
Rule.prototype.applyTo = function (element) {
for (var prop in this.style) {
element.style[prop] = this.style[prop]
}

return this
}

/**
* Converts the rule to css string.
*
Expand Down
15 changes: 15 additions & 0 deletions examples/topcoat/build.js
View file
Expand Up @@ -357,6 +357,21 @@ Rule.prototype.addChild = function (selector, style) {
return this
}

/**
* Apply rule to an element inline.
*
* @param {Element} element
* @return {Rule}
* @api public
*/
Rule.prototype.applyTo = function (element) {
for (var prop in this.style) {
element.style[prop] = this.style[prop]
}

return this
}

/**
* Converts the rule to css string.
*
Expand Down
15 changes: 15 additions & 0 deletions lib/Rule.js
View file
Expand Up @@ -53,6 +53,21 @@ Rule.prototype.addChild = function (selector, style) {
return this
}

/**
* Apply rule to an element inline.
*
* @param {Element} element
* @return {Rule}
* @api public
*/
Rule.prototype.applyTo = function (element) {
for (var prop in this.style) {
element.style[prop] = this.style[prop]
}

return this
}

/**
* Converts the rule to css string.
*
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
@@ -1,7 +1,7 @@
{
"name": "jss",
"description": "Dynamic stylesheets for web components.",
"version": "0.8.2",
"version": "0.9.0",
"author": {
"name": "Oleg Slobodskoi",
"email": "oleg008@gmail.com"
Expand Down
11 changes: 11 additions & 0 deletions readme.md
View file
Expand Up @@ -225,6 +225,17 @@ var rule = jss.createRule({
$('.container').css(rule.style)
```

### Apply a rule to an element inline.

`rule.applyTo(element)`

```javascript
jss.createRule({
background: 'blue'
}).applyTo(document.body)

```

### Register plugin.

`jss.use(fn)`
Expand Down
7 changes: 7 additions & 0 deletions test/Rule.js
View file
Expand Up @@ -88,3 +88,10 @@ test('@keyframes', function () {
equal(rule.selector, '@keyframes a')
equal(rule.toString(), '@keyframes a {\n from {\n top: 0;\n }\n 30% {\n top: 30;\n }\n 60%, 70% {\n top: 80;\n }\n}')
})

test('applyTo', function () {
new jss.Rule({
float: 'left'
}).applyTo(document.body)
equal(document.body.style.float, 'left')
})
2 changes: 1 addition & 1 deletion x-package.json5
View file
@@ -1,7 +1,7 @@
{
name: 'jss',
description: 'Dynamic stylesheets for web components.',
version: '0.8.2',
version: '0.9.0',
author: {
name: 'Oleg Slobodskoi',
email: 'oleg008@gmail.com'
Expand Down

0 comments on commit 80f4458

Please sign in to comment.