Skip to content
Browse files

add jQuery plugin

  • Loading branch information...
1 parent b7ca267 commit e764fbfdbc5f7df5967a1d21c500cccf4917fde3 @ndp committed
Showing with 6,368 additions and 1 deletion.
  1. +33 −0 README.markdown
  2. +1 −1 csster.js
  3. +6,240 −0 lib/jquery-1.4.2.js
  4. +30 −0 spec/core_spec.js
  5. +2 −0 spec_runner.html
  6. +52 −0 src/ie/rounded_corners.js
  7. +10 −0 src/jquery.js
View
33 README.markdown
@@ -148,6 +148,22 @@ that returns a hash of values, for example:
A macro's properties will be overwritten by properties within including selector (or later included macros), similar to how the cascade takes the last defined value.
+## jQuery Integration
+
+If jQuery is loaded first, Csster provides a "csster" method:
+
+<pre>
+ $('.sidebar').csster({ border: '5px solid green', padding: 10 });
+</pre>
+
+As expected, this adds a rule to the document with the ".sidebar" selector.
+In general, this can be called identically to the <code>css()</code> function.
+This is useful is the DOM on the page is dynamic and when a rule is more efficient than applying
+a style repeatedly to all the DOM nodes.
+
+There are a few limitations: Currently a "context" is not supported.
+And be careful, since not all jQuery selectors are valid CSS selectors--
+nothing is done to convert or report unsupported selectors (just like regular CSS).
## Extending Csster
@@ -164,6 +180,23 @@ Functions called after rules are processed stored in <code>Csster.rulesPostProce
A convenient built-in function is <code>compressSelectors</code>. Using this processor, rules with multiple '#'s are simplified. For example, '#a #b #c' becomes '#c'. Usually this is what you will want, so include it with <code>Csster.rulePostProcessors.push(Csster.compressSelectors);</code>.
+This is used to write custom browser overrides. For example, this one makes opacity work for IE:
+
+<pre>
+ Csster.rulesPostProcessors.push(function ieOpacity(rules) {
+ // http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/
+ if (Csster.browser.msie) {
+ for (var i = 0; i < rules.length; i++) {
+ var rule = rules[i];
+ var value = rule.props['opacity']
+ if (value) {
+ value = Math.round(value * 100.0);
+ rules[i].props['filter'] = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + value + ')';
+ }
+ }
+ }
+ });
+</pre>
### Inserting into the DOM
Function that outputs a set of rules into the DOM is <code>Csster.insertStylesheet</code> and can be replaced if desired.
View
2 csster.js
@@ -4,7 +4,7 @@
//
// See http://github.com/ndp/csster
//
-// Generated Sun Nov 14 15:28:45 PST 2010
+// Generated Thu Dec 23 21:27:14 PST 2010
//
//
if (!Csster) {
View
6,240 lib/jquery-1.4.2.js
6,240 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
View
30 spec/core_spec.js
@@ -1,5 +1,13 @@
describe("Csster", function() {
+ function resetCsster() {
+ var head = document.getElementsByTagName('HEAD')[0];
+ var styles = head.getElementsByTagName('STYLE');
+ for (var i = 0; i < styles.length; i++) {
+ head.removeChild(styles[i]);
+ }
+ }
+
describe('#propertyNameOf', function() {
it('should convert fontFamily to font-family', function() {
expect(Csster.propertyNameOf('fontFamily')).toEqual("font-family");
@@ -209,6 +217,7 @@ describe("Csster", function() {
}
}
});
+ beforeEach(resetCsster);
describe('#insertStyleElement', function() {
var originalWidth;
beforeEach(function() {
@@ -246,6 +255,27 @@ describe("Csster", function() {
});
});
});
+ describe('jQuery plugin', function() {
+ var originalWidth;
+ beforeEach(function() {
+ originalWidth = logo.clientWidth;
+ });
+ it('should have no element style overrides for width', function() {
+ expect(logo.style.width).toEqual('');
+ });
+ describe('call', function() {
+ var $this;
+ beforeEach(function() {
+ $this = $('.logo').csster({ fontSize: '75%'});
+ });
+ it('should return source jQuery object', function() {
+ expect($this).toEqual($('.logo'));
+ });
+ it('should now be wider', function() {
+ expect(logo.clientWidth).toBeLessThan(originalWidth);
+ });
+ });
+ });
});
View
2 spec_runner.html
@@ -16,6 +16,8 @@
<script type="text/javascript" src="src/filters/property_pre_processors.js"></script>
<script type="text/javascript" src="src/filters/rule_post_processors.js"></script>
<script type="text/javascript" src="src/init.js"></script>
+ <script type="text/javascript" src="lib/jquery-1.4.2.js"></script>
+ <script type="text/javascript" src="src/jquery.js"></script>
<!-- include spec files here... -->
<script type="text/javascript" src="spec/spec_helper.js"></script>
View
52 src/ie/rounded_corners.js
@@ -0,0 +1,52 @@
+/**
+ * Override of Csster's built-in method to support rounded corners on IE.
+ * See docs there for description.
+ */
+function roundedCorners(side, radius) {
+ if (!radius) {
+ radius = side || 10;
+ side = 'all';
+ }
+ if (side == 'all') {
+ if (Csster.browser.msie) {
+ return {
+ 'border-radius': radius,
+ behavior: 'url(border-radius-ie.htc)',
+ visibility: 'hidden'
+ }
+ } else if (Csster.browser.mozilla) {
+ return {
+ '-moz-border-radius': radius
+ }
+
+ } else {
+ return {
+ 'border-radius': radius,
+ '-webkit-border-radius': radius
+ }
+ }
+ } else {
+ var rules = {};
+ if (side == 'tl' || side == 'top' || side == 'left') {
+ rules['-moz-border-radius-topleft'] = radius;
+ rules['-webkit-border-top-left-radius'] = radius;
+ rules['border-top-left-radius'] = radius;
+ }
+ if (side == 'tr' || side == 'top' || side == 'right') {
+ rules['-webkit-border-top-right-radius'] = radius;
+ rules['-moz-border-radius-topright'] = radius;
+ rules['border-top-right-radius'] = radius;
+ }
+ if (side == 'bl' || side == 'bottom' || side == 'left') {
+ rules['-webkit-border-bottom-left-radius'] = radius;
+ rules['-moz-border-radius-bottomleft'] = radius;
+ rules['border-bottom-left-radius'] = radius;
+ }
+ if (side == 'br' || side == 'bottom' || side == 'right') {
+ rules['-webkit-border-bottom-right-radius'] = radius;
+ rules['-moz-border-radius-bottomright'] = radius;
+ rules['border-bottom-right-radius'] = radius;
+ }
+ return rules;
+ }
+}
View
10 src/jquery.js
@@ -0,0 +1,10 @@
+if (typeof jQuery != 'undefined') {
+ (function($) {
+ $.fn.csster = function(rules) {
+ var newRules = {};
+ newRules[this.selector] = rules;
+ Csster.style(newRules);
+ return this;
+ }
+ })(jQuery);
+}

0 comments on commit e764fbf

Please sign in to comment.
Something went wrong with that request. Please try again.