Separating pages and plugin
Glen Cheney
13 years ago
parent
ef2261beb6
commit
0b3692ecbd
@ -0,0 +1,50 @@
|
||||
/* Vim sunburst theme by David Leibovic */
|
||||
|
||||
pre .str, code .str { color: #65B042; } /* string - green */
|
||||
pre .kwd, code .kwd { color: #E28964; } /* keyword - dark pink */
|
||||
pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - gray */
|
||||
pre .typ, code .typ { color: #89bdff; } /* type - light blue */
|
||||
pre .lit, code .lit { color: #3387CC; } /* literal - blue */
|
||||
pre .pun, code .pun { color: #fff; } /* punctuation - white */
|
||||
pre .pln, code .pln { color: #fff; } /* plaintext - white */
|
||||
pre .tag, code .tag { color: #89bdff; } /* html/xml tag - light blue */
|
||||
pre .atn, code .atn { color: #bdb76b; } /* html/xml attribute name - khaki */
|
||||
pre .atv, code .atv { color: #65B042; } /* html/xml attribute value - green */
|
||||
pre .dec, code .dec { color: #3387CC; } /* decimal - blue */
|
||||
|
||||
pre.prettyprint, code.prettyprint {
|
||||
/*background-color: #000;*/
|
||||
-moz-border-radius: 8px;
|
||||
-webkit-border-radius: 8px;
|
||||
-o-border-radius: 8px;
|
||||
-ms-border-radius: 8px;
|
||||
-khtml-border-radius: 8px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
pre.prettyprint {
|
||||
width: 95%;
|
||||
margin: 1em auto;
|
||||
padding: 1em;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
|
||||
/* Specify class=linenums on a pre to get line numbering */
|
||||
ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE; } /* IE indents via margin-left */
|
||||
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
|
||||
/* Alternate shading for lines */
|
||||
li.L1,li.L3,li.L5,li.L7,li.L9 { }
|
||||
|
||||
@media print {
|
||||
pre .str, code .str { color: #060; }
|
||||
pre .kwd, code .kwd { color: #006; font-weight: bold; }
|
||||
pre .com, code .com { color: #600; font-style: italic; }
|
||||
pre .typ, code .typ { color: #404; font-weight: bold; }
|
||||
pre .lit, code .lit { color: #044; }
|
||||
pre .pun, code .pun { color: #440; }
|
||||
pre .pln, code .pln { color: #000; }
|
||||
pre .tag, code .tag { color: #006; font-weight: bold; }
|
||||
pre .atn, code .atn { color: #404; }
|
||||
pre .atv, code .atv { color: #060; }
|
||||
}
|
||||
@ -0,0 +1,38 @@
|
||||
#grid {
|
||||
position: relative;
|
||||
|
||||
-moz-transition: height 0.8s ease-out;
|
||||
-o-transition: height 0.8s ease-out;
|
||||
-webkit-transition: height 0.8s ease-out;
|
||||
-ms-transition: height 0.8s ease-out;
|
||||
transition: height 0.8s ease-out;
|
||||
}
|
||||
|
||||
#grid .item {
|
||||
position: relative;
|
||||
|
||||
-moz-transition: -moz-transform 0.8s ease-out, opacity 0.8s ease-out;
|
||||
-o-transition: -o-transform 0.8s ease-out, opacity 0.8s ease-out;
|
||||
-webkit-transition: -webkit-transform 0.8s ease-out, opacity 0.8s ease-out;
|
||||
-ms-transition: -ms-transform 0.8s ease-out, opacity 0.8s ease-out;
|
||||
transition: transform 0.8s ease-out, opacity 0.8s ease-out;
|
||||
}
|
||||
|
||||
#grid .item.filtered {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#grid .item.concealed {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#grid .item:nth-child(4n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
@ -0,0 +1,227 @@
|
||||
/*=============================================*\
|
||||
$Structure
|
||||
\*=============================================*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: #0F0F0F;
|
||||
color: #F0F0F0;
|
||||
font-family: 'Poly', serif;
|
||||
}
|
||||
|
||||
#main {
|
||||
width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
/*=============================================*\
|
||||
$General Styles
|
||||
\*=============================================*/
|
||||
|
||||
::-moz-selection{ background: rgb(10, 170, 200); color:#fff; text-shadow: none; }
|
||||
::selection { background:rgb(10, 170, 200); color:#fff; text-shadow: none; }
|
||||
|
||||
h1 {
|
||||
font-weight: 400;
|
||||
font-size: 200px;
|
||||
margin: 0 0 20px;
|
||||
text-shadow: 0 1px #000;
|
||||
color: #0aaacb;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #0aaacb;
|
||||
font-size: 30px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #0AAAC8;
|
||||
}
|
||||
|
||||
section {
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #0AAAC8;
|
||||
text-decoration: none;
|
||||
|
||||
-moz-transition: all 0.2s ease-out;
|
||||
-o-transition: all 0.2s ease-out;
|
||||
-webkit-transition: all 0.2s ease-out;
|
||||
-ms-transition: all 0.2s ease-out;
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
a:visited { color: #0AAAC8;}
|
||||
a:hover { color: #F0F0F0; text-decoration: underline; }
|
||||
a:focus { outline: thin dotted; }
|
||||
|
||||
pre[rel] {
|
||||
padding-top: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
pre[rel]::after {
|
||||
content: attr(rel);
|
||||
font-family: 'Poly', serif;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
font-size: 16px;
|
||||
color: #0AAAC8;
|
||||
}
|
||||
|
||||
/*=============================================*\
|
||||
$Header
|
||||
\*=============================================*/
|
||||
header h1 {margin-bottom: 0; line-height: 0.9;}
|
||||
header p {margin-top: 0;}
|
||||
|
||||
/*=============================================*\
|
||||
$Download options
|
||||
\*=============================================*/
|
||||
.downloads a {
|
||||
position: relative;
|
||||
margin: 0 15px 0 0;
|
||||
color: #F0F0F0;
|
||||
padding: 5px 15px;
|
||||
border: 1px solid #454545;
|
||||
|
||||
|
||||
background-color: #333333;
|
||||
background-image: -webkit-linear-gradient(top, #333333, #242424);
|
||||
background-image: -moz-linear-gradient(top, #333333, #242424);
|
||||
background-image: -ms-linear-gradient(top, #333333, #242424);
|
||||
background-image: -o-linear-gradient(top, #333333, #242424);
|
||||
background-image: linear-gradient(top, #333333, #242424);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#333333', EndColorStr='#242424');
|
||||
|
||||
|
||||
-webkit-transition: all 0.2s ease-out;
|
||||
-moz-transition: all 0.2s ease-out;
|
||||
-ms-transition: all 0.2s ease-out;
|
||||
-o-transition: all 0.2s ease-out;
|
||||
transition: all 0.2s ease-out;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.downloads a:hover {
|
||||
text-decoration: none;
|
||||
color: #0AAAC8;
|
||||
border-color: #0AAAC8;
|
||||
}
|
||||
|
||||
.downloads a:hover::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(10, 170, 200, .15);
|
||||
}
|
||||
|
||||
/*=============================================*\
|
||||
$Filter options
|
||||
\*=============================================*/
|
||||
.filter {
|
||||
position: relative;
|
||||
font-size: 17px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.filter-container {
|
||||
float: left;
|
||||
background-color: #2D2D2D;
|
||||
width: 230px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.filter-options {
|
||||
padding: 0;
|
||||
display: inline;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.filter-options li {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
color: #F0F0F0;
|
||||
float: left;
|
||||
padding: 5px 15px;
|
||||
border: 1px solid #454545;
|
||||
|
||||
|
||||
background-color: #333333;
|
||||
background-image: -webkit-linear-gradient(top, #333333, #242424);
|
||||
background-image: -moz-linear-gradient(top, #333333, #242424);
|
||||
background-image: -ms-linear-gradient(top, #333333, #242424);
|
||||
background-image: -o-linear-gradient(top, #333333, #242424);
|
||||
background-image: linear-gradient(top, #333333, #242424);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#333333', EndColorStr='#242424');
|
||||
|
||||
|
||||
-webkit-transition: all 0.2s ease-out;
|
||||
-moz-transition: all 0.2s ease-out;
|
||||
-ms-transition: all 0.2s ease-out;
|
||||
-o-transition: all 0.2s ease-out;
|
||||
transition: all 0.2s ease-out;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.filter-options li:first-child {
|
||||
border-radius: 5px 0 0 5px;
|
||||
}
|
||||
|
||||
.filter-options li:last-child {
|
||||
border-radius: 0 5px 5px 0;
|
||||
}
|
||||
|
||||
.filter-options li:hover,
|
||||
.filter-options li.active {
|
||||
cursor: pointer;
|
||||
color: #0AAAC8;
|
||||
border-color: #0AAAC8;
|
||||
}
|
||||
|
||||
.filter-options li:hover::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(10, 170, 200, .15);
|
||||
}
|
||||
|
||||
|
||||
/*=============================================*\
|
||||
$Grid items
|
||||
\*=============================================*/
|
||||
|
||||
#grid .item {
|
||||
float: left;
|
||||
margin: 0 20px 20px 0;
|
||||
width: 230px;
|
||||
background-color: #2D2D2D;
|
||||
}
|
||||
|
||||
#grid .item-details {
|
||||
text-align: right;
|
||||
padding: 14px 20px;
|
||||
}
|
||||
|
||||
|
||||
/* Contain floats: h5bp.com/q */
|
||||
.clearfix:before, .clearfix:after { content: ""; display: table; }
|
||||
.clearfix:after { clear: both; }
|
||||
.clearfix { zoom: 1; }
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 190 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 219 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 684 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 396 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 806 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 451 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 211 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
@ -1 +1,346 @@
|
||||
jQuery Shuffle Plugin
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Shuffle</title>
|
||||
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="css/shuffle.css" />
|
||||
<link rel="stylesheet" href="css/prettify.css" />
|
||||
<link href='http://fonts.googleapis.com/css?family=Poly:400,400italic' rel='stylesheet' type='text/css' />
|
||||
<!--<link href='http://fonts.googleapis.com/css?family=Poly:400,400italic|Open+Sans:400italic,600italic,400,700,300,800' rel='stylesheet' type='text/css'>
|
||||
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js"></script>-->
|
||||
</head>
|
||||
<body>
|
||||
<div id="main">
|
||||
<header>
|
||||
<h1>Shuffle</h1>
|
||||
<p>Shuffle and categorize a grid of items</p>
|
||||
</header>
|
||||
|
||||
<section class="downloads">
|
||||
<h2>Downloads</h2>
|
||||
<a href="js/jquery.shuffle.js">jquery.shuffle.js</a>
|
||||
<a href="js/jquery.shuffle.min.js">jquery.shuffle.min.js</a>
|
||||
<a href="css/shuffle.css">shuffle.css</a>
|
||||
</section>
|
||||
|
||||
|
||||
<section>
|
||||
<h2>Example</h2>
|
||||
|
||||
<div class="filter clearfix">
|
||||
<ul class="filter-options">
|
||||
<li class="active" data-key="all">Most Recent</li>
|
||||
<li data-key="wallpaper">Wallpapers</li>
|
||||
<li data-key="graphics">Graphic Design</li>
|
||||
<li data-key="photography">Photography</li>
|
||||
<li data-key="3d">3D Renders</li>
|
||||
<li data-key="motion">Motion Graphics</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="grid" class="clearfix">
|
||||
<div class="item" data-key='["photography"]'>
|
||||
<img src="img/baseball.png" alt="" height="145" width="230" />
|
||||
<div class="item-details">
|
||||
<a href="img/originals/baseball.jpg">Photography</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" data-key='["wallpaper", "3d"]'>
|
||||
<img src="img/tennis-ball.png" alt="" height="145" width="230" />
|
||||
<div class="item-details">
|
||||
<a href="#">3D Render, Wallpaper</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" data-key='["3d", "wallpaper"]'>
|
||||
<img src="img/imac.png" alt="" height="145" width="230" />
|
||||
<div class="item-details">
|
||||
<a href="#">3D Render, Wallpaper</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" data-key='["graphics"]'>
|
||||
<img src="img/master-chief.png" alt="" height="145" width="230" />
|
||||
<div class="item-details">
|
||||
<a href="#">Graphic Design</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" data-key='["3d", "wallpaper"]'>
|
||||
<img src="img/es-blue.png" alt="" height="145" width="230" />
|
||||
<div class="item-details">
|
||||
<a href="#">3D Render, Wallpaper</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" data-key='["photography"]'>
|
||||
<img src="img/pumpkin.png" alt="" height="145" width="230" />
|
||||
<div class="item-details">
|
||||
<a href="#">Photography</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" data-key='["3d", "wallpaper"]'>
|
||||
<img src="img/vestride-red.png" alt="" height="145" width="230" />
|
||||
<div class="item-details">
|
||||
<a href="#">3D Render, Wallpaper</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" data-key='["motion"]'>
|
||||
<img src="img/newegg.png" alt="" height="145" width="230" />
|
||||
<div class="item-details">
|
||||
<a href="#">Motion Graphics</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" data-key='["wallpaper"]'>
|
||||
<img src="img/eightfoldarc.png" alt="" height="145" width="230" />
|
||||
<div class="item-details">
|
||||
<a href="#">Wallpaper</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" data-key='["photography"]'>
|
||||
<img src="img/ground.png" alt="" height="145" width="230" />
|
||||
<div class="item-details">
|
||||
<a href="img/originals/baseball.jpg">Photography</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" data-key='["wallpaper"]'>
|
||||
<img src="img/grassy-hills.png" alt="" height="145" width="230" />
|
||||
<div class="item-details">
|
||||
<a href="#">Wallpaper</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" data-key='["3d", "wallpaper"]'>
|
||||
<img src="img/vestride-classy.png" alt="" height="145" width="230" />
|
||||
<div class="item-details">
|
||||
<a href="#">3D Render, Wallpaper</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Features</h2>
|
||||
|
||||
<ul>
|
||||
<li>Uses CSS Transitions!</li>
|
||||
<li>Filter items by categories</li>
|
||||
<li>Items can have multiple categories</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Options</h2>
|
||||
|
||||
<div>
|
||||
<p>Settings you can change</p>
|
||||
<pre rel="JavaScript" class="prettyprint">
|
||||
<code>
|
||||
var options = {
|
||||
'itemWidth' : 230, // Width of the grid item
|
||||
'margins' : 20, // right and bottom margins
|
||||
'key' : 'all' // Which category to show
|
||||
};
|
||||
</code>
|
||||
</pre>
|
||||
|
||||
<p>Change the length of the transition by changing the "0.8s" (lines 14-18 in <a href="css/shuffle.css">shuffle.css</a>)</p>
|
||||
<pre rel="CSS" class="prettyprint">
|
||||
<code>
|
||||
transition: transform 0.8s ease-out, opacity 0.8s ease-out;
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<h2>Usage</h2>
|
||||
|
||||
<div>
|
||||
<p>The html structure. The only real important thing here is the 'data-key' attribute. It has to be a <a href="http://jsonlint.com/">valid JSON</a> array of strings.</p>
|
||||
<pre rel="HTML" class="prettyprint">
|
||||
<code>
|
||||
<div id="grid">
|
||||
<div class="item" data-key='["photography"]'>
|
||||
<img src="img/baseball.png" alt="" height="145" width="230" />
|
||||
<div class="item-details">
|
||||
<a href="img/originals/baseball.jpg">Photography</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" data-key='["wallpaper", "3d"]'>
|
||||
<img src="img/tennis-ball.png" alt="" height="145" width="230" />
|
||||
<div class="item-details">
|
||||
<a href="#">3D Render, Wallpaper</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" data-key='["3d", "wallpaper"]'>
|
||||
<img src="img/imac.png" alt="" height="145" width="230" />
|
||||
<div class="item-details">
|
||||
<a href="#">3D Render, Wallpaper</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" data-key='["graphics"]'>
|
||||
<img src="img/master-chief.png" alt="" height="145" width="230" />
|
||||
<div class="item-details">
|
||||
<a href="#">Graphic Design</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</code>
|
||||
</pre>
|
||||
|
||||
<p>Sets up the button clicks and runs shuffle</p>
|
||||
<pre rel="jQuery" class="prettyprint">
|
||||
<code>
|
||||
$(document).ready(function(){
|
||||
|
||||
// Set up button clicks
|
||||
$('.filter-options li').click(function() {
|
||||
var $this = $(this),
|
||||
$grid = $('#grid');
|
||||
|
||||
// Hide current label, show current label in title
|
||||
$('.filter-options .active').removeClass('active');
|
||||
$this.addClass('active');
|
||||
|
||||
// Filter elements
|
||||
$grid.shuffle('shuffle', $this.attr('data-key'));
|
||||
});
|
||||
|
||||
// instantiate the plugin
|
||||
$('#grid').shuffle({
|
||||
itemWidth : 230,
|
||||
margins : 20
|
||||
});
|
||||
});
|
||||
</code>
|
||||
</pre>
|
||||
|
||||
|
||||
<p>This is the shuffle.css file</p>
|
||||
<pre rel="CSS" class="prettyprint">
|
||||
<code>
|
||||
#grid {
|
||||
position: relative;
|
||||
|
||||
-moz-transition: height 0.8s ease-out;
|
||||
-o-transition: height 0.8s ease-out;
|
||||
-webkit-transition: height 0.8s ease-out;
|
||||
-ms-transition: height 0.8s ease-out;
|
||||
transition: height 0.8s ease-out;
|
||||
}
|
||||
|
||||
#grid .item {
|
||||
position: relative;
|
||||
|
||||
-moz-transition: -moz-transform 0.8s ease-out, opacity 0.8s ease-out;
|
||||
-o-transition: -o-transform 0.8s ease-out, opacity 0.8s ease-out;
|
||||
-webkit-transition: -webkit-transform 0.8s ease-out, opacity 0.8s ease-out;
|
||||
-ms-transition: -ms-transform 0.8s ease-out, opacity 0.8s ease-out;
|
||||
transition: transform 0.8s ease-out, opacity 0.8s ease-out;
|
||||
}
|
||||
|
||||
#grid .item.filtered {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#grid .item.concealed {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#grid .item:nth-child(4n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
</code>
|
||||
</pre>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section>
|
||||
<h2>Dependencies</h2>
|
||||
|
||||
<ul>
|
||||
<li><a target="_blank" href="http://jquery.com">jQuery</a></li>
|
||||
|
||||
<li><a target="_blank" href="http://modernizr.com">Modernizr</a>
|
||||
<ul>
|
||||
<li>A custom Modernizr build has been included with the plugin.</li>
|
||||
<li>If you already have Modernizr on your site, you may delete it.</li>
|
||||
<li>If you don't know what Modernizr is, leave it!</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
|
||||
<section>
|
||||
<h2>Supported Browsers</h2>
|
||||
|
||||
<ul>
|
||||
<li>Chrome</li>
|
||||
<li>Firefox</li>
|
||||
<li>IE 7+</li>
|
||||
<li>Opera</li>
|
||||
<li>Safari</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
Browsers that don't support CSS transitions and transforms <strong>*cough*</strong> IE <= 9 <strong>*cough*</strong> will see a less cool, javascript based version of the effect.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Links</h2>
|
||||
|
||||
<p>
|
||||
<a href="https://github.com/Vestride/Shuffle">Github Repo</a><br />
|
||||
<a href="http://isotope.metafizzy.co/">Inspired by Isotope</a><br />
|
||||
<a href="http://glencheney.com">Me</a>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!--
|
||||
<section>
|
||||
<h2>Changes</h2>
|
||||
|
||||
|
||||
</section>
|
||||
-->
|
||||
</div>
|
||||
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
|
||||
<script defer src="js/jquery.shuffle.js"></script>
|
||||
<script defer src="js/prettify.js"></script>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
prettyPrint();
|
||||
|
||||
// Set up button clicks
|
||||
$('.filter-options li').click(function() {
|
||||
var $this = $(this),
|
||||
$grid = $('#grid');
|
||||
|
||||
// Hide current label, show current label in title
|
||||
$('.filter-options .active').removeClass('active');
|
||||
$this.addClass('active');
|
||||
|
||||
// Filter elements
|
||||
$grid.shuffle('shuffle', $this.attr('data-key'));
|
||||
});
|
||||
|
||||
// instantiate the plugin
|
||||
$('#grid').shuffle({
|
||||
itemWidth : 230,
|
||||
margins : 20
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -0,0 +1,222 @@
|
||||
// IMPORTANT!
|
||||
// If you're already using Modernizr, delete it from this file. If you don't know what Modernizr is, leave it :)
|
||||
|
||||
/* Modernizr 2.0.6 (Custom Build) | MIT & BSD
|
||||
* Build: http://www.modernizr.com/download/#-csstransforms-csstransforms3d-csstransitions-cssclasses-teststyles-testprop-testallprops-prefixes-domprefixes
|
||||
*/
|
||||
;window.Modernizr=function(a,b,c){function C(a,b){var c=a.charAt(0).toUpperCase()+a.substr(1),d=(a+" "+o.join(c+" ")+c).split(" ");return B(d,b)}function B(a,b){for(var d in a)if(k[a[d]]!==c)return b=="pfx"?a[d]:!0;return!1}function A(a,b){return!!~(""+a).indexOf(b)}function z(a,b){return typeof a===b}function y(a,b){return x(n.join(a+";")+(b||""))}function x(a){k.cssText=a}var d="2.0.6",e={},f=!0,g=b.documentElement,h=b.head||b.getElementsByTagName("head")[0],i="modernizr",j=b.createElement(i),k=j.style,l,m=Object.prototype.toString,n=" -webkit- -moz- -o- -ms- -khtml- ".split(" "),o="Webkit Moz O ms Khtml".split(" "),p={},q={},r={},s=[],t=function(a,c,d,e){var f,h,j,k=b.createElement("div");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:i+(d+1),k.appendChild(j);f=["­","<style>",a,"</style>"].join(""),k.id=i,k.innerHTML+=f,g.appendChild(k),h=c(k,a),k.parentNode.removeChild(k);return!!h},u,v={}.hasOwnProperty,w;!z(v,c)&&!z(v.call,c)?w=function(a,b){return v.call(a,b)}:w=function(a,b){return b in a&&z(a.constructor.prototype[b],c)};var D=function(a,c){var d=a.join(""),f=c.length;t(d,function(a,c){var d=b.styleSheets[b.styleSheets.length-1],g=d.cssRules&&d.cssRules[0]?d.cssRules[0].cssText:d.cssText||"",h=a.childNodes,i={};while(f--)i[h[f].id]=h[f];e.csstransforms3d=i.csstransforms3d.offsetLeft===9},f,c)}([,["@media (",n.join("transform-3d),("),i,")","{#csstransforms3d{left:9px;position:absolute}}"].join("")],[,"csstransforms3d"]);p.csstransforms=function(){return!!B(["transformProperty","WebkitTransform","MozTransform","OTransform","msTransform"])},p.csstransforms3d=function(){var a=!!B(["perspectiveProperty","WebkitPerspective","MozPerspective","OPerspective","msPerspective"]);a&&"webkitPerspective"in g.style&&(a=e.csstransforms3d);return a},p.csstransitions=function(){return C("transitionProperty")};for(var E in p)w(p,E)&&(u=E.toLowerCase(),e[u]=p[E](),s.push((e[u]?"":"no-")+u));x(""),j=l=null,e._version=d,e._prefixes=n,e._domPrefixes=o,e.testProp=function(a){return B([a])},e.testAllProps=C,e.testStyles=t,g.className=g.className.replace(/\bno-js\b/,"")+(f?" js "+s.join(" "):"");return e}(this,this.document);
|
||||
|
||||
/**
|
||||
* jQuery Shuffle Plugin
|
||||
* Uses CSS Transforms to filter down a grid of items (degrades to jQuery's animate).
|
||||
* Inspired by Isotope http://isotope.metafizzy.co/
|
||||
* Copyright (c) 2011 Glen Cheney cheney [dot] glen [at] gmail [dot] com http://glencheney.com
|
||||
* @author Glen Cheney
|
||||
* @version 1.2
|
||||
* @date 12/31/11
|
||||
*
|
||||
*/
|
||||
(function($) {
|
||||
var methods = {
|
||||
|
||||
init : function(options) {
|
||||
var settings = {
|
||||
'itemWidth' : 230,
|
||||
'margins' : 20,
|
||||
'key' : 'all'
|
||||
};
|
||||
|
||||
if (options) {
|
||||
$.extend(settings, options);
|
||||
}
|
||||
|
||||
return this.each(function() {
|
||||
var $this = $(this),
|
||||
$items = $this.children(),
|
||||
itemsPerRow = Math.floor($this.width() / settings.itemWidth),
|
||||
numRows = 2,
|
||||
itemHeight = $items.first().outerHeight(),
|
||||
data;
|
||||
|
||||
data = {
|
||||
'$items' : $items,
|
||||
'itemsPerRow' : itemsPerRow,
|
||||
'numRows' : numRows,
|
||||
'itemHeight' : itemHeight,
|
||||
'itemWidth' : settings.itemWidth,
|
||||
'margins' : settings.margins
|
||||
};
|
||||
|
||||
$this.data('shuffle', data);
|
||||
|
||||
// Disabled CSS Animations if we're going to use jQuery to animate
|
||||
if (!Modernizr.csstransforms || !Modernizr.csstransitions) {
|
||||
methods.setPrefixedCss($items, 'transition', 'none');
|
||||
}
|
||||
|
||||
// Do it
|
||||
methods.shuffle.call(this, 'all');
|
||||
});
|
||||
},
|
||||
|
||||
shuffle : function(category) {
|
||||
var $this = $(this),
|
||||
data = $this.data('shuffle'),
|
||||
numElements,
|
||||
gridHeight;
|
||||
|
||||
// If we somehow don't have data, initialize it
|
||||
if (!data) {
|
||||
methods.init.call(this);
|
||||
data = $(this).data('shuffle');
|
||||
}
|
||||
|
||||
if (!category) category = 'all';
|
||||
|
||||
// Hide/show appropriate items
|
||||
if (category == 'all') {
|
||||
data.$items.removeClass('concealed');
|
||||
} else {
|
||||
data.$items.removeClass('concealed filtered').each(function() {
|
||||
var keys = $(this).attr('data-key'),
|
||||
kArray = $.parseJSON(keys);
|
||||
if ($.inArray(category, kArray) === -1) {
|
||||
$(this).addClass('concealed');
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
numElements = data.$items.not('.concealed').addClass('filtered').length;
|
||||
|
||||
// Shrink each concealed item
|
||||
methods.shrink.call(this);
|
||||
|
||||
// Update transforms on .filtered elements so they will animate to their new positions
|
||||
methods.filter.call(this);
|
||||
|
||||
// Adjust the height of the grid
|
||||
gridHeight = (Math.ceil(numElements / data.itemsPerRow) * (data.itemHeight + data.margins)) - data.margins;
|
||||
$this.css('height', gridHeight + 'px');
|
||||
},
|
||||
|
||||
|
||||
shrink : function() {
|
||||
var $concealed = $(this).find('.concealed');
|
||||
if ($concealed.length === 0) {
|
||||
return;
|
||||
}
|
||||
$concealed.each(function() {
|
||||
var $this = $(this),
|
||||
x = parseInt($this.attr('data-x')),
|
||||
y = parseInt($this.attr('data-y')),
|
||||
data = $this.parent().data('shuffle');
|
||||
|
||||
if (!x) x = 0;
|
||||
if (!y) y = 0;
|
||||
|
||||
methods.transition({
|
||||
$this: $this,
|
||||
x: x,
|
||||
y: y,
|
||||
left: (x + (data.itemWidth / 2)) + 'px',
|
||||
top: (y + (data.itemHeight / 2)) + 'px',
|
||||
scale : 0.001,
|
||||
opacity: 0,
|
||||
height: '0px',
|
||||
width: '0px'
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
filter : function() {
|
||||
var y = 0, $filtered = $(this).find('.filtered');
|
||||
|
||||
$filtered.each(function(index) {
|
||||
var $this = $(this),
|
||||
data = $this.parent().data('shuffle'),
|
||||
x = (index % data.itemsPerRow) * (data.itemWidth + data.margins),
|
||||
row = Math.floor(index / data.itemsPerRow)
|
||||
|
||||
if (index % data.itemsPerRow == 0) {
|
||||
y = row * (data.itemHeight + data.margins);
|
||||
}
|
||||
|
||||
// Save data for shrink
|
||||
$this.attr({'data-x' : x, 'data-y' : y});
|
||||
|
||||
methods.transition({
|
||||
$this: $this,
|
||||
x: x,
|
||||
y: y,
|
||||
left: x + 'px',
|
||||
top: y + 'px',
|
||||
scale : 1,
|
||||
opacity: 1,
|
||||
height: data.itemHeight + 'px',
|
||||
width: data.itemWidth + 'px'
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Uses Modernizr's testAllProps (aka prefixed()) to get the correct
|
||||
* vendor property name and sets it using jQuery .css()
|
||||
* @param {jq} $el the jquery object to set the css on
|
||||
* @param {string} prop the property to set (e.g. 'transition')
|
||||
* @param {string} value the value of the prop
|
||||
*/
|
||||
setPrefixedCss : function($el, prop, value) {
|
||||
$el.css(Modernizr.testAllProps(prop, 'pfx'), value);
|
||||
},
|
||||
|
||||
/**
|
||||
* Transitions an item in the grid
|
||||
*
|
||||
* @param {object} opts options
|
||||
* @param {jQuery} opts.$this jQuery object representing the current item
|
||||
* @param {int} opts.x translate's x
|
||||
* @param {int} opts.y translate's y
|
||||
* @param {String} opts.left left position (used when no transforms available)
|
||||
* @param {String} opts.top top position (used when no transforms available)
|
||||
* @param {float} opts.scale amount to scale the item
|
||||
* @param {float} opts.opacity opacity of the item
|
||||
* @param {String} opts.height the height of the item (used when no transforms available)
|
||||
* @param {String} opts.width the width of the item (used when no transforms available)
|
||||
*/
|
||||
transition: function(opts) {
|
||||
var transform;
|
||||
// Use CSS Transforms if we have them
|
||||
if (Modernizr.csstransforms && Modernizr.csstransitions) {
|
||||
if (Modernizr.csstransforms3d) {
|
||||
transform = 'translate3d(' + opts.x + 'px, ' + opts.y + 'px, 0px) scale3d(' + opts.scale + ', ' + opts.scale + ', ' + opts.scale + ')';
|
||||
} else {
|
||||
transform = 'translate(' + opts.x + 'px, ' + opts.y + 'px) scale(' + opts.scale + ', ' + opts.scale + ')';
|
||||
}
|
||||
|
||||
// Update css to trigger CSS Animation
|
||||
methods.setPrefixedCss(opts.$this, 'transform', transform);
|
||||
} else {
|
||||
// Use jQuery to animate left/top
|
||||
opts.$this.animate({
|
||||
left: opts.left,
|
||||
top: opts.top,
|
||||
opacity: opts.opacity,
|
||||
height: opts.height,
|
||||
width: opts.width
|
||||
}, 800);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.shuffle = function(method) {
|
||||
if (methods[method]) {
|
||||
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
|
||||
} else if (typeof method === 'object' || ! method) {
|
||||
return methods.init.apply(this, arguments);
|
||||
} else {
|
||||
$.error('Method ' + method + ' does not exist on jQuery.shuffle');
|
||||
return false;
|
||||
}
|
||||
};
|
||||
})(jQuery);
|
||||
@ -0,0 +1,18 @@
|
||||
// IMPORTANT!
|
||||
// If you're already using Modernizr, delete it from this file. If you don't know what Modernizr is, leave it :)
|
||||
|
||||
/* Modernizr 2.0.6 (Custom Build) | MIT & BSD
|
||||
* Build: http://www.modernizr.com/download/#-csstransforms-csstransforms3d-csstransitions-cssclasses-teststyles-testprop-testallprops-prefixes-domprefixes
|
||||
*/
|
||||
;window.Modernizr=function(a,b,c){function C(a,b){var c=a.charAt(0).toUpperCase()+a.substr(1),d=(a+" "+o.join(c+" ")+c).split(" ");return B(d,b)}function B(a,b){for(var d in a)if(k[a[d]]!==c)return b=="pfx"?a[d]:!0;return!1}function A(a,b){return!!~(""+a).indexOf(b)}function z(a,b){return typeof a===b}function y(a,b){return x(n.join(a+";")+(b||""))}function x(a){k.cssText=a}var d="2.0.6",e={},f=!0,g=b.documentElement,h=b.head||b.getElementsByTagName("head")[0],i="modernizr",j=b.createElement(i),k=j.style,l,m=Object.prototype.toString,n=" -webkit- -moz- -o- -ms- -khtml- ".split(" "),o="Webkit Moz O ms Khtml".split(" "),p={},q={},r={},s=[],t=function(a,c,d,e){var f,h,j,k=b.createElement("div");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:i+(d+1),k.appendChild(j);f=["­","<style>",a,"</style>"].join(""),k.id=i,k.innerHTML+=f,g.appendChild(k),h=c(k,a),k.parentNode.removeChild(k);return!!h},u,v={}.hasOwnProperty,w;!z(v,c)&&!z(v.call,c)?w=function(a,b){return v.call(a,b)}:w=function(a,b){return b in a&&z(a.constructor.prototype[b],c)};var D=function(a,c){var d=a.join(""),f=c.length;t(d,function(a,c){var d=b.styleSheets[b.styleSheets.length-1],g=d.cssRules&&d.cssRules[0]?d.cssRules[0].cssText:d.cssText||"",h=a.childNodes,i={};while(f--)i[h[f].id]=h[f];e.csstransforms3d=i.csstransforms3d.offsetLeft===9},f,c)}([,["@media (",n.join("transform-3d),("),i,")","{#csstransforms3d{left:9px;position:absolute}}"].join("")],[,"csstransforms3d"]);p.csstransforms=function(){return!!B(["transformProperty","WebkitTransform","MozTransform","OTransform","msTransform"])},p.csstransforms3d=function(){var a=!!B(["perspectiveProperty","WebkitPerspective","MozPerspective","OPerspective","msPerspective"]);a&&"webkitPerspective"in g.style&&(a=e.csstransforms3d);return a},p.csstransitions=function(){return C("transitionProperty")};for(var E in p)w(p,E)&&(u=E.toLowerCase(),e[u]=p[E](),s.push((e[u]?"":"no-")+u));x(""),j=l=null,e._version=d,e._prefixes=n,e._domPrefixes=o,e.testProp=function(a){return B([a])},e.testAllProps=C,e.testStyles=t,g.className=g.className.replace(/\bno-js\b/,"")+(f?" js "+s.join(" "):"");return e}(this,this.document);
|
||||
|
||||
/**
|
||||
* jQuery Shuffle Plugin
|
||||
* Uses CSS Transforms to filter down a grid of items (degrades to jQuery's animate).
|
||||
* Inspired by Isotope http://isotope.metafizzy.co/
|
||||
* Copyright (c) 2011 Glen Cheney cheney [dot] glen [at] gmail [dot] com http://glencheney.com
|
||||
* @author Glen Cheney
|
||||
* @version 1.2
|
||||
* @date 12.15.11
|
||||
*/
|
||||
(function(a){var b={init:function(c){var d={itemWidth:230,margins:20,key:"all"};if(c){a.extend(d,c)}return this.each(function(){var c=a(this),e=c.children(),f=Math.floor(c.width()/d.itemWidth),g=2,h=e.first().outerHeight(),i;i={$items:e,itemsPerRow:f,numRows:g,itemHeight:h,itemWidth:d.itemWidth,margins:d.margins};c.data("shuffle",i);if(!Modernizr.csstransforms||!Modernizr.csstransitions){b.setPrefixedCss(e,"transition","none")}b.shuffle.call(this,"all")})},shuffle:function(c){var d=a(this),e=d.data("shuffle"),f,g;if(!e){b.init.call(this);e=a(this).data("shuffle")}if(!c)c="all";if(c=="all"){e.$items.removeClass("concealed")}else{e.$items.removeClass("concealed filtered").each(function(){var b=a(this).attr("data-key"),d=a.parseJSON(b);if(a.inArray(c,d)===-1){a(this).addClass("concealed");return}})}f=e.$items.not(".concealed").addClass("filtered").length;b.shrink.call(this);b.filter.call(this);g=Math.ceil(f/e.itemsPerRow)*(e.itemHeight+e.margins)-e.margins;d.css("height",g+"px")},shrink:function(){var c=a(this).find(".concealed");if(c.length===0){return}c.each(function(){var c=a(this),d=parseInt(c.attr("data-x")),e=parseInt(c.attr("data-y")),f=c.parent().data("shuffle");if(!d)d=0;if(!e)e=0;b.transition({$this:c,x:d,y:e,left:d+f.itemWidth/2+"px",top:e+f.itemHeight/2+"px",scale:.001,opacity:0,height:"0px",width:"0px"})})},filter:function(){var c=0,d=a(this).find(".filtered");d.each(function(d){var e=a(this),f=e.parent().data("shuffle"),g=d%f.itemsPerRow*(f.itemWidth+f.margins),h=Math.floor(d/f.itemsPerRow);if(d%f.itemsPerRow==0){c=h*(f.itemHeight+f.margins)}e.attr({"data-x":g,"data-y":c});b.transition({$this:e,x:g,y:c,left:g+"px",top:c+"px",scale:1,opacity:1,height:f.itemHeight+"px",width:f.itemWidth+"px"})})},setPrefixedCss:function(a,b,c){a.css(Modernizr.testAllProps(b,"pfx"),c)},transition:function(a){var c;if(Modernizr.csstransforms&&Modernizr.csstransitions){if(Modernizr.csstransforms3d){c="translate3d("+a.x+"px, "+a.y+"px, 0px) scale3d("+a.scale+", "+a.scale+", "+a.scale+")"}else{c="translate("+a.x+"px, "+a.y+"px) scale("+a.scale+", "+a.scale+")"}b.setPrefixedCss(a.$this,"transform",c)}else{a.$this.animate({left:a.left,top:a.top,opacity:a.opacity,height:a.height,width:a.width},800)}}};a.fn.shuffle=function(c){if(b[c]){return b[c].apply(this,Array.prototype.slice.call(arguments,1))}else if(typeof c==="object"||!c){return b.init.apply(this,arguments)}else{a.error("Method "+c+" does not exist on jQuery.shuffle");return false}}})(jQuery)
|
||||
@ -0,0 +1,28 @@
|
||||
var q=null;window.PR_SHOULD_USE_CONTINUATION=!0;
|
||||
(function(){function L(a){function m(a){var f=a.charCodeAt(0);if(f!==92)return f;var b=a.charAt(1);return(f=r[b])?f:"0"<=b&&b<="7"?parseInt(a.substring(1),8):b==="u"||b==="x"?parseInt(a.substring(2),16):a.charCodeAt(1)}function e(a){if(a<32)return(a<16?"\\x0":"\\x")+a.toString(16);a=String.fromCharCode(a);if(a==="\\"||a==="-"||a==="["||a==="]")a="\\"+a;return a}function h(a){for(var f=a.substring(1,a.length-1).match(/\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\[0-3][0-7]{0,2}|\\[0-7]{1,2}|\\[\S\s]|[^\\]/g),a=
|
||||
[],b=[],o=f[0]==="^",c=o?1:0,i=f.length;c<i;++c){var j=f[c];if(/\\[bdsw]/i.test(j))a.push(j);else{var j=m(j),d;c+2<i&&"-"===f[c+1]?(d=m(f[c+2]),c+=2):d=j;b.push([j,d]);d<65||j>122||(d<65||j>90||b.push([Math.max(65,j)|32,Math.min(d,90)|32]),d<97||j>122||b.push([Math.max(97,j)&-33,Math.min(d,122)&-33]))}}b.sort(function(a,f){return a[0]-f[0]||f[1]-a[1]});f=[];j=[NaN,NaN];for(c=0;c<b.length;++c)i=b[c],i[0]<=j[1]+1?j[1]=Math.max(j[1],i[1]):f.push(j=i);b=["["];o&&b.push("^");b.push.apply(b,a);for(c=0;c<
|
||||
f.length;++c)i=f[c],b.push(e(i[0])),i[1]>i[0]&&(i[1]+1>i[0]&&b.push("-"),b.push(e(i[1])));b.push("]");return b.join("")}function y(a){for(var f=a.source.match(/\[(?:[^\\\]]|\\[\S\s])*]|\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\\d+|\\[^\dux]|\(\?[!:=]|[()^]|[^()[\\^]+/g),b=f.length,d=[],c=0,i=0;c<b;++c){var j=f[c];j==="("?++i:"\\"===j.charAt(0)&&(j=+j.substring(1))&&j<=i&&(d[j]=-1)}for(c=1;c<d.length;++c)-1===d[c]&&(d[c]=++t);for(i=c=0;c<b;++c)j=f[c],j==="("?(++i,d[i]===void 0&&(f[c]="(?:")):"\\"===j.charAt(0)&&
|
||||
(j=+j.substring(1))&&j<=i&&(f[c]="\\"+d[i]);for(i=c=0;c<b;++c)"^"===f[c]&&"^"!==f[c+1]&&(f[c]="");if(a.ignoreCase&&s)for(c=0;c<b;++c)j=f[c],a=j.charAt(0),j.length>=2&&a==="["?f[c]=h(j):a!=="\\"&&(f[c]=j.replace(/[A-Za-z]/g,function(a){a=a.charCodeAt(0);return"["+String.fromCharCode(a&-33,a|32)+"]"}));return f.join("")}for(var t=0,s=!1,l=!1,p=0,d=a.length;p<d;++p){var g=a[p];if(g.ignoreCase)l=!0;else if(/[a-z]/i.test(g.source.replace(/\\u[\da-f]{4}|\\x[\da-f]{2}|\\[^UXux]/gi,""))){s=!0;l=!1;break}}for(var r=
|
||||
{b:8,t:9,n:10,v:11,f:12,r:13},n=[],p=0,d=a.length;p<d;++p){g=a[p];if(g.global||g.multiline)throw Error(""+g);n.push("(?:"+y(g)+")")}return RegExp(n.join("|"),l?"gi":"g")}function M(a){function m(a){switch(a.nodeType){case 1:if(e.test(a.className))break;for(var g=a.firstChild;g;g=g.nextSibling)m(g);g=a.nodeName;if("BR"===g||"LI"===g)h[s]="\n",t[s<<1]=y++,t[s++<<1|1]=a;break;case 3:case 4:g=a.nodeValue,g.length&&(g=p?g.replace(/\r\n?/g,"\n"):g.replace(/[\t\n\r ]+/g," "),h[s]=g,t[s<<1]=y,y+=g.length,
|
||||
t[s++<<1|1]=a)}}var e=/(?:^|\s)nocode(?:\s|$)/,h=[],y=0,t=[],s=0,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=document.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);m(a);return{a:h.join("").replace(/\n$/,""),c:t}}function B(a,m,e,h){m&&(a={a:m,d:a},e(a),h.push.apply(h,a.e))}function x(a,m){function e(a){for(var l=a.d,p=[l,"pln"],d=0,g=a.a.match(y)||[],r={},n=0,z=g.length;n<z;++n){var f=g[n],b=r[f],o=void 0,c;if(typeof b===
|
||||
"string")c=!1;else{var i=h[f.charAt(0)];if(i)o=f.match(i[1]),b=i[0];else{for(c=0;c<t;++c)if(i=m[c],o=f.match(i[1])){b=i[0];break}o||(b="pln")}if((c=b.length>=5&&"lang-"===b.substring(0,5))&&!(o&&typeof o[1]==="string"))c=!1,b="src";c||(r[f]=b)}i=d;d+=f.length;if(c){c=o[1];var j=f.indexOf(c),k=j+c.length;o[2]&&(k=f.length-o[2].length,j=k-c.length);b=b.substring(5);B(l+i,f.substring(0,j),e,p);B(l+i+j,c,C(b,c),p);B(l+i+k,f.substring(k),e,p)}else p.push(l+i,b)}a.e=p}var h={},y;(function(){for(var e=a.concat(m),
|
||||
l=[],p={},d=0,g=e.length;d<g;++d){var r=e[d],n=r[3];if(n)for(var k=n.length;--k>=0;)h[n.charAt(k)]=r;r=r[1];n=""+r;p.hasOwnProperty(n)||(l.push(r),p[n]=q)}l.push(/[\S\s]/);y=L(l)})();var t=m.length;return e}function u(a){var m=[],e=[];a.tripleQuotedStrings?m.push(["str",/^(?:'''(?:[^'\\]|\\[\S\s]|''?(?=[^']))*(?:'''|$)|"""(?:[^"\\]|\\[\S\s]|""?(?=[^"]))*(?:"""|$)|'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$))/,q,"'\""]):a.multiLineStrings?m.push(["str",/^(?:'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$)|`(?:[^\\`]|\\[\S\s])*(?:`|$))/,
|
||||
q,"'\"`"]):m.push(["str",/^(?:'(?:[^\n\r'\\]|\\.)*(?:'|$)|"(?:[^\n\r"\\]|\\.)*(?:"|$))/,q,"\"'"]);a.verbatimStrings&&e.push(["str",/^@"(?:[^"]|"")*(?:"|$)/,q]);var h=a.hashComments;h&&(a.cStyleComments?(h>1?m.push(["com",/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,q,"#"]):m.push(["com",/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\n\r]*)/,q,"#"]),e.push(["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,q])):m.push(["com",/^#[^\n\r]*/,
|
||||
q,"#"]));a.cStyleComments&&(e.push(["com",/^\/\/[^\n\r]*/,q]),e.push(["com",/^\/\*[\S\s]*?(?:\*\/|$)/,q]));a.regexLiterals&&e.push(["lang-regex",/^(?:^^\.?|[!+-]|!=|!==|#|%|%=|&|&&|&&=|&=|\(|\*|\*=|\+=|,|-=|->|\/|\/=|:|::|;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|[?@[^]|\^=|\^\^|\^\^=|{|\||\|=|\|\||\|\|=|~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\s*(\/(?=[^*/])(?:[^/[\\]|\\[\S\s]|\[(?:[^\\\]]|\\[\S\s])*(?:]|$))+\/)/]);(h=a.types)&&e.push(["typ",h]);a=(""+a.keywords).replace(/^ | $/g,
|
||||
"");a.length&&e.push(["kwd",RegExp("^(?:"+a.replace(/[\s,]+/g,"|")+")\\b"),q]);m.push(["pln",/^\s+/,q," \r\n\t\xa0"]);e.push(["lit",/^@[$_a-z][\w$@]*/i,q],["typ",/^(?:[@_]?[A-Z]+[a-z][\w$@]*|\w+_t\b)/,q],["pln",/^[$_a-z][\w$@]*/i,q],["lit",/^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i,q,"0123456789"],["pln",/^\\[\S\s]?/,q],["pun",/^.[^\s\w"-$'./@\\`]*/,q]);return x(m,e)}function D(a,m){function e(a){switch(a.nodeType){case 1:if(k.test(a.className))break;if("BR"===a.nodeName)h(a),
|
||||
a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)e(a);break;case 3:case 4:if(p){var b=a.nodeValue,d=b.match(t);if(d){var c=b.substring(0,d.index);a.nodeValue=c;(b=b.substring(d.index+d[0].length))&&a.parentNode.insertBefore(s.createTextNode(b),a.nextSibling);h(a);c||a.parentNode.removeChild(a)}}}}function h(a){function b(a,d){var e=d?a.cloneNode(!1):a,f=a.parentNode;if(f){var f=b(f,1),g=a.nextSibling;f.appendChild(e);for(var h=g;h;h=g)g=h.nextSibling,f.appendChild(h)}return e}
|
||||
for(;!a.nextSibling;)if(a=a.parentNode,!a)return;for(var a=b(a.nextSibling,0),e;(e=a.parentNode)&&e.nodeType===1;)a=e;d.push(a)}var k=/(?:^|\s)nocode(?:\s|$)/,t=/\r\n?|\n/,s=a.ownerDocument,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=s.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);for(l=s.createElement("LI");a.firstChild;)l.appendChild(a.firstChild);for(var d=[l],g=0;g<d.length;++g)e(d[g]);m===(m|0)&&d[0].setAttribute("value",
|
||||
m);var r=s.createElement("OL");r.className="linenums";for(var n=Math.max(0,m-1|0)||0,g=0,z=d.length;g<z;++g)l=d[g],l.className="L"+(g+n)%10,l.firstChild||l.appendChild(s.createTextNode("\xa0")),r.appendChild(l);a.appendChild(r)}function k(a,m){for(var e=m.length;--e>=0;){var h=m[e];A.hasOwnProperty(h)?window.console&&console.warn("cannot override language handler %s",h):A[h]=a}}function C(a,m){if(!a||!A.hasOwnProperty(a))a=/^\s*</.test(m)?"default-markup":"default-code";return A[a]}function E(a){var m=
|
||||
a.g;try{var e=M(a.h),h=e.a;a.a=h;a.c=e.c;a.d=0;C(m,h)(a);var k=/\bMSIE\b/.test(navigator.userAgent),m=/\n/g,t=a.a,s=t.length,e=0,l=a.c,p=l.length,h=0,d=a.e,g=d.length,a=0;d[g]=s;var r,n;for(n=r=0;n<g;)d[n]!==d[n+2]?(d[r++]=d[n++],d[r++]=d[n++]):n+=2;g=r;for(n=r=0;n<g;){for(var z=d[n],f=d[n+1],b=n+2;b+2<=g&&d[b+1]===f;)b+=2;d[r++]=z;d[r++]=f;n=b}for(d.length=r;h<p;){var o=l[h+2]||s,c=d[a+2]||s,b=Math.min(o,c),i=l[h+1],j;if(i.nodeType!==1&&(j=t.substring(e,b))){k&&(j=j.replace(m,"\r"));i.nodeValue=
|
||||
j;var u=i.ownerDocument,v=u.createElement("SPAN");v.className=d[a+1];var x=i.parentNode;x.replaceChild(v,i);v.appendChild(i);e<o&&(l[h+1]=i=u.createTextNode(t.substring(b,o)),x.insertBefore(i,v.nextSibling))}e=b;e>=o&&(h+=2);e>=c&&(a+=2)}}catch(w){"console"in window&&console.log(w&&w.stack?w.stack:w)}}var v=["break,continue,do,else,for,if,return,while"],w=[[v,"auto,case,char,const,default,double,enum,extern,float,goto,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"],
|
||||
"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],F=[w,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,dynamic_cast,explicit,export,friend,inline,late_check,mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],G=[w,"abstract,boolean,byte,extends,final,finally,implements,import,instanceof,null,native,package,strictfp,super,synchronized,throws,transient"],
|
||||
H=[G,"as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"],w=[w,"debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"],I=[v,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"],
|
||||
J=[v,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],v=[v,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],K=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/,N=/\S/,O=u({keywords:[F,H,w,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END"+
|
||||
I,J,v],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),A={};k(O,["default-code"]);k(x([],[["pln",/^[^<?]+/],["dec",/^<!\w[^>]*(?:>|$)/],["com",/^<\!--[\S\s]*?(?:--\>|$)/],["lang-",/^<\?([\S\s]+?)(?:\?>|$)/],["lang-",/^<%([\S\s]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-",/^<xmp\b[^>]*>([\S\s]+?)<\/xmp\b[^>]*>/i],["lang-js",/^<script\b[^>]*>([\S\s]*?)(<\/script\b[^>]*>)/i],["lang-css",/^<style\b[^>]*>([\S\s]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),
|
||||
["default-markup","htm","html","mxml","xhtml","xml","xsl"]);k(x([["pln",/^\s+/,q," \t\r\n"],["atv",/^(?:"[^"]*"?|'[^']*'?)/,q,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w-.:]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^\s"'>]*(?:[^\s"'/>]|\/(?=\s)))/],["pun",/^[/<->]+/],["lang-js",/^on\w+\s*=\s*"([^"]+)"/i],["lang-js",/^on\w+\s*=\s*'([^']+)'/i],["lang-js",/^on\w+\s*=\s*([^\s"'>]+)/i],["lang-css",/^style\s*=\s*"([^"]+)"/i],["lang-css",/^style\s*=\s*'([^']+)'/i],["lang-css",
|
||||
/^style\s*=\s*([^\s"'>]+)/i]]),["in.tag"]);k(x([],[["atv",/^[\S\s]+/]]),["uq.val"]);k(u({keywords:F,hashComments:!0,cStyleComments:!0,types:K}),["c","cc","cpp","cxx","cyc","m"]);k(u({keywords:"null,true,false"}),["json"]);k(u({keywords:H,hashComments:!0,cStyleComments:!0,verbatimStrings:!0,types:K}),["cs"]);k(u({keywords:G,cStyleComments:!0}),["java"]);k(u({keywords:v,hashComments:!0,multiLineStrings:!0}),["bsh","csh","sh"]);k(u({keywords:I,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}),
|
||||
["cv","py"]);k(u({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["perl","pl","pm"]);k(u({keywords:J,hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb"]);k(u({keywords:w,cStyleComments:!0,regexLiterals:!0}),["js"]);k(u({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,true,try,unless,until,when,while,yes",
|
||||
hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,regexLiterals:!0}),["coffee"]);k(x([],[["str",/^[\S\s]+/]]),["regex"]);window.prettyPrintOne=function(a,m,e){var h=document.createElement("PRE");h.innerHTML=a;e&&D(h,e);E({g:m,i:e,h:h});return h.innerHTML};window.prettyPrint=function(a){function m(){for(var e=window.PR_SHOULD_USE_CONTINUATION?l.now()+250:Infinity;p<h.length&&l.now()<e;p++){var n=h[p],k=n.className;if(k.indexOf("prettyprint")>=0){var k=k.match(g),f,b;if(b=
|
||||
!k){b=n;for(var o=void 0,c=b.firstChild;c;c=c.nextSibling)var i=c.nodeType,o=i===1?o?b:c:i===3?N.test(c.nodeValue)?b:o:o;b=(f=o===b?void 0:o)&&"CODE"===f.tagName}b&&(k=f.className.match(g));k&&(k=k[1]);b=!1;for(o=n.parentNode;o;o=o.parentNode)if((o.tagName==="pre"||o.tagName==="code"||o.tagName==="xmp")&&o.className&&o.className.indexOf("prettyprint")>=0){b=!0;break}b||((b=(b=n.className.match(/\blinenums\b(?::(\d+))?/))?b[1]&&b[1].length?+b[1]:!0:!1)&&D(n,b),d={g:k,h:n,i:b},E(d))}}p<h.length?setTimeout(m,
|
||||
250):a&&a()}for(var e=[document.getElementsByTagName("pre"),document.getElementsByTagName("code"),document.getElementsByTagName("xmp")],h=[],k=0;k<e.length;++k)for(var t=0,s=e[k].length;t<s;++t)h.push(e[k][t]);var e=q,l=Date;l.now||(l={now:function(){return+new Date}});var p=0,d,g=/\blang(?:uage)?-([\w.]+)(?!\S)/;m()};window.PR={createSimpleLexer:x,registerLangHandler:k,sourceDecorator:u,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:"com",PR_DECLARATION:"dec",PR_KEYWORD:"kwd",PR_LITERAL:"lit",
|
||||
PR_NOCODE:"nocode",PR_PLAIN:"pln",PR_PUNCTUATION:"pun",PR_SOURCE:"src",PR_STRING:"str",PR_TAG:"tag",PR_TYPE:"typ"}})();
|
||||
Loading…
Reference in New Issue