Skip to content
This repository was archived by the owner on Oct 21, 2022. It is now read-only.

Commit 75bfeb8

Browse files
committed
2.0.1
1 parent e0389aa commit 75bfeb8

File tree

3 files changed

+49
-27
lines changed

3 files changed

+49
-27
lines changed

dist/xrayhtml.css

+4-11
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*! X-rayHTML - v2.0.0 - 2015-10-28
1+
/*! X-rayHTML - v2.0.1 - 2015-10-29
22
* https://github.com/filamentgroup/x-rayhtml
33
* Copyright (c) 2015 ; Licensed MIT */
44

@@ -13,8 +13,7 @@
1313
padding: 2em 1em;
1414
position: relative;
1515
}
16-
.xrayhtml:before {
17-
content: "Example";
16+
.xrayhtml .xraytitle {
1817
text-transform: uppercase;
1918
letter-spacing: 1px;
2019
font: .75em sans-serif;
@@ -26,9 +25,7 @@
2625
padding-right: .5em;
2726
left: 1.333333333em; /* 16px */
2827
z-index: 3;
29-
}
30-
.xrayhtml[data-title]:before {
31-
content: "Example: " attr(data-title);
28+
margin: 0;
3229
}
3330
.xrayhtml.method-flip:before {
3431
background-color: rgba(255,255,255,.6);
@@ -65,13 +62,9 @@
6562
.xrayhtml.antipattern {
6663
border-color: #C9282D;
6764
}
68-
.xrayhtml.antipattern:before {
65+
.xrayhtml.antipattern .xraytitle {
6966
color: #d75e72;
7067
font-weight: 700;
71-
content: "Do Not Use";
72-
}
73-
.xrayhtml.antipattern[data-title]:before {
74-
content: "Do Not Use: " attr(data-title);
7568
}
7669

7770
/* Flip Animation */

dist/xrayhtml.js

+44-15
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*! X-rayHTML - v2.0.0 - 2015-10-28
1+
/*! X-rayHTML - v2.0.1 - 2015-10-29
22
* https://github.com/filamentgroup/x-rayhtml
33
* Copyright (c) 2015 ; Licensed MIT */
44

@@ -9,12 +9,16 @@ window.jQuery = window.jQuery || window.shoestring;
99
o = {
1010
text: {
1111
open: "View Source",
12-
close: "View Demo"
12+
close: "View Demo",
13+
titlePrefix: "Example",
14+
antipattern: "Do Not Use"
1315
},
1416
classes: {
1517
button: "btn btn-small",
1618
open: "view-source",
17-
sourcepanel: "source-panel"
19+
sourcepanel: "source-panel",
20+
title: "xraytitle",
21+
antipattern: "antipattern"
1822
},
1923
initSelector: "[data-" + pluginName + "]",
2024
defaultReveal: "inline"
@@ -67,18 +71,42 @@ window.jQuery = window.jQuery || window.shoestring;
6771
.insertBefore( el );
6872
},
6973
_createSource: function() {
70-
var el = this,
71-
preel = document.createElement( "pre" ),
72-
codeel = document.createElement( "code" ),
73-
wrap = document.createElement( "div" ),
74-
sourcepanel = document.createElement( "div" ),
75-
// remove empty value attributes
76-
code = el.innerHTML.replace( /\=\"\"/g, '' ),
77-
leadingWhiteSpace = code.match( /(^[\s]+)/ ),
78-
lineWSRE = new RegExp( leadingWhiteSpace[ 1 ], "gmi" ),
79-
source;
80-
81-
code = code.replace( lineWSRE, "\n" ),
74+
var el = this;
75+
var getPrefixText = function () {
76+
if( el.className.match( new RegExp( "\\b" + o.classes.antipattern + "\\b", "gi" ) ) ) {
77+
return o.text.antipattern;
78+
}
79+
return o.text.titlePrefix;
80+
};
81+
var title = el.getElementsByClassName( o.classes.title );
82+
var deprecatedTitle;
83+
var preel = document.createElement( "pre" );
84+
var codeel = document.createElement( "code" );
85+
var wrap = document.createElement( "div" );
86+
var sourcepanel = document.createElement( "div" );
87+
var code;
88+
var leadingWhiteSpace;
89+
var source;
90+
91+
if( title.length ) {
92+
title = title[ 0 ];
93+
title.parentNode.removeChild( title );
94+
title.innerHTML = getPrefixText() + ": " + title.innerHTML;
95+
} else {
96+
deprecatedTitle = el.getAttribute( "data-title" );
97+
title = document.createElement( "div" );
98+
title.className = o.classes.title;
99+
title.innerHTML = getPrefixText() + ( deprecatedTitle ? ": " + deprecatedTitle : "" );
100+
}
101+
102+
// remove empty value attributes
103+
code = el.innerHTML.replace( /\=\"\"/g, '' );
104+
leadingWhiteSpace = code.match( /(^[\s]+)/ );
105+
106+
if( leadingWhiteSpace ) {
107+
code = code.replace( new RegExp( leadingWhiteSpace[ 1 ], "gmi" ), "\n" );
108+
}
109+
82110
source = document.createTextNode( code );
83111

84112
wrap.setAttribute( "class", "snippet" );
@@ -92,6 +120,7 @@ window.jQuery = window.jQuery || window.shoestring;
92120
sourcepanel.appendChild( preel );
93121

94122
this.appendChild( sourcepanel );
123+
this.insertBefore( title, this.firstChild );
95124
}
96125
};
97126

package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"title": "X-rayHTML",
44
"description": "A plugin to easily show examples of components with the markup to use them.",
55
"homepage": "https://github.com/filamentgroup/x-rayhtml",
6-
"version": "2.0.0",
6+
"version": "2.0.1",
77
"author": "Mat Marquis",
88
"contributors": [
99
{

0 commit comments

Comments
 (0)