vaughany · August 29, 2015 14:07
diff --git a/isotope b/isotope
 <?php

 $colours = array(
  'red'     => 'd00',
  'green'   => '0d0',
  'blue'    => '00d',
  'cyan'    => '0dd',
  'magenta' => 'd0d',
  'yellow'  => 'dd0',
  'orange'  => 'd80',
  'jade'    => '0f7',
 );

 /*$colours = array(
  'ferrari'   => 'f00',
  'pillarbox' => 'c00',
  'pale'      => 'c33',
  'harlot'    => 'f04',
  'light'     => 'f77',
  'ron'       => 'b20',
 );*/

 $colours = array(
  'b1' => '00f',
  'b2' => '20f',
  'b3' => '02f',
  'b4' => '22f',
  'b5' => '00b',
  'b6' => '20b',
  'b7' => '02b',
  'b8' => '22b',
 );

 /*$colours = array(
  'red'     => 'fbb',
  'green'   => 'bfb',
  'blue'    => 'bbf',
  'yellow'  => 'ffb',
 );*/

 // So we can choose a random colour name nicely, later.
 $colournames = array();
 foreach ( $colours as $name => $hex ) {
  $colournames[] = $name;
 }

 $numbers = array( 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten' );

 $sizes = array(
  //'small'   => 50,
  'medium'  => 100,
  'large'   => 200,
 );

 // So we can choose a random size name nicely, later.
 $sizenames = array();
 foreach ( $sizes as $name => $pix ) {
  $sizenames[] = $name;
 }

 $boxes = 100;

 ?><html>
 <head>
  <title>Isotope TWO</title>
  <style>
  #container { width: 1200px; border: 1px solid #bbb; padding-top: 5px; padding-left: 5px; }
  .item { font-size: 2.5em; overflow: hidden; text-align: center; }
 <?php
 foreach ($colours as $name => $hex) {
  echo '  .item.' . $name . ' { background-color: #' . $hex . '; }'."\n";
 }

 foreach ($sizes as $name => $pix) {
  echo '  .item.' . $name . ' { width: ' . ( $pix - 5 ) . 'px; height: ' . ( $pix - 5 ) . 'px; margin-right: 5px; margin-bottom: 5px; }'."\n";
 }
 ?>
  </style>
 </head>

 <body>

  <h1>Isotope filtering</h1>
  <p>Example taken from <a href="http://codepen.io/desandro/pen/Ehgij">here</a>.</p>

  <!-- buttons -->

  <div id="filters">
    <button data-filter="*">all</button>
 <?php
 // Colour buttons.
 //foreach ( $colours as $name => $hex ) {
 //  echo '    <button style="color: #fff; background-color: #' . $hex . '" data-filter=".' . $name . '">' . $name . '</button>'."\n";
 //}

 // Number buttons.
 foreach ( $numbers as $number ) {
  echo '    <button data-filter=".' . $number . '">' . $number . '</button>'."\n";
 }
 ?>
  </div>

  <!-- elements -->

  <div id="container">
 <?php
 for ( $j = 1; $j <= $boxes; $j++ ) {
  $colour_tmp = $colournames[ rand( 0, count( $colournames ) - 1 ) ];
  $number_tmp = $numbers[ rand( 0, count( $numbers ) - 1 ) ];
  $size_tmp   = $sizenames[ rand( 0, count( $sizenames ) - 1 ) ];

  echo '    <div class="item ' . $colour_tmp . ' ' . $number_tmp . ' ' . $size_tmp . '">' . $number_tmp . '</div>'."\n";
 }
 ?>
  </div>

  <!-- footer -->

  <script src="jquery.min.js" type="text/javascript"></script>
  <script src="isotope.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  $( function() {
    // init Isotope
    var $container = $('#container').isotope({
      itemSelector: '.item',
      //layoutMode: 'fitRows',
      masonry: {
        columnWidth: 50,
      },
    });

    // filter functions
    var filterFns = {
      // show if number is greater than 50
      numberGreaterThan50: function() {
        var number = $(this).find('.number').text();
        return parseInt( number, 10 ) > 50;
      },
      // show if name ends with -ium
      ium: function() {
        var name = $(this).find('.name').text();
        return name.match( /ium$/ );
      }
    };

    // bind filter button click
    $('#filters').on( 'click', 'button', function() {
      var filterValue = $( this ).attr('data-filter');
      // use filterFn if matches value
      filterValue = filterFns[ filterValue ] || filterValue;
      $container.isotope({ filter: filterValue });
    });
    
  });

  </script>

 </body>
 </html>
	<?php

	$colours = array(
	'red' => 'd00',
	'green' => '0d0',
	'blue' => '00d',
	'cyan' => '0dd',
	'magenta' => 'd0d',
	'yellow' => 'dd0',
	'orange' => 'd80',
	'jade' => '0f7',
	);

	/*$colours = array(
	'ferrari' => 'f00',
	'pillarbox' => 'c00',
	'pale' => 'c33',
	'harlot' => 'f04',
	'light' => 'f77',
	'ron' => 'b20',
	);*/

	$colours = array(
	'b1' => '00f',
	'b2' => '20f',
	'b3' => '02f',
	'b4' => '22f',
	'b5' => '00b',
	'b6' => '20b',
	'b7' => '02b',
	'b8' => '22b',
	);

	/*$colours = array(
	'red' => 'fbb',
	'green' => 'bfb',
	'blue' => 'bbf',
	'yellow' => 'ffb',
	);*/

	// So we can choose a random colour name nicely, later.
	$colournames = array();
	foreach ( $colours as $name => $hex ) {
	$colournames[] = $name;
	}

	$numbers = array( 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten' );

	$sizes = array(
	//'small' => 50,
	'medium' => 100,
	'large' => 200,
	);

	// So we can choose a random size name nicely, later.
	$sizenames = array();
	foreach ( $sizes as $name => $pix ) {
	$sizenames[] = $name;
	}

	$boxes = 100;

	?><html>
	<head>
	<title>Isotope TWO</title>
	<style>
	#container { width: 1200px; border: 1px solid #bbb; padding-top: 5px; padding-left: 5px; }
	.item { font-size: 2.5em; overflow: hidden; text-align: center; }
	<?php
	foreach ($colours as $name => $hex) {
	echo ' .item.' . $name . ' { background-color: #' . $hex . '; }'."\n";
	}

	foreach ($sizes as $name => $pix) {
	echo ' .item.' . $name . ' { width: ' . ( $pix - 5 ) . 'px; height: ' . ( $pix - 5 ) . 'px; margin-right: 5px; margin-bottom: 5px; }'."\n";
	}
	?>
	</style>
	</head>

	<body>

	<h1>Isotope filtering</h1>
	<p>Example taken from <a href="http://codepen.io/desandro/pen/Ehgij">here</a>.</p>

	<!-- buttons -->

	<div id="filters">
	<button data-filter="*">all</button>
	<?php
	// Colour buttons.
	//foreach ( $colours as $name => $hex ) {
	// echo ' <button style="color: #fff; background-color: #' . $hex . '" data-filter=".' . $name . '">' . $name . '</button>'."\n";
	//}

	// Number buttons.
	foreach ( $numbers as $number ) {
	echo ' <button data-filter=".' . $number . '">' . $number . '</button>'."\n";
	}
	?>
	</div>

	<!-- elements -->

	<div id="container">
	<?php
	for ( $j = 1; $j <= $boxes; $j++ ) {
	$colour_tmp = $colournames[ rand( 0, count( $colournames ) - 1 ) ];
	$number_tmp = $numbers[ rand( 0, count( $numbers ) - 1 ) ];
	$size_tmp = $sizenames[ rand( 0, count( $sizenames ) - 1 ) ];

	echo ' <div class="item ' . $colour_tmp . ' ' . $number_tmp . ' ' . $size_tmp . '">' . $number_tmp . '</div>'."\n";
	}
	?>
	</div>

	<!-- footer -->

	<script src="jquery.min.js" type="text/javascript"></script>
	<script src="isotope.min.js" type="text/javascript"></script>
	<script type="text/javascript">
	$( function() {
	// init Isotope
	var $container = $('#container').isotope({
	itemSelector: '.item',
	//layoutMode: 'fitRows',
	masonry: {
	columnWidth: 50,
	},
	});

	// filter functions
	var filterFns = {
	// show if number is greater than 50
	numberGreaterThan50: function() {
	var number = $(this).find('.number').text();
	return parseInt( number, 10 ) > 50;
	},
	// show if name ends with -ium
	ium: function() {
	var name = $(this).find('.name').text();
	return name.match( /ium$/ );
	}
	};

	// bind filter button click
	$('#filters').on( 'click', 'button', function() {
	var filterValue = $( this ).attr('data-filter');
	// use filterFn if matches value
	filterValue = filterFns[ filterValue ] \|\| filterValue;
	$container.isotope({ filter: filterValue });
	});

	});

	</script>

	</body>
	</html>