94 | ...
95 | ```
96 |
97 | Critically, the value of the attribute should point to a URL which serves a document that includes all of the necessary assets to handle the example properly.
98 |
99 | That document must also include the `xrayhtml-iframe.js` found in the `dist`
100 | directory. The JS will listen for messages from the `xrayhtml.js` in the parent
101 | page to so that it can communicate dimensions for the iframe during initial load and also during `resize` events.
102 |
103 | Following the example above, you might include the following in `/xray.html`
104 |
105 | ```html
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 | ```
116 |
--------------------------------------------------------------------------------
/demo/demo.css:
--------------------------------------------------------------------------------
1 | @charset utf-8;
2 |
3 | /* Demo
4 | -------------------------- */
5 | .sub, h2 {
6 | font-family: sans-serif;
7 | }
8 | .sub {
9 | border-bottom: 1px solid #ddd;
10 | padding: .25em 0;
11 | }
12 | h2 {
13 | font-size: 1.1em;
14 | }
15 |
16 | .btn {
17 | background-color: #fefefe;
18 | background-image: -webkit-linear-gradient( top, rgba( 255,255,255,.1 ) 0%, rgba( 255,255,255,.1 ) 50%, rgba( 170,170,170,.1 ) 55%, rgba( 120,120,120,.15 ) 100% );
19 | background-image: -moz-linear-gradient( top, rgba( 255,255,255,.1 ) 0%, rgba( 255,255,255,.1 ) 50%, rgba( 170,170,170,.1 ) 55%, rgba( 120,120,120,.15 ) 100% );
20 | background-image: linear-gradient( top, rgba( 255,255,255,.1 ) 0%, rgba( 255,255,255,.1 ) 50%, rgba( 170,170,170,.1 ) 55%, rgba( 120,120,120,.15 ) 100% );
21 | border: 1px solid #ccc;
22 | border-radius: .4em;
23 | color: #308bd3;
24 | cursor: pointer;
25 | display: block;
26 | font: bold 14px/1 sans-serif;
27 | padding: .6em 0 .5em 0;
28 | position: relative;
29 | text-align: center;
30 | text-decoration: none;
31 | text-transform: capitalize;
32 | text-shadow: 0 1px 0 #fff;
33 | width: 100%;
34 |
35 | -webkit-box-sizing: border-box;
36 | -moz-box-sizing: border-box;
37 | -ms-box-sizing: border-box;
38 | box-sizing: border-box;
39 | }
40 |
41 |
42 | .method-inline .btn {
43 | width: auto;
44 | display: inline-block;
45 | position: absolute;
46 | right: 0;
47 | bottom: 0;
48 | padding-left: 1em;
49 | padding-right: 1em;
50 | border-radius: 5px 0 0 0;
51 | border-width: 1px 0 0 1px;
52 | }
53 |
54 | .method-flip .btn-copy {
55 | border-width: 0 0 1px 0;
56 | border-radius: 0;
57 | }
58 | .btn-small {
59 | display: inline-block;
60 | font-size: .8em;
61 | padding: .4em 2% .35em 2%;
62 | width: auto;
63 | }
64 | aside {
65 | padding: .5em;
66 | }
67 | blockquote {
68 | font-size: 1.6em;
69 | margin: 0;
70 | position: relative;
71 | }
72 | blockquote:before {
73 | color: #ccc;
74 | content: "“";
75 | font-size: 4em;
76 | left: 0;
77 | line-height: .25;
78 | position: absolute;
79 | top: 0;
80 | z-index: 1;
81 | }
82 | blockquote p {
83 | position: relative;
84 | margin: 1em;
85 | z-index: 2;
86 | }
87 | address {
88 | font-size: 1.2em;
89 | }
90 | cite {
91 | font-size: 1.1em;
92 | }
93 | /* Logo */
94 | .header {
95 | background: #247201 url(http://filamentgroup.com/images/headerbg-new.jpg) no-repeat bottom left;
96 | }
97 | #fg-logo {
98 | text-indent: -9999px;
99 | margin: 0 auto;
100 | width: 287px;
101 | height: 52px;
102 | background-image: url(http://filamentgroup.com/images/fg-logo-icon.png);
103 | }
104 | @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5){
105 | #fg-logo {
106 | background-size: 287px 52px;
107 | background-image: url(http://filamentgroup.com/images/fg-logo-icon-lrg.png);
108 | }
109 | }
110 |
111 |
--------------------------------------------------------------------------------
/dist/xrayhtml-iframe.js:
--------------------------------------------------------------------------------
1 | /*! X-rayHTML - v2.3.0 - 2019-06-28
2 | * https://github.com/filamentgroup/x-rayhtml
3 | * Copyright (c) 2019 Filament Group; Licensed MIT */
4 | (function(){
5 |
6 | // Empty and exec the ready queue
7 | var ready = false,
8 | readyQueue = [],
9 | runReady = function(){
10 | if( !ready ){
11 | while( readyQueue.length ){
12 | readyQueue.shift().call( document );
13 | }
14 | ready = true;
15 | }
16 | };
17 |
18 | // The following is borrowed wholesale from shoestring
19 | // https://github.com/filamentgroup/shoestring/blob/master/src/core/ready.js
20 | function onReady( callback ){
21 | if( ready && callback ){
22 | callback.call( document );
23 | } else if( callback ){
24 | readyQueue.push( callback );
25 | } else {
26 | runReady();
27 | }
28 |
29 | return [document];
30 | }
31 |
32 |
33 | // Quick IE8 shiv
34 | if( !window.addEventListener ){
35 | window.addEventListener = function( evt, cb ){
36 | return window.attachEvent( "on" + evt, cb );
37 | };
38 | }
39 |
40 | // reset ready state with new content for the iframe
41 | // TODO bind to load event for other items, e.g. stylesheets
42 | function resetReady(imageCount){
43 | ready = false;
44 | var eventCounter = 0;
45 |
46 | if(! imageCount ){
47 | runReady();
48 | return;
49 | }
50 |
51 | var eventIncrement = function(event){
52 | if( event.target.tagName !== 'IMG' ){
53 | return;
54 | }
55 |
56 | eventCounter++;
57 |
58 | // all of the images and the load event
59 | if(eventCounter === imageCount){
60 | runReady();
61 | }
62 | };
63 |
64 | document.body.addEventListener("load", eventIncrement, true);
65 | }
66 |
67 | function sendSize( iframeid ){
68 | window
69 | .parent
70 | .postMessage('{ "iframeid": ' + iframeid + ', "iframeheight" : ' +
71 | document.documentElement.offsetHeight +
72 | '}', "*");
73 | }
74 |
75 | var id;
76 |
77 | window.addEventListener("message", function( event ){
78 | // same host check
79 | var origin = event.origin || event.originalEvent.origin;
80 | var allowedOrigin = new RegExp( "https?:\/\/" + location.host );
81 | if( !origin.match( allowedOrigin ) ){
82 | return;
83 | }
84 |
85 | var data = event.data || event.originalEvent.data;
86 | var elem = document.querySelector(data.selector || "body");
87 | var fragment = document.createElement("div");
88 | fragment.innerHTML = data.html;
89 |
90 | // the document is now not ready and needs to wait until everything
91 | // new has loaded (proxy: when all the images have loaded)
92 | resetReady(fragment.querySelectorAll("img").length);
93 |
94 | // use the passed information to populate the page
95 | for(var x = 0; x < fragment.children.length; x++) {
96 | elem.append(fragment.children[0]);
97 | }
98 |
99 | id = data.id;
100 |
101 | // wait until everything loads to calc the height and communicate it
102 | // TODO it would be better to bind to the load of the styles at least
103 | onReady(function(){
104 | sendSize(id);
105 | });
106 | }, false);
107 |
108 | var minInterval = 300;
109 | var resized = false;
110 | window.addEventListener("resize", function(){
111 | if(resized){ return; }
112 | sendSize(id);
113 | resized = true;
114 | setTimeout(function(){ resized = false; }, minInterval);
115 | });
116 | })();
117 |
--------------------------------------------------------------------------------
/dist/xrayhtml.css:
--------------------------------------------------------------------------------
1 | /*! X-rayHTML - v2.3.0 - 2019-06-28
2 | * https://github.com/filamentgroup/x-rayhtml
3 | * Copyright (c) 2019 Filament Group; Licensed MIT */
4 | .xrayhtml {
5 | border: 1px solid rgba(0,0,0,.1);
6 | border-radius: .3em;
7 | margin: 1.5em 0 2.5em 0;
8 | padding: 1em 1em 2em;
9 | }
10 | .xrayhtml.xray-copy {
11 | position: relative;
12 | }
13 | .xrayhtml .xraytitle {
14 | text-transform: uppercase;
15 | letter-spacing: 1px;
16 | font: .75em sans-serif;
17 | color: rgba(0,0,0,.5);
18 | background-color: #fff;
19 | border-radius: 3px;
20 | display: inline-block;
21 | position: relative;
22 | top: -2.166666667em; /* 26px */
23 | padding-left: .1em;
24 | padding-right: .1em;
25 | z-index: 3;
26 | margin: 0;
27 | }
28 | .xrayhtml.method-flip:before {
29 | background-color: rgba(255,255,255,.6);
30 | }
31 | .xrayhtml .source-panel {
32 | background: #f7f7f7;
33 | margin-top: 2em;
34 | tab-size: 2;
35 | }
36 | .xrayhtml .source-panel pre {
37 | margin: 0;
38 | padding: 16px;
39 | border-radius: 0 0 .3em .3em;
40 | }
41 | .xrayhtml .source-panel code {
42 | white-space: pre-wrap;
43 | }
44 | .xrayhtml.method-flip .source-panel {
45 | margin-top: 0;
46 | border-radius: 0.3em;
47 | }
48 | .xrayhtml.method-inline .source-panel {
49 | margin: 2em -1em -2em -1em !important; /* Prism override. */
50 | border-top: 1px solid rgba(0,0,0,.1);
51 | border-radius: 0 0 .3em .3em;
52 | }
53 | /* Prism override. */
54 | .xrayhtml .source-panel code.language-markup {
55 | white-space: pre-wrap !important;
56 | }
57 |
58 | .xrayhtml.antipattern {
59 | border-color: #C9282D;
60 | }
61 | .xrayhtml.antipattern .xraytitle {
62 | color: #d75e72;
63 | font-weight: 700;
64 | }
65 |
66 | /* Flip Animation */
67 | .xrayhtml.method-flip {
68 | padding: 0;
69 | }
70 | .method-flip {
71 | -webkit-perspective: 2500px;
72 | -moz-perspective: 2500px;
73 | perspective: 2500px;
74 | }
75 | .method-flip .source-panel {
76 | position: absolute;
77 | top: 0;
78 | left: 0;
79 | width: 100%;
80 | height: 100%;
81 | overflow-x: auto;
82 | }
83 | .method-flip .snippet {
84 | margin: 0;
85 | position: relative;
86 | top: 0;
87 | left: 0;
88 | z-index: 2;
89 | min-height: 100%;
90 | background-color: #fff;
91 | padding: 1em;
92 |
93 | -webkit-transform: rotateY(0deg);
94 | -webkit-transform-style: preserve-3d;
95 | -webkit-backface-visibility: hidden;
96 |
97 | -moz-transform: rotateY(0deg);
98 | -moz-transform-style: preserve-3d;
99 | -moz-backface-visibility: hidden;
100 |
101 | -webkit-transition: -webkit-transform .4s ease-in-out;
102 | -moz-transition: -moz-transform .4s ease-in-out;
103 | }
104 | .method-flip.view-source .snippet {
105 | z-index: 1;
106 | -webkit-transform: rotateY(180deg);
107 | -moz-transform: rotateY(180deg);
108 | }
109 | .method-flip .source-panel {
110 | -webkit-transform: rotateY(-180deg);
111 | -webkit-backface-visibility: hidden;
112 |
113 | -moz-transform: rotateY(-180deg);
114 | -moz-backface-visibility: hidden;
115 |
116 | -moz-transition: all .4s ease-in-out;
117 | -webkit-transition: all .4s ease-in-out;
118 | }
119 | .method-flip.view-source .source-panel {
120 | z-index: 2;
121 | -webkit-transform: rotateY(0deg);
122 | -moz-transform: rotateY(0deg);
123 | }
124 |
125 | .method-flip.view-source .xraytitle {
126 | background-color: transparent;
127 | background-image: linear-gradient(
128 | to bottom,
129 | transparent,
130 | transparent 40%,
131 | #ffffff 40%,
132 | transparent);
133 | }
134 |
135 | iframe.xray-iframe {
136 | border: 0;
137 | width: 100%
138 | }
--------------------------------------------------------------------------------
/dist/xrayhtml.js:
--------------------------------------------------------------------------------
1 | /*! X-rayHTML - v2.3.0 - 2019-06-28
2 | * https://github.com/filamentgroup/x-rayhtml
3 | * Copyright (c) 2019 Filament Group; Licensed MIT */
4 | window.jQuery = window.jQuery || window.shoestring;
5 |
6 | (function( $ ) {
7 | var xrayiframeid = 0;
8 | var pluginName = "xrayhtml",
9 | o = {
10 | text: {
11 | open: "View Source",
12 | close: "View Demo",
13 | titlePrefix: "Example",
14 | antipattern: "Do Not Use"
15 | },
16 | classes: {
17 | button: "btn btn-small btn-xrayhtml-flipsource",
18 | open: "view-source",
19 | sourcepanel: "source-panel",
20 | title: "xraytitle",
21 | antipattern: "antipattern"
22 | },
23 | initSelector: "[data-" + pluginName + "]",
24 | defaultReveal: "inline"
25 | },
26 | methods = {
27 | _create: function() {
28 | return $( this ).each(function() {
29 | var init = $( this ).data( "init." + pluginName );
30 |
31 | if( init ) {
32 | return false;
33 | }
34 |
35 | $( this )
36 | .data( "init." + pluginName, true )
37 | [ pluginName ]( "_init" )
38 | .trigger( "create." + pluginName );
39 | });
40 | },
41 | _init: function() {
42 | var $self = $(this);
43 |
44 | $self.data( "id." + pluginName, xrayiframeid++);
45 |
46 | var method = $( this ).attr( "data-" + pluginName ) || o.defaultReveal;
47 |
48 | if( method === "flip" ) {
49 | $( this )[ pluginName ]( "_createButton" );
50 | }
51 |
52 | $( this )
53 | .addClass( pluginName + " " + "method-" + method )
54 | [ pluginName ]( "_createSource" );
55 |
56 | // use an iframe to host the source
57 | if( $(this).is("[data-" + pluginName + "-iframe]") ){
58 |
59 | // grab the snippet html to ship to the iframe
60 | var snippetHTML = $(this).find(".snippet").html();
61 |
62 | // grab the url of the iframe to load
63 | var url = $(this).attr("data-" + pluginName + "-iframe");
64 |
65 | // grab the selector for the element in the iframe to put the html in
66 | var selector = $(this).attr("data-" + pluginName + "-iframe-target");
67 |
68 | // create the iframe element, so we can bind to the load event
69 | var $iframe = $("
");
70 |
71 | // get the scripts and styles to ship to the iframe
72 | // TODO we should support styles/scripts elsewhere in the page
73 | var headHTML = $( "head" ).html();
74 |
75 | // wait until the iframe loads to send the data
76 | $iframe.bind("load",function(){
77 |
78 | // wait for the iframe page to transmit the height of the page
79 | $(window).bind("message", function(event){
80 | var data = JSON.parse(event.data || event.originalEvent.data);
81 |
82 | if( data.iframeid !== $self.data("id." + pluginName) ){
83 | return;
84 | }
85 |
86 | $iframe.attr("height", data.iframeheight);
87 | });
88 |
89 | // send a message to the iframe with the snippet to load and any
90 | // assets that are required to make it look right
91 | $iframe[0].contentWindow.postMessage({
92 | html: snippetHTML,
93 | head: headHTML,
94 | id: $self.data("id." + pluginName),
95 | selector: selector
96 | }, "*");
97 | });
98 |
99 | // style the iframe properly
100 | $iframe.addClass("xray-iframe");
101 |
102 | // replace the snippet which is rendered in the page with the iframe
103 | $(this).find(".snippet").html("").append($iframe);
104 | }
105 | },
106 | _createButton: function() {
107 | var btn = document.createElement( "a" ),
108 | txt = document.createTextNode( o.text.open ),
109 | el = $( this );
110 |
111 | btn.setAttribute( "class", o.classes.button );
112 | btn.href = "#";
113 | btn.appendChild( txt );
114 |
115 | $( btn )
116 | .bind( "click", function( e ) {
117 | var isOpen = el.attr( "class" ).indexOf( o.classes.open ) > -1;
118 |
119 | el[ isOpen ? "removeClass" : "addClass" ]( o.classes.open );
120 | btn.innerHTML = ( isOpen ? o.text.open : o.text.close );
121 |
122 | e.preventDefault();
123 |
124 | })
125 | .insertBefore( el );
126 | },
127 | _createSource: function() {
128 | var el = this;
129 | var getPrefixText = function () {
130 | if( el.className.match( new RegExp( "\\b" + o.classes.antipattern + "\\b", "gi" ) ) ) {
131 | return o.text.antipattern;
132 | }
133 | return o.text.titlePrefix;
134 | };
135 |
136 | var title = el.getElementsByClassName( o.classes.title );
137 | var deprecatedTitle;
138 |
139 | if( title.length ) {
140 | title = title[ 0 ];
141 | title.parentNode.removeChild( title );
142 | title.innerHTML = getPrefixText() + ": " + title.innerHTML;
143 | } else {
144 | deprecatedTitle = el.getAttribute( "data-title" );
145 | title = document.createElement( "div" );
146 | title.className = o.classes.title;
147 | title.innerHTML = getPrefixText() + ( deprecatedTitle ? ": " + deprecatedTitle : "" );
148 | }
149 |
150 | var suppliedsourcepanel = $( el ).find("." + o.classes.sourcepanel );
151 | var sourcepanel = document.createElement( "div" );
152 | var preel = document.createElement( "pre" );
153 | var codeel = document.createElement( "code" );
154 | var wrap = document.createElement( "div" );
155 | var code;
156 | var leadingWhiteSpace;
157 | var source;
158 |
159 | if( suppliedsourcepanel.length ) {
160 | code = suppliedsourcepanel[0].innerHTML;
161 | suppliedsourcepanel.remove();
162 | } else {
163 | code = el.innerHTML;
164 | }
165 |
166 | // remove empty value attributes
167 | code = code.replace( /\=\"\"/g, '' );
168 | leadingWhiteSpace = code.match( /(^[\s]+)/ );
169 |
170 | if( leadingWhiteSpace ) {
171 | code = code.replace( new RegExp( leadingWhiteSpace[ 1 ], "gmi" ), "\n" );
172 | }
173 |
174 | source = document.createTextNode( code );
175 |
176 | wrap.setAttribute( "class", "snippet" );
177 |
178 | $( el ).wrapInner( wrap );
179 |
180 | codeel.appendChild( source );
181 | preel.appendChild( codeel );
182 |
183 | sourcepanel.setAttribute( "class", o.classes.sourcepanel );
184 | sourcepanel.appendChild( preel );
185 |
186 | this.appendChild( sourcepanel );
187 |
188 | this.insertBefore( title, this.firstChild );
189 | }
190 | };
191 |
192 | // Collection method.
193 | $.fn[ pluginName ] = function( arrg, a, b, c ) {
194 | return this.each(function() {
195 |
196 | // if it's a method
197 | if( arrg && typeof( arrg ) === "string" ){
198 | return $.fn[ pluginName ].prototype[ arrg ].call( this, a, b, c );
199 | }
200 |
201 | // don't re-init
202 | if( $( this ).data( pluginName + "data" ) ){
203 | return $( this );
204 | }
205 |
206 | // otherwise, init
207 | $( this ).data( pluginName + "active", true );
208 | $.fn[ pluginName ].prototype._create.call( this );
209 | });
210 | };
211 |
212 | // add methods
213 | $.extend( $.fn[ pluginName ].prototype, methods );
214 |
215 | // auto-init
216 | var initted;
217 | function init(){
218 | if( !initted ){
219 | $( o.initSelector )[ pluginName ]();
220 | initted = true;
221 | }
222 | }
223 | // init either on beforeenhance event or domready, whichever comes first.
224 | $( document ).bind("beforeenhance", init );
225 | $( init );
226 |
227 |
228 | }( jQuery ));
229 |
--------------------------------------------------------------------------------
/iframe.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
Demo
8 |
9 |
10 |
11 |
12 |
13 |
14 |
19 |
20 |
21 |
22 |
23 |
26 |
27 |
28 |
29 | Basics
30 | By default, functionality is hooked to the data-xrayhtml attribute.
31 |
32 | Inline
33 | Bolting the data-xrayhtml attribute on without a value will give you inline code snippets, like so:
34 |
35 |
44 |
45 | Supplies Source Panel in Markup
46 |
65 |
66 | Add a subtitle
67 | Use a heading element with an xraytitle class to add your own subtitle to the example text.
68 | Also works with a data-title attribute but that approach is deprecated.
69 |
70 |
71 |
Parapraph
72 |
This is a paragraph with text.
73 |
Anti-patterns and Bad Examples
76 | Add class="antipattern" to show a bad example. Also works with subtitles as documented above.
77 |
78 |
79 |
Non-standard HTML
80 | Text is not a standard HTML element. Do not use this code.Flip
84 | Setting “flip” as the value of the data-xrayhtml attribute will give you this snazzy flip-to-reveal animation (browsers without support for 3D tranforms will simply show/hide the code snippet).
85 |
86 |
95 |
96 |
97 |
98 |
99 |
100 | Extras
101 | The plugin fires off a create.xrayhtml event that can be used to attach features like syntax highlighting (using Prism.js ), or "copy to clipboard" (using Clipboard ).
102 |
103 | Prism.js
104 | Add the prism class to the data-xrayhtml container to colorize the code snippet.
105 |
106 |
115 |
116 | Copy (clipboard.js)
117 | Add the xray-copy class to the data-xrayhtml container to append a "Copy" button to the code snippet; when clicked, it'll copy the entire snippet.
118 |
119 |
120 |
121 |
122 | It is the unofficial force—the Baker Street irregulars.
123 |
124 | Sherlock Holmes
125 | Sign of Four
126 | (Copied from the demo page)
127 |
128 |
iframe
131 | It's also possible to use an iframe for situations where styles (like media queries) depend on the viewport. Specify the URL for the iframe with data-xrayhtml-iframe="iframe.html" on the data-xrayhtml element. You can also tell XRay where in the iframe page to place the included markup using data-xrayhtml-iframe-target="#replace". Otherwise it will default to replacing the body HTML with the code XRay code snippet.
132 |
133 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
190 |
191 |
192 |
193 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "xrayhtml",
3 | "title": "X-rayHTML",
4 | "description": "A plugin to easily show examples of components with the markup to use them.",
5 | "homepage": "https://github.com/filamentgroup/x-rayhtml",
6 | "version": "2.3.0",
7 | "author": "Mat Marquis",
8 | "contributors": [
9 | {
10 | "name": "Zach Leatherman",
11 | "company": "Filament Group",
12 | "email": "zach@filamentgroup.com",
13 | "url": "http://filamentgroup.com/"
14 | }
15 | ],
16 | "repository": {
17 | "type": "git",
18 | "url": "git://github.com/filamentgroup/x-rayhtml.git"
19 | },
20 | "bugs": "https://github.com/filamentgroup/x-rayhtml/issues",
21 | "license": "MIT",
22 | "engines": {
23 | "node": ">= 0.6.0"
24 | },
25 | "scripts": {
26 | "test": "grunt qunit"
27 | },
28 | "dependencies": {
29 | "jquery": "^3.2.1",
30 | "shoestring": "^2.0.1",
31 | "prismjs": "^1.6.0",
32 | "clipboard": "^1.7.1"
33 | },
34 | "devDependencies": {
35 | "grunt": "~1.0.1",
36 | "grunt-contrib-concat": "~1.0.1",
37 | "grunt-contrib-copy": "^1.0.0",
38 | "grunt-contrib-jshint": "~1.1.0",
39 | "grunt-contrib-qunit": "~2.0.0",
40 | "grunt-contrib-watch": "~1.0.0",
41 | "matchdep": "^1.0.1"
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/src/X-rayHTML-iframe.js:
--------------------------------------------------------------------------------
1 | (function(){
2 |
3 | // Empty and exec the ready queue
4 | var ready = false,
5 | readyQueue = [],
6 | runReady = function(){
7 | if( !ready ){
8 | while( readyQueue.length ){
9 | readyQueue.shift().call( document );
10 | }
11 | ready = true;
12 | }
13 | };
14 |
15 | // The following is borrowed wholesale from shoestring
16 | // https://github.com/filamentgroup/shoestring/blob/master/src/core/ready.js
17 | function onReady( callback ){
18 | if( ready && callback ){
19 | callback.call( document );
20 | } else if( callback ){
21 | readyQueue.push( callback );
22 | } else {
23 | runReady();
24 | }
25 |
26 | return [document];
27 | }
28 |
29 |
30 | // Quick IE8 shiv
31 | if( !window.addEventListener ){
32 | window.addEventListener = function( evt, cb ){
33 | return window.attachEvent( "on" + evt, cb );
34 | };
35 | }
36 |
37 | // reset ready state with new content for the iframe
38 | // TODO bind to load event for other items, e.g. stylesheets
39 | function resetReady(imageCount){
40 | ready = false;
41 | var eventCounter = 0;
42 |
43 | if(! imageCount ){
44 | runReady();
45 | return;
46 | }
47 |
48 | var eventIncrement = function(event){
49 | if( event.target.tagName !== 'IMG' ){
50 | return;
51 | }
52 |
53 | eventCounter++;
54 |
55 | // all of the images and the load event
56 | if(eventCounter === imageCount){
57 | runReady();
58 | }
59 | };
60 |
61 | document.body.addEventListener("load", eventIncrement, true);
62 | }
63 |
64 | function sendSize( iframeid ){
65 | window
66 | .parent
67 | .postMessage('{ "iframeid": ' + iframeid + ', "iframeheight" : ' +
68 | document.documentElement.offsetHeight +
69 | '}', "*");
70 | }
71 |
72 | var id;
73 |
74 | window.addEventListener("message", function( event ){
75 | // same host check
76 | var origin = event.origin || event.originalEvent.origin;
77 | var allowedOrigin = new RegExp( "https?:\/\/" + location.host );
78 | if( !origin.match( allowedOrigin ) ){
79 | return;
80 | }
81 |
82 | var data = event.data || event.originalEvent.data;
83 | var elem = document.querySelector(data.selector || "body");
84 | var fragment = document.createElement("div");
85 | fragment.innerHTML = data.html;
86 |
87 | // the document is now not ready and needs to wait until everything
88 | // new has loaded (proxy: when all the images have loaded)
89 | resetReady(fragment.querySelectorAll("img").length);
90 |
91 | // use the passed information to populate the page
92 | for(var x = 0; x < fragment.children.length; x++) {
93 | elem.append(fragment.children[0]);
94 | }
95 |
96 | id = data.id;
97 |
98 | // wait until everything loads to calc the height and communicate it
99 | // TODO it would be better to bind to the load of the styles at least
100 | onReady(function(){
101 | sendSize(id);
102 | });
103 | }, false);
104 |
105 | var minInterval = 300;
106 | var resized = false;
107 | window.addEventListener("resize", function(){
108 | if(resized){ return; }
109 | sendSize(id);
110 | resized = true;
111 | setTimeout(function(){ resized = false; }, minInterval);
112 | });
113 | })();
114 |
--------------------------------------------------------------------------------
/src/X-rayHTML.css:
--------------------------------------------------------------------------------
1 | .xrayhtml {
2 | border: 1px solid rgba(0,0,0,.1);
3 | border-radius: .3em;
4 | margin: 1.5em 0 2.5em 0;
5 | padding: 1em 1em 2em;
6 | }
7 | .xrayhtml.xray-copy {
8 | position: relative;
9 | }
10 | .xrayhtml .xraytitle {
11 | text-transform: uppercase;
12 | letter-spacing: 1px;
13 | font: .75em sans-serif;
14 | color: rgba(0,0,0,.5);
15 | background-color: #fff;
16 | border-radius: 3px;
17 | display: inline-block;
18 | position: relative;
19 | top: -2.166666667em; /* 26px */
20 | padding-left: .1em;
21 | padding-right: .1em;
22 | z-index: 3;
23 | margin: 0;
24 | }
25 | .xrayhtml.method-flip:before {
26 | background-color: rgba(255,255,255,.6);
27 | }
28 | .xrayhtml .source-panel {
29 | background: #f7f7f7;
30 | margin-top: 2em;
31 | tab-size: 2;
32 | }
33 | .xrayhtml .source-panel pre {
34 | margin: 0;
35 | padding: 16px;
36 | border-radius: 0 0 .3em .3em;
37 | }
38 | .xrayhtml .source-panel code {
39 | white-space: pre-wrap;
40 | }
41 | .xrayhtml.method-flip .source-panel {
42 | margin-top: 0;
43 | border-radius: 0.3em;
44 | }
45 | .xrayhtml.method-inline .source-panel {
46 | margin: 2em -1em -2em -1em !important; /* Prism override. */
47 | border-top: 1px solid rgba(0,0,0,.1);
48 | border-radius: 0 0 .3em .3em;
49 | }
50 | /* Prism override. */
51 | .xrayhtml .source-panel code.language-markup {
52 | white-space: pre-wrap !important;
53 | }
54 |
55 | .xrayhtml.antipattern {
56 | border-color: #C9282D;
57 | }
58 | .xrayhtml.antipattern .xraytitle {
59 | color: #d75e72;
60 | font-weight: 700;
61 | }
62 |
63 | /* Flip Animation */
64 | .xrayhtml.method-flip {
65 | padding: 0;
66 | }
67 | .method-flip {
68 | -webkit-perspective: 2500px;
69 | -moz-perspective: 2500px;
70 | perspective: 2500px;
71 | }
72 | .method-flip .source-panel {
73 | position: absolute;
74 | top: 0;
75 | left: 0;
76 | width: 100%;
77 | height: 100%;
78 | overflow-x: auto;
79 | }
80 | .method-flip .snippet {
81 | margin: 0;
82 | position: relative;
83 | top: 0;
84 | left: 0;
85 | z-index: 2;
86 | min-height: 100%;
87 | background-color: #fff;
88 | padding: 1em;
89 |
90 | -webkit-transform: rotateY(0deg);
91 | -webkit-transform-style: preserve-3d;
92 | -webkit-backface-visibility: hidden;
93 |
94 | -moz-transform: rotateY(0deg);
95 | -moz-transform-style: preserve-3d;
96 | -moz-backface-visibility: hidden;
97 |
98 | -webkit-transition: -webkit-transform .4s ease-in-out;
99 | -moz-transition: -moz-transform .4s ease-in-out;
100 | }
101 | .method-flip.view-source .snippet {
102 | z-index: 1;
103 | -webkit-transform: rotateY(180deg);
104 | -moz-transform: rotateY(180deg);
105 | }
106 | .method-flip .source-panel {
107 | -webkit-transform: rotateY(-180deg);
108 | -webkit-backface-visibility: hidden;
109 |
110 | -moz-transform: rotateY(-180deg);
111 | -moz-backface-visibility: hidden;
112 |
113 | -moz-transition: all .4s ease-in-out;
114 | -webkit-transition: all .4s ease-in-out;
115 | }
116 | .method-flip.view-source .source-panel {
117 | z-index: 2;
118 | -webkit-transform: rotateY(0deg);
119 | -moz-transform: rotateY(0deg);
120 | }
121 |
122 | .method-flip.view-source .xraytitle {
123 | background-color: transparent;
124 | background-image: linear-gradient(
125 | to bottom,
126 | transparent,
127 | transparent 40%,
128 | #ffffff 40%,
129 | transparent);
130 | }
131 |
132 | iframe.xray-iframe {
133 | border: 0;
134 | width: 100%
135 | }
--------------------------------------------------------------------------------
/src/X-rayHTML.js:
--------------------------------------------------------------------------------
1 |
2 | /*
3 | * View Source
4 | * Generates copy/pastable markup from actual rendered markup.
5 | *
6 | * Copyright (c) 2016 Filament Group, Inc.
7 | * Licensed under the MIT, GPL licenses.
8 | */
9 |
10 | window.jQuery = window.jQuery || window.shoestring;
11 |
12 | (function( $ ) {
13 | var xrayiframeid = 0;
14 | var pluginName = "xrayhtml",
15 | o = {
16 | text: {
17 | open: "View Source",
18 | close: "View Demo",
19 | titlePrefix: "Example",
20 | antipattern: "Do Not Use"
21 | },
22 | classes: {
23 | button: "btn btn-small btn-xrayhtml-flipsource",
24 | open: "view-source",
25 | sourcepanel: "source-panel",
26 | title: "xraytitle",
27 | antipattern: "antipattern"
28 | },
29 | initSelector: "[data-" + pluginName + "]",
30 | defaultReveal: "inline"
31 | },
32 | methods = {
33 | _create: function() {
34 | return $( this ).each(function() {
35 | var init = $( this ).data( "init." + pluginName );
36 |
37 | if( init ) {
38 | return false;
39 | }
40 |
41 | $( this )
42 | .data( "init." + pluginName, true )
43 | [ pluginName ]( "_init" )
44 | .trigger( "create." + pluginName );
45 | });
46 | },
47 | _init: function() {
48 | var $self = $(this);
49 |
50 | $self.data( "id." + pluginName, xrayiframeid++);
51 |
52 | var method = $( this ).attr( "data-" + pluginName ) || o.defaultReveal;
53 |
54 | if( method === "flip" ) {
55 | $( this )[ pluginName ]( "_createButton" );
56 | }
57 |
58 | $( this )
59 | .addClass( pluginName + " " + "method-" + method )
60 | [ pluginName ]( "_createSource" );
61 |
62 | // use an iframe to host the source
63 | if( $(this).is("[data-" + pluginName + "-iframe]") ){
64 |
65 | // grab the snippet html to ship to the iframe
66 | var snippetHTML = $(this).find(".snippet").html();
67 |
68 | // grab the url of the iframe to load
69 | var url = $(this).attr("data-" + pluginName + "-iframe");
70 |
71 | // grab the selector for the element in the iframe to put the html in
72 | var selector = $(this).attr("data-" + pluginName + "-iframe-target");
73 |
74 | // create the iframe element, so we can bind to the load event
75 | var $iframe = $("
");
76 |
77 | // get the scripts and styles to ship to the iframe
78 | // TODO we should support styles/scripts elsewhere in the page
79 | var headHTML = $( "head" ).html();
80 |
81 | // wait until the iframe loads to send the data
82 | $iframe.bind("load",function(){
83 |
84 | // wait for the iframe page to transmit the height of the page
85 | $(window).bind("message", function(event){
86 | var data = JSON.parse(event.data || event.originalEvent.data);
87 |
88 | if( data.iframeid !== $self.data("id." + pluginName) ){
89 | return;
90 | }
91 |
92 | $iframe.attr("height", data.iframeheight);
93 | });
94 |
95 | // send a message to the iframe with the snippet to load and any
96 | // assets that are required to make it look right
97 | $iframe[0].contentWindow.postMessage({
98 | html: snippetHTML,
99 | head: headHTML,
100 | id: $self.data("id." + pluginName),
101 | selector: selector
102 | }, "*");
103 | });
104 |
105 | // style the iframe properly
106 | $iframe.addClass("xray-iframe");
107 |
108 | // replace the snippet which is rendered in the page with the iframe
109 | $(this).find(".snippet").html("").append($iframe);
110 | }
111 | },
112 | _createButton: function() {
113 | var btn = document.createElement( "a" ),
114 | txt = document.createTextNode( o.text.open ),
115 | el = $( this );
116 |
117 | btn.setAttribute( "class", o.classes.button );
118 | btn.href = "#";
119 | btn.appendChild( txt );
120 |
121 | $( btn )
122 | .bind( "click", function( e ) {
123 | var isOpen = el.attr( "class" ).indexOf( o.classes.open ) > -1;
124 |
125 | el[ isOpen ? "removeClass" : "addClass" ]( o.classes.open );
126 | btn.innerHTML = ( isOpen ? o.text.open : o.text.close );
127 |
128 | e.preventDefault();
129 |
130 | })
131 | .insertBefore( el );
132 | },
133 | _createSource: function() {
134 | var el = this;
135 | var getPrefixText = function () {
136 | if( el.className.match( new RegExp( "\\b" + o.classes.antipattern + "\\b", "gi" ) ) ) {
137 | return o.text.antipattern;
138 | }
139 | return o.text.titlePrefix;
140 | };
141 |
142 | var title = el.getElementsByClassName( o.classes.title );
143 | var deprecatedTitle;
144 |
145 | if( title.length ) {
146 | title = title[ 0 ];
147 | title.parentNode.removeChild( title );
148 | title.innerHTML = getPrefixText() + ": " + title.innerHTML;
149 | } else {
150 | deprecatedTitle = el.getAttribute( "data-title" );
151 | title = document.createElement( "div" );
152 | title.className = o.classes.title;
153 | title.innerHTML = getPrefixText() + ( deprecatedTitle ? ": " + deprecatedTitle : "" );
154 | }
155 |
156 | var suppliedsourcepanel = $( el ).find("." + o.classes.sourcepanel );
157 | var sourcepanel = document.createElement( "div" );
158 | var preel = document.createElement( "pre" );
159 | var codeel = document.createElement( "code" );
160 | var wrap = document.createElement( "div" );
161 | var code;
162 | var leadingWhiteSpace;
163 | var source;
164 |
165 | if( suppliedsourcepanel.length ) {
166 | code = suppliedsourcepanel[0].innerHTML;
167 | suppliedsourcepanel.remove();
168 | } else {
169 | code = el.innerHTML;
170 | }
171 |
172 | // remove empty value attributes
173 | code = code.replace( /\=\"\"/g, '' );
174 | leadingWhiteSpace = code.match( /(^[\s]+)/ );
175 |
176 | if( leadingWhiteSpace ) {
177 | code = code.replace( new RegExp( leadingWhiteSpace[ 1 ], "gmi" ), "\n" );
178 | }
179 |
180 | source = document.createTextNode( code );
181 |
182 | wrap.setAttribute( "class", "snippet" );
183 |
184 | $( el ).wrapInner( wrap );
185 |
186 | codeel.appendChild( source );
187 | preel.appendChild( codeel );
188 |
189 | sourcepanel.setAttribute( "class", o.classes.sourcepanel );
190 | sourcepanel.appendChild( preel );
191 |
192 | this.appendChild( sourcepanel );
193 |
194 | this.insertBefore( title, this.firstChild );
195 | }
196 | };
197 |
198 | // Collection method.
199 | $.fn[ pluginName ] = function( arrg, a, b, c ) {
200 | return this.each(function() {
201 |
202 | // if it's a method
203 | if( arrg && typeof( arrg ) === "string" ){
204 | return $.fn[ pluginName ].prototype[ arrg ].call( this, a, b, c );
205 | }
206 |
207 | // don't re-init
208 | if( $( this ).data( pluginName + "data" ) ){
209 | return $( this );
210 | }
211 |
212 | // otherwise, init
213 | $( this ).data( pluginName + "active", true );
214 | $.fn[ pluginName ].prototype._create.call( this );
215 | });
216 | };
217 |
218 | // add methods
219 | $.extend( $.fn[ pluginName ].prototype, methods );
220 |
221 | // auto-init
222 | var initted;
223 | function init(){
224 | if( !initted ){
225 | $( o.initSelector )[ pluginName ]();
226 | initted = true;
227 | }
228 | }
229 | // init either on beforeenhance event or domready, whichever comes first.
230 | $( document ).bind("beforeenhance", init );
231 | $( init );
232 |
233 |
234 | }( jQuery ));
235 |
--------------------------------------------------------------------------------
/src/lib/clipboard.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * clipboard.js v1.7.1
3 | * https://zenorocha.github.io/clipboard.js
4 | *
5 | * Licensed MIT © Zeno Rocha
6 | */
7 | (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.Clipboard = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o
0 && arguments[0] !== undefined ? arguments[0] : {};
424 |
425 | this.action = options.action;
426 | this.container = options.container;
427 | this.emitter = options.emitter;
428 | this.target = options.target;
429 | this.text = options.text;
430 | this.trigger = options.trigger;
431 |
432 | this.selectedText = '';
433 | }
434 | }, {
435 | key: 'initSelection',
436 | value: function initSelection() {
437 | if (this.text) {
438 | this.selectFake();
439 | } else if (this.target) {
440 | this.selectTarget();
441 | }
442 | }
443 | }, {
444 | key: 'selectFake',
445 | value: function selectFake() {
446 | var _this = this;
447 |
448 | var isRTL = document.documentElement.getAttribute('dir') == 'rtl';
449 |
450 | this.removeFake();
451 |
452 | this.fakeHandlerCallback = function () {
453 | return _this.removeFake();
454 | };
455 | this.fakeHandler = this.container.addEventListener('click', this.fakeHandlerCallback) || true;
456 |
457 | this.fakeElem = document.createElement('textarea');
458 | // Prevent zooming on iOS
459 | this.fakeElem.style.fontSize = '12pt';
460 | // Reset box model
461 | this.fakeElem.style.border = '0';
462 | this.fakeElem.style.padding = '0';
463 | this.fakeElem.style.margin = '0';
464 | // Move element out of screen horizontally
465 | this.fakeElem.style.position = 'absolute';
466 | this.fakeElem.style[isRTL ? 'right' : 'left'] = '-9999px';
467 | // Move element to the same position vertically
468 | var yPosition = window.pageYOffset || document.documentElement.scrollTop;
469 | this.fakeElem.style.top = yPosition + 'px';
470 |
471 | this.fakeElem.setAttribute('readonly', '');
472 | this.fakeElem.value = this.text;
473 |
474 | this.container.appendChild(this.fakeElem);
475 |
476 | this.selectedText = (0, _select2.default)(this.fakeElem);
477 | this.copyText();
478 | }
479 | }, {
480 | key: 'removeFake',
481 | value: function removeFake() {
482 | if (this.fakeHandler) {
483 | this.container.removeEventListener('click', this.fakeHandlerCallback);
484 | this.fakeHandler = null;
485 | this.fakeHandlerCallback = null;
486 | }
487 |
488 | if (this.fakeElem) {
489 | this.container.removeChild(this.fakeElem);
490 | this.fakeElem = null;
491 | }
492 | }
493 | }, {
494 | key: 'selectTarget',
495 | value: function selectTarget() {
496 | this.selectedText = (0, _select2.default)(this.target);
497 | this.copyText();
498 | }
499 | }, {
500 | key: 'copyText',
501 | value: function copyText() {
502 | var succeeded = void 0;
503 |
504 | try {
505 | succeeded = document.execCommand(this.action);
506 | } catch (err) {
507 | succeeded = false;
508 | }
509 |
510 | this.handleResult(succeeded);
511 | }
512 | }, {
513 | key: 'handleResult',
514 | value: function handleResult(succeeded) {
515 | this.emitter.emit(succeeded ? 'success' : 'error', {
516 | action: this.action,
517 | text: this.selectedText,
518 | trigger: this.trigger,
519 | clearSelection: this.clearSelection.bind(this)
520 | });
521 | }
522 | }, {
523 | key: 'clearSelection',
524 | value: function clearSelection() {
525 | if (this.trigger) {
526 | this.trigger.focus();
527 | }
528 |
529 | window.getSelection().removeAllRanges();
530 | }
531 | }, {
532 | key: 'destroy',
533 | value: function destroy() {
534 | this.removeFake();
535 | }
536 | }, {
537 | key: 'action',
538 | set: function set() {
539 | var action = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'copy';
540 |
541 | this._action = action;
542 |
543 | if (this._action !== 'copy' && this._action !== 'cut') {
544 | throw new Error('Invalid "action" value, use either "copy" or "cut"');
545 | }
546 | },
547 | get: function get() {
548 | return this._action;
549 | }
550 | }, {
551 | key: 'target',
552 | set: function set(target) {
553 | if (target !== undefined) {
554 | if (target && (typeof target === 'undefined' ? 'undefined' : _typeof(target)) === 'object' && target.nodeType === 1) {
555 | if (this.action === 'copy' && target.hasAttribute('disabled')) {
556 | throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute');
557 | }
558 |
559 | if (this.action === 'cut' && (target.hasAttribute('readonly') || target.hasAttribute('disabled'))) {
560 | throw new Error('Invalid "target" attribute. You can\'t cut text from elements with "readonly" or "disabled" attributes');
561 | }
562 |
563 | this._target = target;
564 | } else {
565 | throw new Error('Invalid "target" value, use a valid Element');
566 | }
567 | }
568 | },
569 | get: function get() {
570 | return this._target;
571 | }
572 | }]);
573 |
574 | return ClipboardAction;
575 | }();
576 |
577 | module.exports = ClipboardAction;
578 | });
579 |
580 | },{"select":5}],8:[function(require,module,exports){
581 | (function (global, factory) {
582 | if (typeof define === "function" && define.amd) {
583 | define(['module', './clipboard-action', 'tiny-emitter', 'good-listener'], factory);
584 | } else if (typeof exports !== "undefined") {
585 | factory(module, require('./clipboard-action'), require('tiny-emitter'), require('good-listener'));
586 | } else {
587 | var mod = {
588 | exports: {}
589 | };
590 | factory(mod, global.clipboardAction, global.tinyEmitter, global.goodListener);
591 | global.clipboard = mod.exports;
592 | }
593 | })(this, function (module, _clipboardAction, _tinyEmitter, _goodListener) {
594 | 'use strict';
595 |
596 | var _clipboardAction2 = _interopRequireDefault(_clipboardAction);
597 |
598 | var _tinyEmitter2 = _interopRequireDefault(_tinyEmitter);
599 |
600 | var _goodListener2 = _interopRequireDefault(_goodListener);
601 |
602 | function _interopRequireDefault(obj) {
603 | return obj && obj.__esModule ? obj : {
604 | default: obj
605 | };
606 | }
607 |
608 | var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
609 | return typeof obj;
610 | } : function (obj) {
611 | return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
612 | };
613 |
614 | function _classCallCheck(instance, Constructor) {
615 | if (!(instance instanceof Constructor)) {
616 | throw new TypeError("Cannot call a class as a function");
617 | }
618 | }
619 |
620 | var _createClass = function () {
621 | function defineProperties(target, props) {
622 | for (var i = 0; i < props.length; i++) {
623 | var descriptor = props[i];
624 | descriptor.enumerable = descriptor.enumerable || false;
625 | descriptor.configurable = true;
626 | if ("value" in descriptor) descriptor.writable = true;
627 | Object.defineProperty(target, descriptor.key, descriptor);
628 | }
629 | }
630 |
631 | return function (Constructor, protoProps, staticProps) {
632 | if (protoProps) defineProperties(Constructor.prototype, protoProps);
633 | if (staticProps) defineProperties(Constructor, staticProps);
634 | return Constructor;
635 | };
636 | }();
637 |
638 | function _possibleConstructorReturn(self, call) {
639 | if (!self) {
640 | throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
641 | }
642 |
643 | return call && (typeof call === "object" || typeof call === "function") ? call : self;
644 | }
645 |
646 | function _inherits(subClass, superClass) {
647 | if (typeof superClass !== "function" && superClass !== null) {
648 | throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
649 | }
650 |
651 | subClass.prototype = Object.create(superClass && superClass.prototype, {
652 | constructor: {
653 | value: subClass,
654 | enumerable: false,
655 | writable: true,
656 | configurable: true
657 | }
658 | });
659 | if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
660 | }
661 |
662 | var Clipboard = function (_Emitter) {
663 | _inherits(Clipboard, _Emitter);
664 |
665 | /**
666 | * @param {String|HTMLElement|HTMLCollection|NodeList} trigger
667 | * @param {Object} options
668 | */
669 | function Clipboard(trigger, options) {
670 | _classCallCheck(this, Clipboard);
671 |
672 | var _this = _possibleConstructorReturn(this, (Clipboard.__proto__ || Object.getPrototypeOf(Clipboard)).call(this));
673 |
674 | _this.resolveOptions(options);
675 | _this.listenClick(trigger);
676 | return _this;
677 | }
678 |
679 | /**
680 | * Defines if attributes would be resolved using internal setter functions
681 | * or custom functions that were passed in the constructor.
682 | * @param {Object} options
683 | */
684 |
685 |
686 | _createClass(Clipboard, [{
687 | key: 'resolveOptions',
688 | value: function resolveOptions() {
689 | var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
690 |
691 | this.action = typeof options.action === 'function' ? options.action : this.defaultAction;
692 | this.target = typeof options.target === 'function' ? options.target : this.defaultTarget;
693 | this.text = typeof options.text === 'function' ? options.text : this.defaultText;
694 | this.container = _typeof(options.container) === 'object' ? options.container : document.body;
695 | }
696 | }, {
697 | key: 'listenClick',
698 | value: function listenClick(trigger) {
699 | var _this2 = this;
700 |
701 | this.listener = (0, _goodListener2.default)(trigger, 'click', function (e) {
702 | return _this2.onClick(e);
703 | });
704 | }
705 | }, {
706 | key: 'onClick',
707 | value: function onClick(e) {
708 | var trigger = e.delegateTarget || e.currentTarget;
709 |
710 | if (this.clipboardAction) {
711 | this.clipboardAction = null;
712 | }
713 |
714 | this.clipboardAction = new _clipboardAction2.default({
715 | action: this.action(trigger),
716 | target: this.target(trigger),
717 | text: this.text(trigger),
718 | container: this.container,
719 | trigger: trigger,
720 | emitter: this
721 | });
722 | }
723 | }, {
724 | key: 'defaultAction',
725 | value: function defaultAction(trigger) {
726 | return getAttributeValue('action', trigger);
727 | }
728 | }, {
729 | key: 'defaultTarget',
730 | value: function defaultTarget(trigger) {
731 | var selector = getAttributeValue('target', trigger);
732 |
733 | if (selector) {
734 | return document.querySelector(selector);
735 | }
736 | }
737 | }, {
738 | key: 'defaultText',
739 | value: function defaultText(trigger) {
740 | return getAttributeValue('text', trigger);
741 | }
742 | }, {
743 | key: 'destroy',
744 | value: function destroy() {
745 | this.listener.destroy();
746 |
747 | if (this.clipboardAction) {
748 | this.clipboardAction.destroy();
749 | this.clipboardAction = null;
750 | }
751 | }
752 | }], [{
753 | key: 'isSupported',
754 | value: function isSupported() {
755 | var action = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ['copy', 'cut'];
756 |
757 | var actions = typeof action === 'string' ? [action] : action;
758 | var support = !!document.queryCommandSupported;
759 |
760 | actions.forEach(function (action) {
761 | support = support && !!document.queryCommandSupported(action);
762 | });
763 |
764 | return support;
765 | }
766 | }]);
767 |
768 | return Clipboard;
769 | }(_tinyEmitter2.default);
770 |
771 | /**
772 | * Helper function to retrieve attribute value.
773 | * @param {String} suffix
774 | * @param {Element} element
775 | */
776 | function getAttributeValue(suffix, element) {
777 | var attribute = 'data-clipboard-' + suffix;
778 |
779 | if (!element.hasAttribute(attribute)) {
780 | return;
781 | }
782 |
783 | return element.getAttribute(attribute);
784 | }
785 |
786 | module.exports = Clipboard;
787 | });
788 |
789 | },{"./clipboard-action":7,"good-listener":4,"tiny-emitter":6}]},{},[8])(8)
790 | });
--------------------------------------------------------------------------------
/src/lib/prism.css:
--------------------------------------------------------------------------------
1 | /**
2 | * prism.js default theme for JavaScript, CSS and HTML
3 | * Based on dabblet (http://dabblet.com)
4 | * @author Lea Verou
5 | */
6 |
7 | code[class*="language-"],
8 | pre[class*="language-"] {
9 | color: black;
10 | background: none;
11 | text-shadow: 0 1px white;
12 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
13 | text-align: left;
14 | white-space: pre;
15 | word-spacing: normal;
16 | word-break: normal;
17 | word-wrap: normal;
18 | line-height: 1.5;
19 |
20 | -moz-tab-size: 4;
21 | -o-tab-size: 4;
22 | tab-size: 4;
23 |
24 | -webkit-hyphens: none;
25 | -moz-hyphens: none;
26 | -ms-hyphens: none;
27 | hyphens: none;
28 | }
29 |
30 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
31 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
32 | text-shadow: none;
33 | background: #b3d4fc;
34 | }
35 |
36 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
37 | code[class*="language-"]::selection, code[class*="language-"] ::selection {
38 | text-shadow: none;
39 | background: #b3d4fc;
40 | }
41 |
42 | @media print {
43 | code[class*="language-"],
44 | pre[class*="language-"] {
45 | text-shadow: none;
46 | }
47 | }
48 |
49 | /* Code blocks */
50 | pre[class*="language-"] {
51 | padding: 1em;
52 | margin: .5em 0;
53 | overflow: auto;
54 | }
55 |
56 | :not(pre) > code[class*="language-"],
57 | pre[class*="language-"] {
58 | background: #f5f2f0;
59 | }
60 |
61 | /* Inline code */
62 | :not(pre) > code[class*="language-"] {
63 | padding: .1em;
64 | border-radius: .3em;
65 | white-space: normal;
66 | }
67 |
68 | .token.comment,
69 | .token.prolog,
70 | .token.doctype,
71 | .token.cdata {
72 | color: slategray;
73 | }
74 |
75 | .token.punctuation {
76 | color: #999;
77 | }
78 |
79 | .namespace {
80 | opacity: .7;
81 | }
82 |
83 | .token.property,
84 | .token.tag,
85 | .token.boolean,
86 | .token.number,
87 | .token.constant,
88 | .token.symbol,
89 | .token.deleted {
90 | color: #905;
91 | }
92 |
93 | .token.selector,
94 | .token.attr-name,
95 | .token.string,
96 | .token.char,
97 | .token.builtin,
98 | .token.inserted {
99 | color: #690;
100 | }
101 |
102 | .token.operator,
103 | .token.entity,
104 | .token.url,
105 | .language-css .token.string,
106 | .style .token.string {
107 | color: #a67f59;
108 | background: hsla(0, 0%, 100%, .5);
109 | }
110 |
111 | .token.atrule,
112 | .token.attr-value,
113 | .token.keyword {
114 | color: #07a;
115 | }
116 |
117 | .token.function {
118 | color: #DD4A68;
119 | }
120 |
121 | .token.regex,
122 | .token.important,
123 | .token.variable {
124 | color: #e90;
125 | }
126 |
127 | .token.important,
128 | .token.bold {
129 | font-weight: bold;
130 | }
131 | .token.italic {
132 | font-style: italic;
133 | }
134 |
135 | .token.entity {
136 | cursor: help;
137 | }
138 |
--------------------------------------------------------------------------------
/src/lib/prism.js:
--------------------------------------------------------------------------------
1 |
2 | /* **********************************************
3 | Begin prism-core.js
4 | ********************************************** */
5 |
6 | var _self = (typeof window !== 'undefined')
7 | ? window // if in browser
8 | : (
9 | (typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope)
10 | ? self // if in worker
11 | : {} // if in node js
12 | );
13 |
14 | /**
15 | * Prism: Lightweight, robust, elegant syntax highlighting
16 | * MIT license http://www.opensource.org/licenses/mit-license.php/
17 | * @author Lea Verou http://lea.verou.me
18 | */
19 |
20 | var Prism = (function(){
21 |
22 | // Private helper vars
23 | var lang = /\blang(?:uage)?-(\w+)\b/i;
24 | var uniqueId = 0;
25 |
26 | var _ = _self.Prism = {
27 | util: {
28 | encode: function (tokens) {
29 | if (tokens instanceof Token) {
30 | return new Token(tokens.type, _.util.encode(tokens.content), tokens.alias);
31 | } else if (_.util.type(tokens) === 'Array') {
32 | return tokens.map(_.util.encode);
33 | } else {
34 | return tokens.replace(/&/g, '&').replace(/ text.length) {
305 | // Something went terribly wrong, ABORT, ABORT!
306 | break tokenloop;
307 | }
308 |
309 | if (str instanceof Token) {
310 | continue;
311 | }
312 |
313 | pattern.lastIndex = 0;
314 |
315 | var match = pattern.exec(str),
316 | delNum = 1;
317 |
318 | // Greedy patterns can override/remove up to two previously matched tokens
319 | if (!match && greedy && i != strarr.length - 1) {
320 | pattern.lastIndex = pos;
321 | match = pattern.exec(text);
322 | if (!match) {
323 | break;
324 | }
325 |
326 | var from = match.index + (lookbehind ? match[1].length : 0),
327 | to = match.index + match[0].length,
328 | k = i,
329 | p = pos;
330 |
331 | for (var len = strarr.length; k < len && p < to; ++k) {
332 | p += strarr[k].length;
333 | // Move the index i to the element in strarr that is closest to from
334 | if (from >= p) {
335 | ++i;
336 | pos = p;
337 | }
338 | }
339 |
340 | /*
341 | * If strarr[i] is a Token, then the match starts inside another Token, which is invalid
342 | * If strarr[k - 1] is greedy we are in conflict with another greedy pattern
343 | */
344 | if (strarr[i] instanceof Token || strarr[k - 1].greedy) {
345 | continue;
346 | }
347 |
348 | // Number of tokens to delete and replace with the new match
349 | delNum = k - i;
350 | str = text.slice(pos, p);
351 | match.index -= pos;
352 | }
353 |
354 | if (!match) {
355 | continue;
356 | }
357 |
358 | if(lookbehind) {
359 | lookbehindLength = match[1].length;
360 | }
361 |
362 | var from = match.index + lookbehindLength,
363 | match = match[0].slice(lookbehindLength),
364 | to = from + match.length,
365 | before = str.slice(0, from),
366 | after = str.slice(to);
367 |
368 | var args = [i, delNum];
369 |
370 | if (before) {
371 | args.push(before);
372 | }
373 |
374 | var wrapped = new Token(token, inside? _.tokenize(match, inside) : match, alias, match, greedy);
375 |
376 | args.push(wrapped);
377 |
378 | if (after) {
379 | args.push(after);
380 | }
381 |
382 | Array.prototype.splice.apply(strarr, args);
383 | }
384 | }
385 | }
386 |
387 | return strarr;
388 | },
389 |
390 | hooks: {
391 | all: {},
392 |
393 | add: function (name, callback) {
394 | var hooks = _.hooks.all;
395 |
396 | hooks[name] = hooks[name] || [];
397 |
398 | hooks[name].push(callback);
399 | },
400 |
401 | run: function (name, env) {
402 | var callbacks = _.hooks.all[name];
403 |
404 | if (!callbacks || !callbacks.length) {
405 | return;
406 | }
407 |
408 | for (var i=0, callback; callback = callbacks[i++];) {
409 | callback(env);
410 | }
411 | }
412 | }
413 | };
414 |
415 | var Token = _.Token = function(type, content, alias, matchedStr, greedy) {
416 | this.type = type;
417 | this.content = content;
418 | this.alias = alias;
419 | // Copy of the full string this token was created from
420 | this.length = (matchedStr || "").length|0;
421 | this.greedy = !!greedy;
422 | };
423 |
424 | Token.stringify = function(o, language, parent) {
425 | if (typeof o == 'string') {
426 | return o;
427 | }
428 |
429 | if (_.util.type(o) === 'Array') {
430 | return o.map(function(element) {
431 | return Token.stringify(element, language, o);
432 | }).join('');
433 | }
434 |
435 | var env = {
436 | type: o.type,
437 | content: Token.stringify(o.content, language, parent),
438 | tag: 'span',
439 | classes: ['token', o.type],
440 | attributes: {},
441 | language: language,
442 | parent: parent
443 | };
444 |
445 | if (env.type == 'comment') {
446 | env.attributes['spellcheck'] = 'true';
447 | }
448 |
449 | if (o.alias) {
450 | var aliases = _.util.type(o.alias) === 'Array' ? o.alias : [o.alias];
451 | Array.prototype.push.apply(env.classes, aliases);
452 | }
453 |
454 | _.hooks.run('wrap', env);
455 |
456 | var attributes = Object.keys(env.attributes).map(function(name) {
457 | return name + '="' + (env.attributes[name] || '').replace(/"/g, '"') + '"';
458 | }).join(' ');
459 |
460 | return '<' + env.tag + ' class="' + env.classes.join(' ') + '"' + (attributes ? ' ' + attributes : '') + '>' + env.content + '';
461 |
462 | };
463 |
464 | if (!_self.document) {
465 | if (!_self.addEventListener) {
466 | // in Node.js
467 | return _self.Prism;
468 | }
469 | // In worker
470 | _self.addEventListener('message', function(evt) {
471 | var message = JSON.parse(evt.data),
472 | lang = message.language,
473 | code = message.code,
474 | immediateClose = message.immediateClose;
475 |
476 | _self.postMessage(_.highlight(code, _.languages[lang], lang));
477 | if (immediateClose) {
478 | _self.close();
479 | }
480 | }, false);
481 |
482 | return _self.Prism;
483 | }
484 |
485 | //Get current script and highlight
486 | var script = document.currentScript || [].slice.call(document.getElementsByTagName("script")).pop();
487 |
488 | if (script) {
489 | _.filename = script.src;
490 |
491 | if (document.addEventListener && !script.hasAttribute('data-manual')) {
492 | if(document.readyState !== "loading") {
493 | if (window.requestAnimationFrame) {
494 | window.requestAnimationFrame(_.highlightAll);
495 | } else {
496 | window.setTimeout(_.highlightAll, 16);
497 | }
498 | }
499 | else {
500 | document.addEventListener('DOMContentLoaded', _.highlightAll);
501 | }
502 | }
503 | }
504 |
505 | return _self.Prism;
506 |
507 | })();
508 |
509 | if (typeof module !== 'undefined' && module.exports) {
510 | module.exports = Prism;
511 | }
512 |
513 | // hack for components to work correctly in node.js
514 | if (typeof global !== 'undefined') {
515 | global.Prism = Prism;
516 | }
517 |
518 |
519 | /* **********************************************
520 | Begin prism-markup.js
521 | ********************************************** */
522 |
523 | Prism.languages.markup = {
524 | 'comment': //,
525 | 'prolog': /<\?[\w\W]+?\?>/,
526 | 'doctype': //i,
527 | 'cdata': //i,
528 | 'tag': {
529 | pattern: /<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\\1|\\?(?!\1)[\w\W])*\1|[^\s'">=]+))?)*\s*\/?>/i,
530 | inside: {
531 | 'tag': {
532 | pattern: /^<\/?[^\s>\/]+/i,
533 | inside: {
534 | 'punctuation': /^<\/?/,
535 | 'namespace': /^[^\s>\/:]+:/
536 | }
537 | },
538 | 'attr-value': {
539 | pattern: /=(?:('|")[\w\W]*?(\1)|[^\s>]+)/i,
540 | inside: {
541 | 'punctuation': /[=>"']/
542 | }
543 | },
544 | 'punctuation': /\/?>/,
545 | 'attr-name': {
546 | pattern: /[^\s>\/]+/,
547 | inside: {
548 | 'namespace': /^[^\s>\/:]+:/
549 | }
550 | }
551 |
552 | }
553 | },
554 | 'entity': /&#?[\da-z]{1,8};/i
555 | };
556 |
557 | // Plugin to make entity title show the real entity, idea by Roman Komarov
558 | Prism.hooks.add('wrap', function(env) {
559 |
560 | if (env.type === 'entity') {
561 | env.attributes['title'] = env.content.replace(/&/, '&');
562 | }
563 | });
564 |
565 | Prism.languages.xml = Prism.languages.markup;
566 | Prism.languages.html = Prism.languages.markup;
567 | Prism.languages.mathml = Prism.languages.markup;
568 | Prism.languages.svg = Prism.languages.markup;
569 |
570 |
571 | /* **********************************************
572 | Begin prism-css.js
573 | ********************************************** */
574 |
575 | Prism.languages.css = {
576 | 'comment': /\/\*[\w\W]*?\*\//,
577 | 'atrule': {
578 | pattern: /@[\w-]+?.*?(;|(?=\s*\{))/i,
579 | inside: {
580 | 'rule': /@[\w-]+/
581 | // See rest below
582 | }
583 | },
584 | 'url': /url\((?:(["'])(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,
585 | 'selector': /[^\{\}\s][^\{\};]*?(?=\s*\{)/,
586 | 'string': {
587 | pattern: /("|')(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1/,
588 | greedy: true
589 | },
590 | 'property': /(\b|\B)[\w-]+(?=\s*:)/i,
591 | 'important': /\B!important\b/i,
592 | 'function': /[-a-z0-9]+(?=\()/i,
593 | 'punctuation': /[(){};:]/
594 | };
595 |
596 | Prism.languages.css['atrule'].inside.rest = Prism.util.clone(Prism.languages.css);
597 |
598 | if (Prism.languages.markup) {
599 | Prism.languages.insertBefore('markup', 'tag', {
600 | 'style': {
601 | pattern: /()[\w\W]*?(?=<\/style>)/i,
602 | lookbehind: true,
603 | inside: Prism.languages.css,
604 | alias: 'language-css'
605 | }
606 | });
607 |
608 | Prism.languages.insertBefore('inside', 'attr-value', {
609 | 'style-attr': {
610 | pattern: /\s*style=("|').*?\1/i,
611 | inside: {
612 | 'attr-name': {
613 | pattern: /^\s*style/i,
614 | inside: Prism.languages.markup.tag.inside
615 | },
616 | 'punctuation': /^\s*=\s*['"]|['"]\s*$/,
617 | 'attr-value': {
618 | pattern: /.+/i,
619 | inside: Prism.languages.css
620 | }
621 | },
622 | alias: 'language-css'
623 | }
624 | }, Prism.languages.markup.tag);
625 | }
626 |
627 | /* **********************************************
628 | Begin prism-clike.js
629 | ********************************************** */
630 |
631 | Prism.languages.clike = {
632 | 'comment': [
633 | {
634 | pattern: /(^|[^\\])\/\*[\w\W]*?\*\//,
635 | lookbehind: true
636 | },
637 | {
638 | pattern: /(^|[^\\:])\/\/.*/,
639 | lookbehind: true
640 | }
641 | ],
642 | 'string': {
643 | pattern: /(["'])(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,
644 | greedy: true
645 | },
646 | 'class-name': {
647 | pattern: /((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/i,
648 | lookbehind: true,
649 | inside: {
650 | punctuation: /(\.|\\)/
651 | }
652 | },
653 | 'keyword': /\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,
654 | 'boolean': /\b(true|false)\b/,
655 | 'function': /[a-z0-9_]+(?=\()/i,
656 | 'number': /\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,
657 | 'operator': /--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,
658 | 'punctuation': /[{}[\];(),.:]/
659 | };
660 |
661 |
662 | /* **********************************************
663 | Begin prism-javascript.js
664 | ********************************************** */
665 |
666 | Prism.languages.javascript = Prism.languages.extend('clike', {
667 | 'keyword': /\b(as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,
668 | 'number': /\b-?(0x[\dA-Fa-f]+|0b[01]+|0o[0-7]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|Infinity)\b/,
669 | // Allow for all non-ASCII characters (See http://stackoverflow.com/a/2008444)
670 | 'function': /[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*(?=\()/i,
671 | 'operator': /--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*\*?|\/|~|\^|%|\.{3}/
672 | });
673 |
674 | Prism.languages.insertBefore('javascript', 'keyword', {
675 | 'regex': {
676 | pattern: /(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\\\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,
677 | lookbehind: true,
678 | greedy: true
679 | }
680 | });
681 |
682 | Prism.languages.insertBefore('javascript', 'string', {
683 | 'template-string': {
684 | pattern: /`(?:\\\\|\\?[^\\])*?`/,
685 | greedy: true,
686 | inside: {
687 | 'interpolation': {
688 | pattern: /\$\{[^}]+\}/,
689 | inside: {
690 | 'interpolation-punctuation': {
691 | pattern: /^\$\{|\}$/,
692 | alias: 'punctuation'
693 | },
694 | rest: Prism.languages.javascript
695 | }
696 | },
697 | 'string': /[\s\S]+/
698 | }
699 | }
700 | });
701 |
702 | if (Prism.languages.markup) {
703 | Prism.languages.insertBefore('markup', 'tag', {
704 | 'script': {
705 | pattern: /()[\w\W]*?(?=<\/script>)/i,
706 | lookbehind: true,
707 | inside: Prism.languages.javascript,
708 | alias: 'language-javascript'
709 | }
710 | });
711 | }
712 |
713 | Prism.languages.js = Prism.languages.javascript;
714 |
715 | /* **********************************************
716 | Begin prism-file-highlight.js
717 | ********************************************** */
718 |
719 | (function () {
720 | if (typeof self === 'undefined' || !self.Prism || !self.document || !document.querySelector) {
721 | return;
722 | }
723 |
724 | self.Prism.fileHighlight = function() {
725 |
726 | var Extensions = {
727 | 'js': 'javascript',
728 | 'py': 'python',
729 | 'rb': 'ruby',
730 | 'ps1': 'powershell',
731 | 'psm1': 'powershell',
732 | 'sh': 'bash',
733 | 'bat': 'batch',
734 | 'h': 'c',
735 | 'tex': 'latex'
736 | };
737 |
738 | if(Array.prototype.forEach) { // Check to prevent error in IE8
739 | Array.prototype.slice.call(document.querySelectorAll('pre[data-src]')).forEach(function (pre) {
740 | var src = pre.getAttribute('data-src');
741 |
742 | var language, parent = pre;
743 | var lang = /\blang(?:uage)?-(?!\*)(\w+)\b/i;
744 | while (parent && !lang.test(parent.className)) {
745 | parent = parent.parentNode;
746 | }
747 |
748 | if (parent) {
749 | language = (pre.className.match(lang) || [, ''])[1];
750 | }
751 |
752 | if (!language) {
753 | var extension = (src.match(/\.(\w+)$/) || [, ''])[1];
754 | language = Extensions[extension] || extension;
755 | }
756 |
757 | var code = document.createElement('code');
758 | code.className = 'language-' + language;
759 |
760 | pre.textContent = '';
761 |
762 | code.textContent = 'Loading…';
763 |
764 | pre.appendChild(code);
765 |
766 | var xhr = new XMLHttpRequest();
767 |
768 | xhr.open('GET', src, true);
769 |
770 | xhr.onreadystatechange = function () {
771 | if (xhr.readyState == 4) {
772 |
773 | if (xhr.status < 400 && xhr.responseText) {
774 | code.textContent = xhr.responseText;
775 |
776 | Prism.highlightElement(code);
777 | }
778 | else if (xhr.status >= 400) {
779 | code.textContent = '✖ Error ' + xhr.status + ' while fetching file: ' + xhr.statusText;
780 | }
781 | else {
782 | code.textContent = '✖ Error: File does not exist or is empty';
783 | }
784 | }
785 | };
786 |
787 | xhr.send(null);
788 | });
789 | }
790 |
791 | };
792 |
793 | document.addEventListener('DOMContentLoaded', self.Prism.fileHighlight);
794 |
795 | })();
796 |
--------------------------------------------------------------------------------
/src/lib/shoestring.js:
--------------------------------------------------------------------------------
1 | /*! Shoestring - v2.0.1 - 2017-05-24
2 | * http://github.com/filamentgroup/shoestring/
3 | * Copyright (c) 2017 Scott Jehl, Filament Group, Inc; Licensed MIT & GPLv2 */
4 | (function( factory ) {
5 | if( typeof define === 'function' && define.amd ) {
6 | // AMD. Register as an anonymous module.
7 | define( [ 'shoestring' ], factory );
8 | } else if (typeof module === 'object' && module.exports) {
9 | // Node/CommonJS
10 | module.exports = factory();
11 | } else {
12 | // Browser globals
13 | factory();
14 | }
15 | }(function () {
16 | var win = typeof window !== "undefined" ? window : this;
17 | var doc = win.document;
18 |
19 |
20 | /**
21 | * The shoestring object constructor.
22 | *
23 | * @param {string,object} prim The selector to find or element to wrap.
24 | * @param {object} sec The context in which to match the `prim` selector.
25 | * @returns shoestring
26 | * @this window
27 | */
28 | function shoestring( prim, sec ){
29 | var pType = typeof( prim ),
30 | ret = [],
31 | sel;
32 |
33 | // return an empty shoestring object
34 | if( !prim ){
35 | return new Shoestring( ret );
36 | }
37 |
38 | // ready calls
39 | if( prim.call ){
40 | return shoestring.ready( prim );
41 | }
42 |
43 | // handle re-wrapping shoestring objects
44 | if( prim.constructor === Shoestring && !sec ){
45 | return prim;
46 | }
47 |
48 | // if string starting with <, make html
49 | if( pType === "string" && prim.indexOf( "<" ) === 0 ){
50 | var dfrag = doc.createElement( "div" );
51 |
52 | dfrag.innerHTML = prim;
53 |
54 | // TODO depends on children (circular)
55 | return shoestring( dfrag ).children().each(function(){
56 | dfrag.removeChild( this );
57 | });
58 | }
59 |
60 | // if string, it's a selector, use qsa
61 | if( pType === "string" ){
62 | if( sec ){
63 | return shoestring( sec ).find( prim );
64 | }
65 |
66 | sel = doc.querySelectorAll( prim );
67 |
68 | return new Shoestring( sel, prim );
69 | }
70 |
71 | // array like objects or node lists
72 | if( Object.prototype.toString.call( pType ) === '[object Array]' ||
73 | (win.NodeList && prim instanceof win.NodeList) ){
74 |
75 | return new Shoestring( prim, prim );
76 | }
77 |
78 | // if it's an array, use all the elements
79 | if( prim.constructor === Array ){
80 | return new Shoestring( prim, prim );
81 | }
82 |
83 | // otherwise assume it's an object the we want at an index
84 | return new Shoestring( [prim], prim );
85 | }
86 |
87 | var Shoestring = function( ret, prim ) {
88 | this.length = 0;
89 | this.selector = prim;
90 | shoestring.merge(this, ret);
91 | };
92 |
93 | // TODO only required for tests
94 | Shoestring.prototype.reverse = [].reverse;
95 |
96 | // For adding element set methods
97 | shoestring.fn = Shoestring.prototype;
98 |
99 | shoestring.Shoestring = Shoestring;
100 |
101 | // For extending objects
102 | // TODO move to separate module when we use prototypes
103 | shoestring.extend = function( first, second ){
104 | for( var i in second ){
105 | if( second.hasOwnProperty( i ) ){
106 | first[ i ] = second[ i ];
107 | }
108 | }
109 |
110 | return first;
111 | };
112 |
113 | // taken directly from jQuery
114 | shoestring.merge = function( first, second ) {
115 | var len, j, i;
116 |
117 | len = +second.length,
118 | j = 0,
119 | i = first.length;
120 |
121 | for ( ; j < len; j++ ) {
122 | first[ i++ ] = second[ j ];
123 | }
124 |
125 | first.length = i;
126 |
127 | return first;
128 | };
129 |
130 | // expose
131 | win.shoestring = shoestring;
132 |
133 |
134 |
135 | /**
136 | * Make an HTTP request to a url.
137 | *
138 | * **NOTE** the following options are supported:
139 | *
140 | * - *method* - The HTTP method used with the request. Default: `GET`.
141 | * - *data* - Raw object with keys and values to pass with request as query params. Default `null`.
142 | * - *headers* - Set of request headers to add. Default `{}`.
143 | * - *async* - Whether the opened request is asynchronouse. Default `true`.
144 | * - *success* - Callback for successful request and response. Passed the response data.
145 | * - *error* - Callback for failed request and response.
146 | * - *cancel* - Callback for cancelled request and response.
147 | *
148 | * @param {string} url The url to request.
149 | * @param {object} options The options object, see Notes.
150 | * @return shoestring
151 | * @this shoestring
152 | */
153 |
154 | shoestring.ajax = function( url, options ) {
155 | var params = "", req = new XMLHttpRequest(), settings, key;
156 |
157 | settings = shoestring.extend( {}, shoestring.ajax.settings );
158 |
159 | if( options ){
160 | shoestring.extend( settings, options );
161 | }
162 |
163 | if( !url ){
164 | url = settings.url;
165 | }
166 |
167 | if( !req || !url ){
168 | return;
169 | }
170 |
171 | // create parameter string from data object
172 | if( settings.data ){
173 | for( key in settings.data ){
174 | if( settings.data.hasOwnProperty( key ) ){
175 | if( params !== "" ){
176 | params += "&";
177 | }
178 | params += encodeURIComponent( key ) + "=" +
179 | encodeURIComponent( settings.data[key] );
180 | }
181 | }
182 | }
183 |
184 | // append params to url for GET requests
185 | if( settings.method === "GET" && params ){
186 |
187 | url += "?" + params;
188 | }
189 |
190 | req.open( settings.method, url, settings.async );
191 |
192 | if( req.setRequestHeader ){
193 | req.setRequestHeader( "X-Requested-With", "XMLHttpRequest" );
194 |
195 | // Set 'Content-type' header for POST requests
196 | if( settings.method === "POST" && params ){
197 | req.setRequestHeader( "Content-type", "application/x-www-form-urlencoded" );
198 | }
199 |
200 | for( key in settings.headers ){
201 | if( settings.headers.hasOwnProperty( key ) ){
202 | req.setRequestHeader(key, settings.headers[ key ]);
203 | }
204 | }
205 | }
206 |
207 | req.onreadystatechange = function () {
208 | if( req.readyState === 4 ){
209 | // Trim the whitespace so shoestring('') works
210 | var res = (req.responseText || '').replace(/^\s+|\s+$/g, '');
211 | if( req.status.toString().indexOf( "0" ) === 0 ){
212 | return settings.cancel( res, req.status, req );
213 | }
214 | else if ( req.status.toString().match( /^(4|5)/ ) && RegExp.$1 ){
215 | return settings.error( res, req.status, req );
216 | }
217 | else if (settings.success) {
218 | return settings.success( res, req.status, req );
219 | }
220 | }
221 | };
222 |
223 | if( req.readyState === 4 ){
224 | return req;
225 | }
226 |
227 | // Send request
228 | if( settings.method === "POST" && params ){
229 | req.send( params );
230 | } else {
231 | req.send();
232 | }
233 |
234 | return req;
235 | };
236 |
237 | shoestring.ajax.settings = {
238 | success: function(){},
239 | error: function(){},
240 | cancel: function(){},
241 | method: "GET",
242 | async: true,
243 | data: null,
244 | headers: {}
245 | };
246 |
247 |
248 |
249 | /**
250 | * Helper function wrapping a call to [ajax](ajax.js.html) using the `GET` method.
251 | *
252 | * @param {string} url The url to GET from.
253 | * @param {function} callback Callback to invoke on success.
254 | * @return shoestring
255 | * @this shoestring
256 | */
257 | shoestring.get = function( url, callback ){
258 | return shoestring.ajax( url, { success: callback } );
259 | };
260 |
261 |
262 |
263 | /**
264 | * Load the HTML response from `url` into the current set of elements.
265 | *
266 | * @param {string} url The url to GET from.
267 | * @param {function} callback Callback to invoke after HTML is inserted.
268 | * @return shoestring
269 | * @this shoestring
270 | */
271 | shoestring.fn.load = function( url, callback ){
272 | var self = this,
273 | args = arguments,
274 | intCB = function( data ){
275 | self.each(function(){
276 | shoestring( this ).html( data );
277 | });
278 |
279 | if( callback ){
280 | callback.apply( self, args );
281 | }
282 | };
283 |
284 | shoestring.ajax( url, { success: intCB } );
285 | return this;
286 | };
287 |
288 |
289 |
290 | /**
291 | * Helper function wrapping a call to [ajax](ajax.js.html) using the `POST` method.
292 | *
293 | * @param {string} url The url to POST to.
294 | * @param {object} data The data to send.
295 | * @param {function} callback Callback to invoke on success.
296 | * @return shoestring
297 | * @this shoestring
298 | */
299 | shoestring.post = function( url, data, callback ){
300 | return shoestring.ajax( url, { data: data, method: "POST", success: callback } );
301 | };
302 |
303 |
304 |
305 | /**
306 | * Iterates over `shoestring` collections.
307 | *
308 | * @param {function} callback The callback to be invoked on each element and index
309 | * @return shoestring
310 | * @this shoestring
311 | */
312 | shoestring.fn.each = function( callback ){
313 | return shoestring.each( this, callback );
314 | };
315 |
316 | shoestring.each = function( collection, callback ) {
317 | var val;
318 | for( var i = 0, il = collection.length; i < il; i++ ){
319 | val = callback.call( collection[i], i, collection[i] );
320 | if( val === false ){
321 | break;
322 | }
323 | }
324 |
325 | return collection;
326 | };
327 |
328 |
329 |
330 | /**
331 | * Check for array membership.
332 | *
333 | * @param {object} needle The thing to find.
334 | * @param {object} haystack The thing to find the needle in.
335 | * @return {boolean}
336 | * @this window
337 | */
338 | shoestring.inArray = function( needle, haystack ){
339 | var isin = -1;
340 | for( var i = 0, il = haystack.length; i < il; i++ ){
341 | if( haystack.hasOwnProperty( i ) && haystack[ i ] === needle ){
342 | isin = i;
343 | }
344 | }
345 | return isin;
346 | };
347 |
348 |
349 |
350 | /**
351 | * Bind callbacks to be run when the DOM is "ready".
352 | *
353 | * @param {function} fn The callback to be run
354 | * @return shoestring
355 | * @this shoestring
356 | */
357 | shoestring.ready = function( fn ){
358 | if( ready && fn ){
359 | fn.call( doc );
360 | }
361 | else if( fn ){
362 | readyQueue.push( fn );
363 | }
364 | else {
365 | runReady();
366 | }
367 |
368 | return [doc];
369 | };
370 |
371 | // TODO necessary?
372 | shoestring.fn.ready = function( fn ){
373 | shoestring.ready( fn );
374 | return this;
375 | };
376 |
377 | // Empty and exec the ready queue
378 | var ready = false,
379 | readyQueue = [],
380 | runReady = function(){
381 | if( !ready ){
382 | while( readyQueue.length ){
383 | readyQueue.shift().call( doc );
384 | }
385 | ready = true;
386 | }
387 | };
388 |
389 | // If DOM is already ready at exec time, depends on the browser.
390 | // From: https://github.com/mobify/mobifyjs/blob/526841be5509e28fc949038021799e4223479f8d/src/capture.js#L128
391 | if (doc.attachEvent ? doc.readyState === "complete" : doc.readyState !== "loading") {
392 | runReady();
393 | } else {
394 | doc.addEventListener( "DOMContentLoaded", runReady, false );
395 | doc.addEventListener( "readystatechange", runReady, false );
396 | win.addEventListener( "load", runReady, false );
397 | }
398 |
399 |
400 |
401 | /**
402 | * Checks the current set of elements against the selector, if one matches return `true`.
403 | *
404 | * @param {string} selector The selector to check.
405 | * @return {boolean}
406 | * @this {shoestring}
407 | */
408 | shoestring.fn.is = function( selector ){
409 | var ret = false, self = this, parents, check;
410 |
411 | // assume a dom element
412 | if( typeof selector !== "string" ){
413 | // array-like, ie shoestring objects or element arrays
414 | if( selector.length && selector[0] ){
415 | check = selector;
416 | } else {
417 | check = [selector];
418 | }
419 |
420 | return _checkElements(this, check);
421 | }
422 |
423 | parents = this.parent();
424 |
425 | if( !parents.length ){
426 | parents = shoestring( doc );
427 | }
428 |
429 | parents.each(function( i, e ) {
430 | var children;
431 |
432 | children = e.querySelectorAll( selector );
433 |
434 | ret = _checkElements( self, children );
435 | });
436 |
437 | return ret;
438 | };
439 |
440 | function _checkElements(needles, haystack){
441 | var ret = false;
442 |
443 | needles.each(function() {
444 | var j = 0;
445 |
446 | while( j < haystack.length ){
447 | if( this === haystack[j] ){
448 | ret = true;
449 | }
450 |
451 | j++;
452 | }
453 | });
454 |
455 | return ret;
456 | }
457 |
458 |
459 |
460 | /**
461 | * Get data attached to the first element or set data values on all elements in the current set.
462 | *
463 | * @param {string} name The data attribute name.
464 | * @param {any} value The value assigned to the data attribute.
465 | * @return {any|shoestring}
466 | * @this shoestring
467 | */
468 | shoestring.fn.data = function( name, value ){
469 | if( name !== undefined ){
470 | if( value !== undefined ){
471 | return this.each(function(){
472 | if( !this.shoestringData ){
473 | this.shoestringData = {};
474 | }
475 |
476 | this.shoestringData[ name ] = value;
477 | });
478 | }
479 | else {
480 | if( this[ 0 ] ) {
481 | if( this[ 0 ].shoestringData ) {
482 | return this[ 0 ].shoestringData[ name ];
483 | }
484 | }
485 | }
486 | }
487 | else {
488 | return this[ 0 ] ? this[ 0 ].shoestringData || {} : undefined;
489 | }
490 | };
491 |
492 |
493 | /**
494 | * Remove data associated with `name` or all the data, for each element in the current set.
495 | *
496 | * @param {string} name The data attribute name.
497 | * @return shoestring
498 | * @this shoestring
499 | */
500 | shoestring.fn.removeData = function( name ){
501 | return this.each(function(){
502 | if( name !== undefined && this.shoestringData ){
503 | this.shoestringData[ name ] = undefined;
504 | delete this.shoestringData[ name ];
505 | } else {
506 | this[ 0 ].shoestringData = {};
507 | }
508 | });
509 | };
510 |
511 |
512 |
513 | /**
514 | * An alias for the `shoestring` constructor.
515 | */
516 | win.$ = shoestring;
517 |
518 |
519 |
520 | /**
521 | * Add a class to each DOM element in the set of elements.
522 | *
523 | * @param {string} className The name of the class to be added.
524 | * @return shoestring
525 | * @this shoestring
526 | */
527 | shoestring.fn.addClass = function( className ){
528 | var classes = className.replace(/^\s+|\s+$/g, '').split( " " );
529 |
530 | return this.each(function(){
531 | for( var i = 0, il = classes.length; i < il; i++ ){
532 | if( this.className !== undefined &&
533 | (this.className === "" ||
534 | !this.className.match( new RegExp( "(^|\\s)" + classes[ i ] + "($|\\s)"))) ){
535 | this.className += " " + classes[ i ];
536 | }
537 | }
538 | });
539 | };
540 |
541 |
542 |
543 | /**
544 | * Add elements matching the selector to the current set.
545 | *
546 | * @param {string} selector The selector for the elements to add from the DOM
547 | * @return shoestring
548 | * @this shoestring
549 | */
550 | shoestring.fn.add = function( selector ){
551 | var ret = [];
552 | this.each(function(){
553 | ret.push( this );
554 | });
555 |
556 | shoestring( selector ).each(function(){
557 | ret.push( this );
558 | });
559 |
560 | return shoestring( ret );
561 | };
562 |
563 |
564 |
565 | /**
566 | * Insert an element or HTML string after each element in the current set.
567 | *
568 | * @param {string|HTMLElement} fragment The HTML or HTMLElement to insert.
569 | * @return shoestring
570 | * @this shoestring
571 | */
572 | shoestring.fn.after = function( fragment ){
573 | if( typeof( fragment ) === "string" || fragment.nodeType !== undefined ){
574 | fragment = shoestring( fragment );
575 | }
576 |
577 | if( fragment.length > 1 ){
578 | fragment = fragment.reverse();
579 | }
580 | return this.each(function( i ){
581 | for( var j = 0, jl = fragment.length; j < jl; j++ ){
582 | var insertEl = i > 0 ? fragment[ j ].cloneNode( true ) : fragment[ j ];
583 | this.parentNode.insertBefore( insertEl, this.nextSibling );
584 | }
585 | });
586 | };
587 |
588 |
589 |
590 | /**
591 | * Insert an element or HTML string as the last child of each element in the set.
592 | *
593 | * @param {string|HTMLElement} fragment The HTML or HTMLElement to insert.
594 | * @return shoestring
595 | * @this shoestring
596 | */
597 | shoestring.fn.append = function( fragment ){
598 | if( typeof( fragment ) === "string" || fragment.nodeType !== undefined ){
599 | fragment = shoestring( fragment );
600 | }
601 |
602 | return this.each(function( i ){
603 | for( var j = 0, jl = fragment.length; j < jl; j++ ){
604 | this.appendChild( i > 0 ? fragment[ j ].cloneNode( true ) : fragment[ j ] );
605 | }
606 | });
607 | };
608 |
609 |
610 |
611 | /**
612 | * Insert the current set as the last child of the elements matching the selector.
613 | *
614 | * @param {string} selector The selector after which to append the current set.
615 | * @return shoestring
616 | * @this shoestring
617 | */
618 | shoestring.fn.appendTo = function( selector ){
619 | return this.each(function(){
620 | shoestring( selector ).append( this );
621 | });
622 | };
623 |
624 |
625 |
626 | /**
627 | * Get the value of the first element of the set or set the value of all the elements in the set.
628 | *
629 | * @param {string} name The attribute name.
630 | * @param {string} value The new value for the attribute.
631 | * @return {shoestring|string|undefined}
632 | * @this {shoestring}
633 | */
634 | shoestring.fn.attr = function( name, value ){
635 | var nameStr = typeof( name ) === "string";
636 |
637 | if( value !== undefined || !nameStr ){
638 | return this.each(function(){
639 | if( nameStr ){
640 | this.setAttribute( name, value );
641 | } else {
642 | for( var i in name ){
643 | if( name.hasOwnProperty( i ) ){
644 | this.setAttribute( i, name[ i ] );
645 | }
646 | }
647 | }
648 | });
649 | } else {
650 | return this[ 0 ] ? this[ 0 ].getAttribute( name ) : undefined;
651 | }
652 | };
653 |
654 |
655 |
656 | /**
657 | * Insert an element or HTML string before each element in the current set.
658 | *
659 | * @param {string|HTMLElement} fragment The HTML or HTMLElement to insert.
660 | * @return shoestring
661 | * @this shoestring
662 | */
663 | shoestring.fn.before = function( fragment ){
664 | if( typeof( fragment ) === "string" || fragment.nodeType !== undefined ){
665 | fragment = shoestring( fragment );
666 | }
667 |
668 | return this.each(function( i ){
669 | for( var j = 0, jl = fragment.length; j < jl; j++ ){
670 | this.parentNode.insertBefore( i > 0 ? fragment[ j ].cloneNode( true ) : fragment[ j ], this );
671 | }
672 | });
673 | };
674 |
675 |
676 |
677 | /**
678 | * Get the children of the current collection.
679 | * @return shoestring
680 | * @this shoestring
681 | */
682 | shoestring.fn.children = function(){
683 | var ret = [],
684 | childs,
685 | j;
686 | this.each(function(){
687 | childs = this.children;
688 | j = -1;
689 |
690 | while( j++ < childs.length-1 ){
691 | if( shoestring.inArray( childs[ j ], ret ) === -1 ){
692 | ret.push( childs[ j ] );
693 | }
694 | }
695 | });
696 | return shoestring(ret);
697 | };
698 |
699 |
700 |
701 | /**
702 | * Clone and return the current set of nodes into a new `shoestring` object.
703 | *
704 | * @return shoestring
705 | * @this shoestring
706 | */
707 | shoestring.fn.clone = function() {
708 | var ret = [];
709 |
710 | this.each(function() {
711 | ret.push( this.cloneNode( true ) );
712 | });
713 |
714 | return shoestring( ret );
715 | };
716 |
717 |
718 |
719 | /**
720 | * Find an element matching the selector in the set of the current element and its parents.
721 | *
722 | * @param {string} selector The selector used to identify the target element.
723 | * @return shoestring
724 | * @this shoestring
725 | */
726 | shoestring.fn.closest = function( selector ){
727 | var ret = [];
728 |
729 | if( !selector ){
730 | return shoestring( ret );
731 | }
732 |
733 | this.each(function(){
734 | var element, $self = shoestring( element = this );
735 |
736 | if( $self.is(selector) ){
737 | ret.push( this );
738 | return;
739 | }
740 |
741 | while( element.parentElement ) {
742 | if( shoestring(element.parentElement).is(selector) ){
743 | ret.push( element.parentElement );
744 | break;
745 | }
746 |
747 | element = element.parentElement;
748 | }
749 | });
750 |
751 | return shoestring( ret );
752 | };
753 |
754 |
755 |
756 | shoestring.cssExceptions = {
757 | 'float': [ 'cssFloat' ]
758 | };
759 |
760 |
761 |
762 | (function() {
763 | var cssExceptions = shoestring.cssExceptions;
764 |
765 | // marginRight instead of margin-right
766 | function convertPropertyName( str ) {
767 | return str.replace( /\-([A-Za-z])/g, function ( match, character ) {
768 | return character.toUpperCase();
769 | });
770 | }
771 |
772 | function _getStyle( element, property ) {
773 | return win.getComputedStyle( element, null ).getPropertyValue( property );
774 | }
775 |
776 | var vendorPrefixes = [ '', '-webkit-', '-ms-', '-moz-', '-o-', '-khtml-' ];
777 |
778 | /**
779 | * Private function for getting the computed style of an element.
780 | *
781 | * **NOTE** Please use the [css](../css.js.html) method instead.
782 | *
783 | * @method _getStyle
784 | * @param {HTMLElement} element The element we want the style property for.
785 | * @param {string} property The css property we want the style for.
786 | */
787 | shoestring._getStyle = function( element, property ) {
788 | var convert, value, j, k;
789 |
790 | if( cssExceptions[ property ] ) {
791 | for( j = 0, k = cssExceptions[ property ].length; j < k; j++ ) {
792 | value = _getStyle( element, cssExceptions[ property ][ j ] );
793 |
794 | if( value ) {
795 | return value;
796 | }
797 | }
798 | }
799 |
800 | for( j = 0, k = vendorPrefixes.length; j < k; j++ ) {
801 | convert = convertPropertyName( vendorPrefixes[ j ] + property );
802 |
803 | // VendorprefixKeyName || key-name
804 | value = _getStyle( element, convert );
805 |
806 | if( convert !== property ) {
807 | value = value || _getStyle( element, property );
808 | }
809 |
810 | if( vendorPrefixes[ j ] ) {
811 | // -vendorprefix-key-name
812 | value = value || _getStyle( element, vendorPrefixes[ j ] + property );
813 | }
814 |
815 | if( value ) {
816 | return value;
817 | }
818 | }
819 |
820 | return undefined;
821 | };
822 | })();
823 |
824 |
825 |
826 | (function() {
827 | var cssExceptions = shoestring.cssExceptions;
828 |
829 | // marginRight instead of margin-right
830 | function convertPropertyName( str ) {
831 | return str.replace( /\-([A-Za-z])/g, function ( match, character ) {
832 | return character.toUpperCase();
833 | });
834 | }
835 |
836 | /**
837 | * Private function for setting the style of an element.
838 | *
839 | * **NOTE** Please use the [css](../css.js.html) method instead.
840 | *
841 | * @method _setStyle
842 | * @param {HTMLElement} element The element we want to style.
843 | * @param {string} property The property being used to style the element.
844 | * @param {string} value The css value for the style property.
845 | */
846 | shoestring._setStyle = function( element, property, value ) {
847 | var convertedProperty = convertPropertyName(property);
848 |
849 | element.style[ property ] = value;
850 |
851 | if( convertedProperty !== property ) {
852 | element.style[ convertedProperty ] = value;
853 | }
854 |
855 | if( cssExceptions[ property ] ) {
856 | for( var j = 0, k = cssExceptions[ property ].length; j
-1 ){
953 | ret.push( this );
954 | }
955 | }
956 | });
957 |
958 | return shoestring( ret );
959 | };
960 |
961 |
962 |
963 | /**
964 | * Find descendant elements of the current collection.
965 | *
966 | * @param {string} selector The selector used to find the children
967 | * @return shoestring
968 | * @this shoestring
969 | */
970 | shoestring.fn.find = function( selector ){
971 | var ret = [],
972 | finds;
973 | this.each(function(){
974 | finds = this.querySelectorAll( selector );
975 |
976 | for( var i = 0, il = finds.length; i < il; i++ ){
977 | ret = ret.concat( finds[i] );
978 | }
979 | });
980 | return shoestring( ret );
981 | };
982 |
983 |
984 |
985 | /**
986 | * Returns the first element of the set wrapped in a new `shoestring` object.
987 | *
988 | * @return shoestring
989 | * @this shoestring
990 | */
991 | shoestring.fn.first = function(){
992 | return this.eq( 0 );
993 | };
994 |
995 |
996 |
997 | /**
998 | * Returns the raw DOM node at the passed index.
999 | *
1000 | * @param {integer} index The index of the element to wrap and return.
1001 | * @return {HTMLElement|undefined|array}
1002 | * @this shoestring
1003 | */
1004 | shoestring.fn.get = function( index ){
1005 |
1006 | // return an array of elements if index is undefined
1007 | if( index === undefined ){
1008 | var elements = [];
1009 |
1010 | for( var i = 0; i < this.length; i++ ){
1011 | elements.push( this[ i ] );
1012 | }
1013 |
1014 | return elements;
1015 | } else {
1016 | return this[ index ];
1017 | }
1018 | };
1019 |
1020 |
1021 |
1022 | /**
1023 | * Private function for setting/getting the offset property for height/width.
1024 | *
1025 | * **NOTE** Please use the [width](width.js.html) or [height](height.js.html) methods instead.
1026 | *
1027 | * @param {shoestring} set The set of elements.
1028 | * @param {string} name The string "height" or "width".
1029 | * @param {float|undefined} value The value to assign.
1030 | * @return shoestring
1031 | * @this window
1032 | */
1033 | shoestring._dimension = function( set, name, value ){
1034 | var offsetName;
1035 |
1036 | if( value === undefined ){
1037 | offsetName = name.replace(/^[a-z]/, function( letter ) {
1038 | return letter.toUpperCase();
1039 | });
1040 |
1041 | return set[ 0 ][ "offset" + offsetName ];
1042 | } else {
1043 | // support integer values as pixels
1044 | value = typeof value === "string" ? value : value + "px";
1045 |
1046 | return set.each(function(){
1047 | this.style[ name ] = value;
1048 | });
1049 | }
1050 | };
1051 |
1052 |
1053 |
1054 | /**
1055 | * Gets the height value of the first element or sets the height for the whole set.
1056 | *
1057 | * @param {float|undefined} value The value to assign.
1058 | * @return shoestring
1059 | * @this shoestring
1060 | */
1061 | shoestring.fn.height = function( value ){
1062 | return shoestring._dimension( this, "height", value );
1063 | };
1064 |
1065 |
1066 |
1067 | var set = function( html ){
1068 | if( typeof html === "string" || typeof html === "number" ){
1069 | return this.each(function(){
1070 | this.innerHTML = "" + html;
1071 | });
1072 | } else {
1073 | var h = "";
1074 | if( typeof html.length !== "undefined" ){
1075 | for( var i = 0, l = html.length; i < l; i++ ){
1076 | h += html[i].outerHTML;
1077 | }
1078 | } else {
1079 | h = html.outerHTML;
1080 | }
1081 | return this.each(function(){
1082 | this.innerHTML = h;
1083 | });
1084 | }
1085 | };
1086 | /**
1087 | * Gets or sets the `innerHTML` from all the elements in the set.
1088 | *
1089 | * @param {string|undefined} html The html to assign
1090 | * @return {string|shoestring}
1091 | * @this shoestring
1092 | */
1093 | shoestring.fn.html = function( html ){
1094 | if( typeof html !== "undefined" ){
1095 | return set.call( this, html );
1096 | } else { // get
1097 | var pile = "";
1098 |
1099 | this.each(function(){
1100 | pile += this.innerHTML;
1101 | });
1102 |
1103 | return pile;
1104 | }
1105 | };
1106 |
1107 |
1108 |
1109 | (function() {
1110 | function _getIndex( set, test ) {
1111 | var i, result, element;
1112 |
1113 | for( i = result = 0; i < set.length; i++ ) {
1114 | element = set.item ? set.item(i) : set[i];
1115 |
1116 | if( test(element) ){
1117 | return result;
1118 | }
1119 |
1120 | // ignore text nodes, etc
1121 | // NOTE may need to be more permissive
1122 | if( element.nodeType === 1 ){
1123 | result++;
1124 | }
1125 | }
1126 |
1127 | return -1;
1128 | }
1129 |
1130 | /**
1131 | * Find the index in the current set for the passed selector.
1132 | * Without a selector it returns the index of the first node within the array of its siblings.
1133 | *
1134 | * @param {string|undefined} selector The selector used to search for the index.
1135 | * @return {integer}
1136 | * @this {shoestring}
1137 | */
1138 | shoestring.fn.index = function( selector ){
1139 | var self, children;
1140 |
1141 | self = this;
1142 |
1143 | // no arg? check the children, otherwise check each element that matches
1144 | if( selector === undefined ){
1145 | children = ( ( this[ 0 ] && this[0].parentNode ) || doc.documentElement).childNodes;
1146 |
1147 | // check if the element matches the first of the set
1148 | return _getIndex(children, function( element ) {
1149 | return self[0] === element;
1150 | });
1151 | } else {
1152 |
1153 | // check if the element matches the first selected node from the parent
1154 | return _getIndex(self, function( element ) {
1155 | return element === (shoestring( selector, element.parentNode )[ 0 ]);
1156 | });
1157 | }
1158 | };
1159 | })();
1160 |
1161 |
1162 |
1163 | /**
1164 | * Insert the current set after the elements matching the selector.
1165 | *
1166 | * @param {string} selector The selector after which to insert the current set.
1167 | * @return shoestring
1168 | * @this shoestring
1169 | */
1170 | shoestring.fn.insertAfter = function( selector ){
1171 | return this.each(function(){
1172 | shoestring( selector ).after( this );
1173 | });
1174 | };
1175 |
1176 |
1177 |
1178 | /**
1179 | * Insert the current set before the elements matching the selector.
1180 | *
1181 | * @param {string} selector The selector before which to insert the current set.
1182 | * @return shoestring
1183 | * @this shoestring
1184 | */
1185 | shoestring.fn.insertBefore = function( selector ){
1186 | return this.each(function(){
1187 | shoestring( selector ).before( this );
1188 | });
1189 | };
1190 |
1191 |
1192 |
1193 | /**
1194 | * Returns the last element of the set wrapped in a new `shoestring` object.
1195 | *
1196 | * @return shoestring
1197 | * @this shoestring
1198 | */
1199 | shoestring.fn.last = function(){
1200 | return this.eq( this.length - 1 );
1201 | };
1202 |
1203 |
1204 |
1205 | /**
1206 | * Returns a `shoestring` object with the set of siblings of each element in the original set.
1207 | *
1208 | * @return shoestring
1209 | * @this shoestring
1210 | */
1211 | shoestring.fn.next = function(){
1212 |
1213 | var result = [];
1214 |
1215 | // TODO need to implement map
1216 | this.each(function() {
1217 | var children, item, found;
1218 |
1219 | // get the child nodes for this member of the set
1220 | children = shoestring( this.parentNode )[0].childNodes;
1221 |
1222 | for( var i = 0; i < children.length; i++ ){
1223 | item = children.item( i );
1224 |
1225 | // found the item we needed (found) which means current item value is
1226 | // the next node in the list, as long as it's viable grab it
1227 | // NOTE may need to be more permissive
1228 | if( found && item.nodeType === 1 ){
1229 | result.push( item );
1230 | break;
1231 | }
1232 |
1233 | // find the current item and mark it as found
1234 | if( item === this ){
1235 | found = true;
1236 | }
1237 | }
1238 | });
1239 |
1240 | return shoestring( result );
1241 | };
1242 |
1243 |
1244 |
1245 | /**
1246 | * Removes elements from the current set.
1247 | *
1248 | * @param {string} selector The selector to use when removing the elements.
1249 | * @return shoestring
1250 | * @this shoestring
1251 | */
1252 | shoestring.fn.not = function( selector ){
1253 | var ret = [];
1254 |
1255 | this.each(function(){
1256 | var found = shoestring( selector, this.parentNode );
1257 |
1258 | if( shoestring.inArray(this, found) === -1 ){
1259 | ret.push( this );
1260 | }
1261 | });
1262 |
1263 | return shoestring( ret );
1264 | };
1265 |
1266 |
1267 |
1268 | /**
1269 | * Returns an object with the `top` and `left` properties corresponging to the first elements offsets.
1270 | *
1271 | * @return object
1272 | * @this shoestring
1273 | */
1274 | shoestring.fn.offset = function(){
1275 | return {
1276 | top: this[ 0 ].offsetTop,
1277 | left: this[ 0 ].offsetLeft
1278 | };
1279 | };
1280 |
1281 |
1282 |
1283 | /**
1284 | * Returns the set of first parents for each element in the current set.
1285 | *
1286 | * @return shoestring
1287 | * @this shoestring
1288 | */
1289 | shoestring.fn.parent = function(){
1290 | var ret = [],
1291 | parent;
1292 |
1293 | this.each(function(){
1294 | // no parent node, assume top level
1295 | // jQuery parent: return the document object for or the parent node if it exists
1296 | parent = (this === doc.documentElement ? doc : this.parentNode);
1297 |
1298 | // if there is a parent and it's not a document fragment
1299 | if( parent && parent.nodeType !== 11 ){
1300 | ret.push( parent );
1301 | }
1302 | });
1303 |
1304 | return shoestring(ret);
1305 | };
1306 |
1307 |
1308 |
1309 | /**
1310 | * Returns the set of all parents matching the selector if provided for each element in the current set.
1311 | *
1312 | * @param {string} selector The selector to check the parents with.
1313 | * @return shoestring
1314 | * @this shoestring
1315 | */
1316 | shoestring.fn.parents = function( selector ){
1317 | var ret = [];
1318 |
1319 | this.each(function(){
1320 | var curr = this, match;
1321 |
1322 | while( curr.parentElement && !match ){
1323 | curr = curr.parentElement;
1324 |
1325 | if( selector ){
1326 | if( curr === shoestring( selector )[0] ){
1327 | match = true;
1328 |
1329 | if( shoestring.inArray( curr, ret ) === -1 ){
1330 | ret.push( curr );
1331 | }
1332 | }
1333 | } else {
1334 | if( shoestring.inArray( curr, ret ) === -1 ){
1335 | ret.push( curr );
1336 | }
1337 | }
1338 | }
1339 | });
1340 |
1341 | return shoestring(ret);
1342 | };
1343 |
1344 |
1345 |
1346 | /**
1347 | * Add an HTML string or element before the children of each element in the current set.
1348 | *
1349 | * @param {string|HTMLElement} fragment The HTML string or element to add.
1350 | * @return shoestring
1351 | * @this shoestring
1352 | */
1353 | shoestring.fn.prepend = function( fragment ){
1354 | if( typeof( fragment ) === "string" || fragment.nodeType !== undefined ){
1355 | fragment = shoestring( fragment );
1356 | }
1357 |
1358 | return this.each(function( i ){
1359 |
1360 | for( var j = 0, jl = fragment.length; j < jl; j++ ){
1361 | var insertEl = i > 0 ? fragment[ j ].cloneNode( true ) : fragment[ j ];
1362 | if ( this.firstChild ){
1363 | this.insertBefore( insertEl, this.firstChild );
1364 | } else {
1365 | this.appendChild( insertEl );
1366 | }
1367 | }
1368 | });
1369 | };
1370 |
1371 |
1372 |
1373 | /**
1374 | * Add each element of the current set before the children of the selected elements.
1375 | *
1376 | * @param {string} selector The selector for the elements to add the current set to..
1377 | * @return shoestring
1378 | * @this shoestring
1379 | */
1380 | shoestring.fn.prependTo = function( selector ){
1381 | return this.each(function(){
1382 | shoestring( selector ).prepend( this );
1383 | });
1384 | };
1385 |
1386 |
1387 |
1388 | /**
1389 | * Returns a `shoestring` object with the set of *one* siblingx before each element in the original set.
1390 | *
1391 | * @return shoestring
1392 | * @this shoestring
1393 | */
1394 | shoestring.fn.prev = function(){
1395 |
1396 | var result = [];
1397 |
1398 | // TODO need to implement map
1399 | this.each(function() {
1400 | var children, item, found;
1401 |
1402 | // get the child nodes for this member of the set
1403 | children = shoestring( this.parentNode )[0].childNodes;
1404 |
1405 | for( var i = children.length -1; i >= 0; i-- ){
1406 | item = children.item( i );
1407 |
1408 | // found the item we needed (found) which means current item value is
1409 | // the next node in the list, as long as it's viable grab it
1410 | // NOTE may need to be more permissive
1411 | if( found && item.nodeType === 1 ){
1412 | result.push( item );
1413 | break;
1414 | }
1415 |
1416 | // find the current item and mark it as found
1417 | if( item === this ){
1418 | found = true;
1419 | }
1420 | }
1421 | });
1422 |
1423 | return shoestring( result );
1424 | };
1425 |
1426 |
1427 |
1428 | /**
1429 | * Returns a `shoestring` object with the set of *all* siblings before each element in the original set.
1430 | *
1431 | * @return shoestring
1432 | * @this shoestring
1433 | */
1434 | shoestring.fn.prevAll = function(){
1435 |
1436 | var result = [];
1437 |
1438 | this.each(function() {
1439 | var $previous = shoestring( this ).prev();
1440 |
1441 | while( $previous.length ){
1442 | result.push( $previous[0] );
1443 | $previous = $previous.prev();
1444 | }
1445 | });
1446 |
1447 | return shoestring( result );
1448 | };
1449 |
1450 |
1451 |
1452 | // Property normalization, a subset taken from jQuery src
1453 | shoestring.propFix = {
1454 | "class": "className",
1455 | contenteditable: "contentEditable",
1456 | "for": "htmlFor",
1457 | readonly: "readOnly",
1458 | tabindex: "tabIndex"
1459 | };
1460 |
1461 |
1462 |
1463 | /**
1464 | * Gets the property value from the first element or sets the property value on all elements of the currrent set.
1465 | *
1466 | * @param {string} name The property name.
1467 | * @param {any} value The property value.
1468 | * @return {any|shoestring}
1469 | * @this shoestring
1470 | */
1471 | shoestring.fn.prop = function( name, value ){
1472 | if( !this[0] ){
1473 | return;
1474 | }
1475 |
1476 | name = shoestring.propFix[ name ] || name;
1477 |
1478 | if( value !== undefined ){
1479 | return this.each(function(){
1480 | this[ name ] = value;
1481 | });
1482 | } else {
1483 | return this[ 0 ][ name ];
1484 | }
1485 | };
1486 |
1487 |
1488 |
1489 | /**
1490 | * Remove an attribute from each element in the current set.
1491 | *
1492 | * @param {string} name The name of the attribute.
1493 | * @return shoestring
1494 | * @this shoestring
1495 | */
1496 | shoestring.fn.removeAttr = function( name ){
1497 | return this.each(function(){
1498 | this.removeAttribute( name );
1499 | });
1500 | };
1501 |
1502 |
1503 |
1504 | /**
1505 | * Remove a class from each DOM element in the set of elements.
1506 | *
1507 | * @param {string} className The name of the class to be removed.
1508 | * @return shoestring
1509 | * @this shoestring
1510 | */
1511 | shoestring.fn.removeClass = function( cname ){
1512 | var classes = cname.replace(/^\s+|\s+$/g, '').split( " " );
1513 |
1514 | return this.each(function(){
1515 | var newClassName, regex;
1516 |
1517 | for( var i = 0, il = classes.length; i < il; i++ ){
1518 | if( this.className !== undefined ){
1519 | regex = new RegExp( "(^|\\s)" + classes[ i ] + "($|\\s)", "gmi" );
1520 | newClassName = this.className.replace( regex, " " );
1521 |
1522 | this.className = newClassName.replace(/^\s+|\s+$/g, '');
1523 | }
1524 | }
1525 | });
1526 | };
1527 |
1528 |
1529 |
1530 | /**
1531 | * Remove the current set of elements from the DOM.
1532 | *
1533 | * @return shoestring
1534 | * @this shoestring
1535 | */
1536 | shoestring.fn.remove = function(){
1537 | return this.each(function(){
1538 | if( this.parentNode ) {
1539 | this.parentNode.removeChild( this );
1540 | }
1541 | });
1542 | };
1543 |
1544 |
1545 |
1546 | /**
1547 | * Remove a proprety from each element in the current set.
1548 | *
1549 | * @param {string} name The name of the property.
1550 | * @return shoestring
1551 | * @this shoestring
1552 | */
1553 | shoestring.fn.removeProp = function( property ){
1554 | var name = shoestring.propFix[ property ] || property;
1555 |
1556 | return this.each(function(){
1557 | this[ name ] = undefined;
1558 | delete this[ name ];
1559 | });
1560 | };
1561 |
1562 |
1563 |
1564 | /**
1565 | * Replace each element in the current set with that argument HTML string or HTMLElement.
1566 | *
1567 | * @param {string|HTMLElement} fragment The value to assign.
1568 | * @return shoestring
1569 | * @this shoestring
1570 | */
1571 | shoestring.fn.replaceWith = function( fragment ){
1572 | if( typeof( fragment ) === "string" ){
1573 | fragment = shoestring( fragment );
1574 | }
1575 |
1576 | var ret = [];
1577 |
1578 | if( fragment.length > 1 ){
1579 | fragment = fragment.reverse();
1580 | }
1581 | this.each(function( i ){
1582 | var clone = this.cloneNode( true ),
1583 | insertEl;
1584 | ret.push( clone );
1585 |
1586 | // If there is no parentNode, this is pointless, drop it.
1587 | if( !this.parentNode ){ return; }
1588 |
1589 | if( fragment.length === 1 ){
1590 | insertEl = i > 0 ? fragment[ 0 ].cloneNode( true ) : fragment[ 0 ];
1591 | this.parentNode.replaceChild( insertEl, this );
1592 | } else {
1593 | for( var j = 0, jl = fragment.length; j < jl; j++ ){
1594 | insertEl = i > 0 ? fragment[ j ].cloneNode( true ) : fragment[ j ];
1595 | this.parentNode.insertBefore( insertEl, this.nextSibling );
1596 | }
1597 | this.parentNode.removeChild( this );
1598 | }
1599 | });
1600 |
1601 | return shoestring( ret );
1602 | };
1603 |
1604 |
1605 |
1606 | shoestring.inputTypes = [
1607 | "text",
1608 | "hidden",
1609 | "password",
1610 | "color",
1611 | "date",
1612 | "datetime",
1613 | // "datetime\-local" matched by datetime
1614 | "email",
1615 | "month",
1616 | "number",
1617 | "range",
1618 | "search",
1619 | "tel",
1620 | "time",
1621 | "url",
1622 | "week"
1623 | ];
1624 |
1625 | shoestring.inputTypeTest = new RegExp( shoestring.inputTypes.join( "|" ) );
1626 |
1627 |
1628 | /**
1629 | * Serialize child input element values into an object.
1630 | *
1631 | * @return shoestring
1632 | * @this shoestring
1633 | */
1634 | shoestring.fn.serialize = function(){
1635 | var data = {};
1636 |
1637 | shoestring( "input, select", this ).each(function(){
1638 | var type = this.type, name = this.name, value = this.value;
1639 |
1640 | if( shoestring.inputTypeTest.test( type ) ||
1641 | ( type === "checkbox" || type === "radio" ) &&
1642 | this.checked ){
1643 |
1644 | data[ name ] = value;
1645 | } else if( this.nodeName === "SELECT" ){
1646 | data[ name ] = this.options[ this.selectedIndex ].nodeValue;
1647 | }
1648 | });
1649 |
1650 | return data;
1651 | };
1652 |
1653 |
1654 |
1655 | /**
1656 | * Get all of the sibling elements for each element in the current set.
1657 | *
1658 | * @return shoestring
1659 | * @this shoestring
1660 | */
1661 | shoestring.fn.siblings = function(){
1662 |
1663 | if( !this.length ) {
1664 | return shoestring( [] );
1665 | }
1666 |
1667 | var sibs = [], el = this[ 0 ].parentNode.firstChild;
1668 |
1669 | do {
1670 | if( el.nodeType === 1 && el !== this[ 0 ] ) {
1671 | sibs.push( el );
1672 | }
1673 |
1674 | el = el.nextSibling;
1675 | } while( el );
1676 |
1677 | return shoestring( sibs );
1678 | };
1679 |
1680 |
1681 |
1682 | var getText = function( elem ){
1683 | var node,
1684 | ret = "",
1685 | i = 0,
1686 | nodeType = elem.nodeType;
1687 |
1688 | if ( !nodeType ) {
1689 | // If no nodeType, this is expected to be an array
1690 | while ( (node = elem[i++]) ) {
1691 | // Do not traverse comment nodes
1692 | ret += getText( node );
1693 | }
1694 | } else if ( nodeType === 1 || nodeType === 9 || nodeType === 11 ) {
1695 | // Use textContent for elements
1696 | // innerText usage removed for consistency of new lines (jQuery #11153)
1697 | if ( typeof elem.textContent === "string" ) {
1698 | return elem.textContent;
1699 | } else {
1700 | // Traverse its children
1701 | for ( elem = elem.firstChild; elem; elem = elem.nextSibling ) {
1702 | ret += getText( elem );
1703 | }
1704 | }
1705 | } else if ( nodeType === 3 || nodeType === 4 ) {
1706 | return elem.nodeValue;
1707 | }
1708 | // Do not include comment or processing instruction nodes
1709 |
1710 | return ret;
1711 | };
1712 |
1713 | /**
1714 | * Recursively retrieve the text content of the each element in the current set.
1715 | *
1716 | * @return shoestring
1717 | * @this shoestring
1718 | */
1719 | shoestring.fn.text = function() {
1720 |
1721 | return getText( this );
1722 | };
1723 |
1724 |
1725 |
1726 |
1727 | /**
1728 | * Get the value of the first element or set the value of all elements in the current set.
1729 | *
1730 | * @param {string} value The value to set.
1731 | * @return shoestring
1732 | * @this shoestring
1733 | */
1734 | shoestring.fn.val = function( value ){
1735 | var el;
1736 | if( value !== undefined ){
1737 | return this.each(function(){
1738 | if( this.tagName === "SELECT" ){
1739 | var optionSet, option,
1740 | options = this.options,
1741 | values = [],
1742 | i = options.length,
1743 | newIndex;
1744 |
1745 | values[0] = value;
1746 | while ( i-- ) {
1747 | option = options[ i ];
1748 | if ( (option.selected = shoestring.inArray( option.value, values ) >= 0) ) {
1749 | optionSet = true;
1750 | newIndex = i;
1751 | }
1752 | }
1753 | // force browsers to behave consistently when non-matching value is set
1754 | if ( !optionSet ) {
1755 | this.selectedIndex = -1;
1756 | } else {
1757 | this.selectedIndex = newIndex;
1758 | }
1759 | } else {
1760 | this.value = value;
1761 | }
1762 | });
1763 | } else {
1764 | el = this[0];
1765 |
1766 | if( el.tagName === "SELECT" ){
1767 | if( el.selectedIndex < 0 ){ return ""; }
1768 | return el.options[ el.selectedIndex ].value;
1769 | } else {
1770 | return el.value;
1771 | }
1772 | }
1773 | };
1774 |
1775 |
1776 |
1777 | /**
1778 | * Gets the width value of the first element or sets the width for the whole set.
1779 | *
1780 | * @param {float|undefined} value The value to assign.
1781 | * @return shoestring
1782 | * @this shoestring
1783 | */
1784 | shoestring.fn.width = function( value ){
1785 | return shoestring._dimension( this, "width", value );
1786 | };
1787 |
1788 |
1789 |
1790 | /**
1791 | * Wraps the child elements in the provided HTML.
1792 | *
1793 | * @param {string} html The wrapping HTML.
1794 | * @return shoestring
1795 | * @this shoestring
1796 | */
1797 | shoestring.fn.wrapInner = function( html ){
1798 | return this.each(function(){
1799 | var inH = this.innerHTML;
1800 |
1801 | this.innerHTML = "";
1802 | shoestring( this ).append( shoestring( html ).html( inH ) );
1803 | });
1804 | };
1805 |
1806 |
1807 |
1808 | function initEventCache( el, evt ) {
1809 | if ( !el.shoestringData ) {
1810 | el.shoestringData = {};
1811 | }
1812 | if ( !el.shoestringData.events ) {
1813 | el.shoestringData.events = {};
1814 | }
1815 | if ( !el.shoestringData.loop ) {
1816 | el.shoestringData.loop = {};
1817 | }
1818 | if ( !el.shoestringData.events[ evt ] ) {
1819 | el.shoestringData.events[ evt ] = [];
1820 | }
1821 | }
1822 |
1823 | function addToEventCache( el, evt, eventInfo ) {
1824 | var obj = {};
1825 | obj.isCustomEvent = eventInfo.isCustomEvent;
1826 | obj.callback = eventInfo.callfunc;
1827 | obj.originalCallback = eventInfo.originalCallback;
1828 | obj.namespace = eventInfo.namespace;
1829 |
1830 | el.shoestringData.events[ evt ].push( obj );
1831 |
1832 | if( eventInfo.customEventLoop ) {
1833 | el.shoestringData.loop[ evt ] = eventInfo.customEventLoop;
1834 | }
1835 | }
1836 |
1837 | /**
1838 | * Bind a callback to an event for the currrent set of elements.
1839 | *
1840 | * @param {string} evt The event(s) to watch for.
1841 | * @param {object,function} data Data to be included with each event or the callback.
1842 | * @param {function} originalCallback Callback to be invoked when data is define.d.
1843 | * @return shoestring
1844 | * @this shoestring
1845 | */
1846 | shoestring.fn.bind = function( evt, data, originalCallback ){
1847 |
1848 | if( typeof data === "function" ){
1849 | originalCallback = data;
1850 | data = null;
1851 | }
1852 |
1853 | var evts = evt.split( " " );
1854 |
1855 | // NOTE the `triggeredElement` is purely for custom events from IE
1856 | function encasedCallback( e, namespace, triggeredElement ){
1857 | var result;
1858 |
1859 | if( e._namespace && e._namespace !== namespace ) {
1860 | return;
1861 | }
1862 |
1863 | e.data = data;
1864 | e.namespace = e._namespace;
1865 |
1866 | var returnTrue = function(){
1867 | return true;
1868 | };
1869 |
1870 | e.isDefaultPrevented = function(){
1871 | return false;
1872 | };
1873 |
1874 | var originalPreventDefault = e.preventDefault;
1875 | var preventDefaultConstructor = function(){
1876 | if( originalPreventDefault ) {
1877 | return function(){
1878 | e.isDefaultPrevented = returnTrue;
1879 | originalPreventDefault.call(e);
1880 | };
1881 | } else {
1882 | return function(){
1883 | e.isDefaultPrevented = returnTrue;
1884 | e.returnValue = false;
1885 | };
1886 | }
1887 | };
1888 |
1889 | // thanks https://github.com/jonathantneal/EventListener
1890 | e.target = triggeredElement || e.target || e.srcElement;
1891 | e.preventDefault = preventDefaultConstructor();
1892 | e.stopPropagation = e.stopPropagation || function () {
1893 | e.cancelBubble = true;
1894 | };
1895 |
1896 | result = originalCallback.apply(this, [ e ].concat( e._args ) );
1897 |
1898 | if( result === false ){
1899 | e.preventDefault();
1900 | e.stopPropagation();
1901 | }
1902 |
1903 | return result;
1904 | }
1905 |
1906 | return this.each(function(){
1907 | var domEventCallback,
1908 | customEventCallback,
1909 | customEventLoop,
1910 | oEl = this;
1911 |
1912 | for( var i = 0, il = evts.length; i < il; i++ ){
1913 | var split = evts[ i ].split( "." ),
1914 | evt = split[ 0 ],
1915 | namespace = split.length > 0 ? split[ 1 ] : null;
1916 |
1917 | domEventCallback = function( originalEvent ) {
1918 | if( oEl.ssEventTrigger ) {
1919 | originalEvent._namespace = oEl.ssEventTrigger._namespace;
1920 | originalEvent._args = oEl.ssEventTrigger._args;
1921 |
1922 | oEl.ssEventTrigger = null;
1923 | }
1924 | return encasedCallback.call( oEl, originalEvent, namespace );
1925 | };
1926 | customEventCallback = null;
1927 | customEventLoop = null;
1928 |
1929 | initEventCache( this, evt );
1930 |
1931 | this.addEventListener( evt, domEventCallback, false );
1932 |
1933 | addToEventCache( this, evt, {
1934 | callfunc: customEventCallback || domEventCallback,
1935 | isCustomEvent: !!customEventCallback,
1936 | customEventLoop: customEventLoop,
1937 | originalCallback: originalCallback,
1938 | namespace: namespace
1939 | });
1940 | }
1941 | });
1942 | };
1943 |
1944 | shoestring.fn.on = shoestring.fn.bind;
1945 |
1946 |
1947 |
1948 |
1949 | /**
1950 | * Unbind a previous bound callback for an event.
1951 | *
1952 | * @param {string} event The event(s) the callback was bound to..
1953 | * @param {function} callback Callback to unbind.
1954 | * @return shoestring
1955 | * @this shoestring
1956 | */
1957 | shoestring.fn.unbind = function( event, callback ){
1958 |
1959 |
1960 | var evts = event ? event.split( " " ) : [];
1961 |
1962 | return this.each(function(){
1963 | if( !this.shoestringData || !this.shoestringData.events ) {
1964 | return;
1965 | }
1966 |
1967 | if( !evts.length ) {
1968 | unbindAll.call( this );
1969 | } else {
1970 | var split, evt, namespace;
1971 | for( var i = 0, il = evts.length; i < il; i++ ){
1972 | split = evts[ i ].split( "." ),
1973 | evt = split[ 0 ],
1974 | namespace = split.length > 0 ? split[ 1 ] : null;
1975 |
1976 | if( evt ) {
1977 | unbind.call( this, evt, namespace, callback );
1978 | } else {
1979 | unbindAll.call( this, namespace, callback );
1980 | }
1981 | }
1982 | }
1983 | });
1984 | };
1985 |
1986 | function unbind( evt, namespace, callback ) {
1987 | var bound = this.shoestringData.events[ evt ];
1988 | if( !(bound && bound.length) ) {
1989 | return;
1990 | }
1991 |
1992 | var matched = [], j, jl;
1993 | for( j = 0, jl = bound.length; j < jl; j++ ) {
1994 | if( !namespace || namespace === bound[ j ].namespace ) {
1995 | if( callback === undefined || callback === bound[ j ].originalCallback ) {
1996 | this.removeEventListener( evt, bound[ j ].callback, false );
1997 | matched.push( j );
1998 | }
1999 | }
2000 | }
2001 |
2002 | for( j = 0, jl = matched.length; j < jl; j++ ) {
2003 | this.shoestringData.events[ evt ].splice( j, 1 );
2004 | }
2005 | }
2006 |
2007 | function unbindAll( namespace, callback ) {
2008 | for( var evtKey in this.shoestringData.events ) {
2009 | unbind.call( this, evtKey, namespace, callback );
2010 | }
2011 | }
2012 |
2013 | shoestring.fn.off = shoestring.fn.unbind;
2014 |
2015 |
2016 | /**
2017 | * Bind a callback to an event for the currrent set of elements, unbind after one occurence.
2018 | *
2019 | * @param {string} event The event(s) to watch for.
2020 | * @param {function} callback Callback to invoke on the event.
2021 | * @return shoestring
2022 | * @this shoestring
2023 | */
2024 | shoestring.fn.one = function( event, callback ){
2025 | var evts = event.split( " " );
2026 |
2027 | return this.each(function(){
2028 | var thisevt, cbs = {}, $t = shoestring( this );
2029 |
2030 | for( var i = 0, il = evts.length; i < il; i++ ){
2031 | thisevt = evts[ i ];
2032 |
2033 | cbs[ thisevt ] = function( e ){
2034 | var $t = shoestring( this );
2035 |
2036 | for( var j in cbs ) {
2037 | $t.unbind( j, cbs[ j ] );
2038 | }
2039 |
2040 | return callback.apply( this, [ e ].concat( e._args ) );
2041 | };
2042 |
2043 | $t.bind( thisevt, cbs[ thisevt ] );
2044 | }
2045 | });
2046 | };
2047 |
2048 |
2049 |
2050 | /**
2051 | * Trigger an event on the first element in the set, no bubbling, no defaults.
2052 | *
2053 | * @param {string} event The event(s) to trigger.
2054 | * @param {object} args Arguments to append to callback invocations.
2055 | * @return shoestring
2056 | * @this shoestring
2057 | */
2058 | shoestring.fn.triggerHandler = function( event, args ){
2059 | var e = event.split( " " )[ 0 ],
2060 | el = this[ 0 ],
2061 | ret;
2062 |
2063 | // See this.fireEvent( 'on' + evts[ i ], document.createEventObject() ); instead of click() etc in trigger.
2064 | if( doc.createEvent && el.shoestringData && el.shoestringData.events && el.shoestringData.events[ e ] ){
2065 | var bindings = el.shoestringData.events[ e ];
2066 | for (var i in bindings ){
2067 | if( bindings.hasOwnProperty( i ) ){
2068 | event = doc.createEvent( "Event" );
2069 | event.initEvent( e, true, true );
2070 | event._args = args;
2071 | args.unshift( event );
2072 |
2073 | ret = bindings[ i ].originalCallback.apply( event.target, args );
2074 | }
2075 | }
2076 | }
2077 |
2078 | return ret;
2079 | };
2080 |
2081 |
2082 |
2083 | /**
2084 | * Trigger an event on each of the DOM elements in the current set.
2085 | *
2086 | * @param {string} event The event(s) to trigger.
2087 | * @param {object} args Arguments to append to callback invocations.
2088 | * @return shoestring
2089 | * @this shoestring
2090 | */
2091 | shoestring.fn.trigger = function( event, args ){
2092 | var evts = event.split( " " );
2093 |
2094 | return this.each(function(){
2095 | var split, evt, namespace;
2096 | for( var i = 0, il = evts.length; i < il; i++ ){
2097 | split = evts[ i ].split( "." ),
2098 | evt = split[ 0 ],
2099 | namespace = split.length > 0 ? split[ 1 ] : null;
2100 |
2101 | if( evt === "click" ){
2102 | if( this.tagName === "INPUT" && this.type === "checkbox" && this.click ){
2103 | this.click();
2104 | return false;
2105 | }
2106 | }
2107 |
2108 | if( doc.createEvent ){
2109 | var event = doc.createEvent( "Event" );
2110 | event.initEvent( evt, true, true );
2111 | event._args = args;
2112 | event._namespace = namespace;
2113 |
2114 | this.dispatchEvent( event );
2115 | }
2116 | }
2117 | });
2118 | };
2119 |
2120 |
2121 |
2122 | return shoestring;
2123 | }));
2124 |
--------------------------------------------------------------------------------
/test/X-rayHTML.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | X-rayHTML Test Suite
6 |
7 |
8 |
9 |
19 |
22 | lame test markup
23 | normal test markup
24 | awesome test markup
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/test/X-rayHTML_test.js:
--------------------------------------------------------------------------------
1 | /*global QUnit:false, module:false, test:false, asyncTest:false, expect:false*/
2 | /*global start:false, stop:false ok:false, equal:false, notEqual:false, deepEqual:false*/
3 | /*global notDeepEqual:false, strictEqual:false, notStrictEqual:false, raises:false*/
4 | (function($) {
5 |
6 | /*
7 | ======== A Handy Little QUnit Reference ========
8 | http://docs.jquery.com/QUnit
9 |
10 | Test methods:
11 | expect(numAssertions)
12 | stop(increment)
13 | start(decrement)
14 | Test assertions:
15 | ok(value, [message])
16 | equal(actual, expected, [message])
17 | notEqual(actual, expected, [message])
18 | deepEqual(actual, expected, [message])
19 | notDeepEqual(actual, expected, [message])
20 | strictEqual(actual, expected, [message])
21 | notStrictEqual(actual, expected, [message])
22 | raises(block, [expected], [message])
23 | */
24 |
25 | module('jQuery#xray', {
26 | setup: function() {
27 | }
28 | });
29 |
30 | test('Tests', 1, function() {
31 | strictEqual( true, true, "Coming soon" );
32 | });
33 |
34 | }(jQuery));
35 |
--------------------------------------------------------------------------------