├── bower.json
├── responsive-comments.min.js
├── README.md
└── responsive-comments.js


/bower.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "responsive-comments",
3 |   "version": "1.3.0",
4 |   "main": ["responsive-comments.js"]
5 | }
6 | 


--------------------------------------------------------------------------------
/responsive-comments.min.js:
--------------------------------------------------------------------------------
1 | !function(){function a(a){for(var b,c,d,e=0,f=a.length,g=[];f>e;e++)b=a[e],c=b.getAttribute(j.insert)||"beforeend",d={element:b,insert:c,media:b.getAttribute(j.media)||!1,supports:b.getAttribute(j.supports)||!1},g.push(d);return g}function b(a){a="string"==typeof a?a:!1,this.forEach(function(b){"supports"!==a&&a||!Modernizr||!b.supports||"complete"===b.supports||"failed"===b.supports||d.apply(b),"media"!==a&&a||!window.matchMedia||!b.media||"complete"===b.media||c.apply(b)})}function c(){return"failed"===this.supports?(this.media="complete",!1):window.matchMedia(this.media).matches?(this.media="complete",g.apply(this),!0):!1}function d(){return e(this.supports.split(","))?(this.supports="complete",this.media||g.apply(this),!0):(this.supports="failed",!1)}function e(a){return a.length>1?f(a):Modernizr[a]}function f(a){var b=!0;return a.forEach(function(a){Modernizr[a]||(b=!1)}),b}function g(){for(var a=this.element.childNodes.length,b=0;a>b;b++)8===this.element.childNodes[b].nodeType&&h.apply(this,[b])}function h(a){this.element.insertAdjacentHTML(this.insert,this.element.childNodes[a].textContent),i.apply(this)}function i(){var a;if("function"==typeof CustomEvent)a=new CustomEvent("responsiveComment",{detail:{mediaQuery:this.media,insert:this.insert}});else{if(!document.createEvent)return!1;a=document.createEvent("Event"),a.initEvent("responsiveComment",!0,!0)}this.element.dispatchEvent(a)}var j={media:"data-responsive-comment-media",supports:"data-responsive-comment-supports",insert:"data-responsive-comment-insert"};document.addEventListener("DOMContentLoaded",function(){var c=a(document.querySelectorAll("["+j.media+"],["+j.supports+"]"));window.addEventListener("resize",b.bind(c,"media")),window.addEventListener("load",b.bind(c))})}();


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Responsive Comments
 2 | 
 3 | ResponsiveComments was designed to bring simple conditional loading to the client side. Through the use of HTML comments, markup can be introduced to progressively enhance an experience as various media queries or feature detections evaluate to true. For more information and examples check out [responsivecomments.com](http://responsivecomments.com).
 4 | 
 5 | ## Installation
 6 | 
 7 | ```cli
 8 | $ bower install --save responsive-comments
 9 | ```
10 | 
11 | ## Usage
12 | ### Media Queries
13 | 
14 | To get started using ResponsiveComments, add a `[data-responsive-comment-media]` attribute containing a valid media query to any element containing children that you wish to conditionally load. The ResponsiveComments concept will only work in a progressivelty enhanced experience so make sure you use minimum width media queries.
15 | 
16 | ```html
17 | <div data-responsive-comment-media="(min-width: 769px)">...</div>
18 | ```
19 | 
20 | The `[data-responsive-comment-media]` containers should contain one commented-out segment of markup as well as any other HTML they require.
21 | 
22 | ```html
23 | <div data-responsive-comment-media="(min-width: 769px)">
24 | 	<!-- <div><p>Any content can go in here</p></div> -->
25 | </div>
26 | ```
27 | 
28 | ### Feature Detection
29 | 
30 | ResponsiveComments also supports feature detection using [Modernizr](http://modernizr.com/). Make sure you include a Modernizr build with all the tests you need before the ResponsiveComments library. A Modernizr test, or a comma separated list of multiple Modernizr tests, can then be specified in `[data-responsive-comments-supports]`.
31 | 
32 | ```html
33 | <div data-responsive-comment-supports="svg">
34 | 	<!-- <div><p>Any content can go in here, including images</p></div> -->
35 | </div>
36 | ```
37 | 
38 | The `[data-responsive-comment-supports]` containers should also contain one commented out segment of markup as well as any other HTML they require.
39 | 
40 | ### DOM Insertion
41 | 
42 | The commented out markup inside the ResponsiveComments container will be inserted into the DOM when the specified media query or feature detection passes. Any valid [insertAdjacentHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element.insertAdjacentHTML) insertion type can be specified in `[data-responsive-comment-insert]`, valid options are `beforebegin`, `afterbegin`, `beforeend`, `afterend` with a default of `beforeend`.
43 | 
44 | ```html
45 | <div data-responsive-comment-insert="afterbegin"
46 |      data-responsive-comment-media="(min-width: 769px)">
47 | 	<!-- <div><p>Any content can go in here, including images</p></div> -->
48 | </div>
49 | ```
50 | 
51 | ### Events
52 | 
53 | You can also bind to an event, fired on the element containing the `[data-responsive-comment-media]` attribute, for added functionality. Use jQuery if you wish or good old vanilla JavaScript.
54 | 
55 | ```js
56 | document.getElementById('respcomm').addEventListener('responsiveComment', function(e) {
57 |     // do something crazy
58 | });
59 | ```
60 | 
61 | ## Support
62 | 
63 | ResponsiveComments is supported across all major web browsers. However, we make use of the [window.matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia) function for testing media queries, this function is fully supported in Internet Explorer 10, but version 9 and down require a [polyfill](https://github.com/paulirish/matchMedia.js/). ResponsiveComments also requires [Modernizr](http://modernizr.com/) for feature detection so ensure a Modernizr build is included with all the required tests.
64 | 
65 | **ResponsiveComments** was designed and developed with love at [Digital Surgeons](http://www.digitalsurgeons.com/).
66 | 
67 | ### MIT Open Source License
68 | 
69 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
70 | 
71 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
72 | 
73 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
74 | 


--------------------------------------------------------------------------------
/responsive-comments.js:
--------------------------------------------------------------------------------
  1 | /**
  2 | * Responsive Comments
  3 | * -------------------
  4 | * A client-side solution to conditional loading in #RWD
  5 | * http://responsivecomments.com/
  6 | *
  7 | * @author Adam Chambers (@chambaz)
  8 | * @author Digital Surgeons (@digitalsurgeons)
  9 | * @license MIT
 10 | */
 11 | (function() {
 12 | 
 13 | 	// data attributes
 14 | 	var attrs = {
 15 | 		'media' : 'data-responsive-comment-media',
 16 | 		'supports' : 'data-responsive-comment-supports',
 17 | 		'insert' : 'data-responsive-comment-insert'
 18 | 	};
 19 | 
 20 | 	// cache responsive comments nodes and data
 21 | 	function prepNodes(nodes) {
 22 | 		var i = 0, l = nodes.length, mqs = [], el, ins, obj;
 23 | 		for(; i < l; i++) {
 24 | 			el = nodes[i];
 25 | 			// beforeend default insert type
 26 | 			ins = el.getAttribute(attrs.insert) || 'beforeend';
 27 | 			// store element, insert type, media query / support test
 28 | 			obj = {
 29 | 				'element' : el,
 30 | 				'insert' : ins,
 31 | 				'media' :  el.getAttribute(attrs.media) || false,
 32 | 				'supports' :  el.getAttribute(attrs.supports) || false
 33 | 			};
 34 | 
 35 | 			mqs.push(obj);
 36 | 		}
 37 | 		return mqs;
 38 | 	}
 39 | 
 40 | 	// call required function (media/supports) on each array element
 41 | 	function testNodes(type) {
 42 | 		type = typeof type === 'string' ? type : false;
 43 | 
 44 | 		// test support/media query nodes if not already tested and completed
 45 | 		this.forEach(function(x) {
 46 | 			if((type === 'supports' || !type) && Modernizr && x.supports &&
 47 | 				x.supports !== 'complete' && x.supports !== 'failed') {
 48 | 
 49 | 				testSupportNodes.apply(x);
 50 | 			}
 51 | 			if((type === 'media' || !type) && window.matchMedia && x.media &&
 52 | 				x.media !== 'complete') {
 53 | 
 54 | 				testMediaNodes.apply(x);
 55 | 			}
 56 | 		});
 57 | 	}
 58 | 
 59 | 	// test media query nodes, requires matchMedia
 60 | 	function testMediaNodes() {
 61 | 		// this node had a feature detection that failed so end tests now
 62 | 		if(this.supports === 'failed') {
 63 | 			this.media = 'complete';
 64 | 			return false;
 65 | 		}
 66 | 
 67 | 		// media query passes and attribute not already set to complete
 68 | 		if(window.matchMedia(this.media).matches) {
 69 | 			this.media = 'complete';
 70 | 			childNodes.apply(this);
 71 | 			return true;
 72 | 		}
 73 | 
 74 | 		return false;
 75 | 	}
 76 | 
 77 | 	// test feature detection nodes, requires Modernizr
 78 | 	function testSupportNodes() {
 79 | 		// feature detection passed
 80 | 		if(featureDetection(this.supports.split(','))) {
 81 | 			this.supports = 'complete';
 82 | 
 83 | 			// no media query to test so insert comment into DOM
 84 | 			if(!this.media) {
 85 | 				childNodes.apply(this);
 86 | 			}
 87 | 
 88 | 			return true;
 89 | 		}
 90 | 
 91 | 		// set feature detection state to failed
 92 | 		this.supports = 'failed';
 93 | 		return false;
 94 | 	}
 95 | 
 96 | 	// handle Modernir feature detection
 97 | 	// if multiple features hand off to multiFeatureDetection
 98 | 	function featureDetection(features) {
 99 | 		// multiple feature detections
100 | 		if(features.length > 1) {
101 | 			return multiFeatureDetection(features);
102 | 		}
103 | 
104 | 		// single feature detection
105 | 		return Modernizr[features];
106 | 	}
107 | 
108 | 	// handle multiple modernizr feature detections
109 | 	function multiFeatureDetection(features) {
110 | 		var passed = true;
111 | 		features.forEach(function(feature) {
112 | 			if(!Modernizr[feature]) {
113 | 				passed = false;
114 | 			}
115 | 		});
116 | 		return passed;
117 | 	}
118 | 
119 | 	// loop round child nodes, find commented content
120 | 	function childNodes() {
121 | 		var l = this.element.childNodes.length,
122 | 			i = 0;
123 | 
124 | 		for(; i < l; i++) {
125 | 			// node type 8 is comment
126 | 			if(this.element.childNodes[i].nodeType === 8) {
127 | 				insertComment.apply(this, [i]);
128 | 			}
129 | 		}
130 | 	}
131 | 
132 | 	// insert commented content into DOM, mark as complete and trigger event
133 | 	function insertComment(index) {
134 | 		this.element.insertAdjacentHTML(this.insert, this.element.childNodes[index].textContent);
135 | 		dispatchEvent.apply(this);
136 | 	}
137 | 
138 | 	// dispatch CustomEvent if supported with media query and insert type detail
139 | 	function dispatchEvent() {
140 | 		var ev;
141 | 
142 | 		// try custom events
143 | 		if(typeof CustomEvent === 'function') {
144 | 			ev = new CustomEvent('responsiveComment', {
145 | 				detail : {
146 | 					mediaQuery: this.media,
147 | 					insert: this.insert
148 | 				}
149 | 			});
150 | 
151 | 		// if not use creatEvent
152 | 		} else if(document.createEvent) {
153 | 			ev = document.createEvent('Event');
154 | 			ev.initEvent('responsiveComment', true, true);
155 | 
156 | 		// neither supported so fail
157 | 		} else {
158 | 			return false;
159 | 		}
160 | 
161 | 		this.element.dispatchEvent(ev);
162 | 	}
163 | 
164 | 	// initiate when DOM ready
165 | 	document.addEventListener("DOMContentLoaded", function(event) {
166 | 		// find and cache responsive comments nodes
167 | 		var els = prepNodes(
168 | 			document.querySelectorAll('['+attrs.media+'],['+attrs.supports+']')
169 | 		);
170 | 
171 | 		// test media nodes only on resize
172 | 		window.addEventListener('resize', testNodes.bind(els, 'media'));
173 | 		// test media and support nodes on load
174 | 		window.addEventListener('load', testNodes.bind(els));
175 | 	});
176 | 
177 | })();
178 | 


--------------------------------------------------------------------------------