templates/js/site.js
function launchPlayground(){
    $('.playground-item').playground();

    // Eyedropper Helper Functions
    $('.cp_eyedropper').on('click', function() {
      if ($(this).next('.cp_grid').hasClass('visuallyhidden')) {
        $(".cp_grid").addClass('visuallyhidden');
        $(this).next(".cp_grid").removeClass('visuallyhidden');
      } else {
        $(this).next(".cp_grid").addClass('visuallyhidden');
      }
    })
    // Hides eyedropper if you click outside eyedropper
    $(document).on('click', function(event) {
      if (!$(event.target).closest('.cp_eyedropper').length && !$(event.target).hasClass('playground-list_item')) {
        $(".cp_grid").addClass('visuallyhidden');
      }
    });

    // Playground Event Handler
    $('body').on('playgroundUpdated', '.playground-item', function(){
      var $input = $(this),
          base = $input.data('playground'),
          $playground = $input.closest('.playground'),
          $codeEl, targetHtmlStr;

      if ( !$playground.length ) $playground = $input.closest('article');
      $codeEl = $playground.find('.exampleWithCode code');

      if ( $playground.find('.copyable').length ) {
        targetHtmlStr = $playground.find('.copyable')[0].outerHTML;
      } else if ( $playground.find('.copyable-inner').length ) {
        targetHtmlStr = $playground.find('.copyable-inner').html();
      } else {
        targetHtmlStr = base.$targetEl[0].outerHTML;
      }

      $codeEl.html(escapeHtml(targetHtmlStr));
      Prism.highlightElement($codeEl[0]);

    });
    // Sets the code section on page load.
    $('.playground-item').trigger('input');
  }
function launchPlayground(){
    $('.playground-item').playground();

    // Eyedropper Helper Functions
    $('.cp_eyedropper').on('click', function() {
      if ($(this).next('.cp_grid').hasClass('visuallyhidden')) {
        $(".cp_grid").addClass('visuallyhidden');
        $(this).next(".cp_grid").removeClass('visuallyhidden');
      } else {
        $(this).next(".cp_grid").addClass('visuallyhidden');
      }
    })
    // Hides eyedropper if you click outside eyedropper
    $(document).on('click', function(event) {
      if (!$(event.target).closest('.cp_eyedropper').length && !$(event.target).hasClass('playground-list_item')) {
        $(".cp_grid").addClass('visuallyhidden');
      }
    });

    // Playground Event Handler
    $('body').on('playgroundUpdated', '.playground-item', function(){
      var $input = $(this),
          base = $input.data('playground'),
          $playground = $input.closest('.playground'),
          $codeEl, targetHtmlStr;

      if ( !$playground.length ) $playground = $input.closest('article');
      $codeEl = $playground.find('.exampleWithCode code');

      if ( $playground.find('.copyable').length ) {
        targetHtmlStr = $playground.find('.copyable')[0].outerHTML;
      } else if ( $playground.find('.copyable-inner').length ) {
        targetHtmlStr = $playground.find('.copyable-inner').html();
      } else {
        targetHtmlStr = base.$targetEl[0].outerHTML;
      }

      $codeEl.html(escapeHtml(targetHtmlStr));
      Prism.highlightElement($codeEl[0]);

    });
    // Sets the code section on page load.
    $('.playground-item').trigger('input');
  }
function launchPlayground ( ) { $ ( '.playground-item' ) . playground ( ) ; // Eyedropper Helper Functions $ ( '.cp_eyedropper' ) . on ( 'click' , function ( ) { if ( $ ( this ) . next ( '.cp_grid' ) . hasClass ( 'visuallyhidden' ) ) { $ ( ".cp_grid" ) . addClass ( 'visuallyhidden' ) ; $ ( this ) . next ( ".cp_grid" ) . removeClass ( 'visuallyhidden' ) ; } else { $ ( this ) . next ( ".cp_grid" ) . addClass ( 'visuallyhidden' ) ; } } ) // Hides eyedropper if you click outside eyedropper $ ( document ) . on ( 'click' , function ( event ) { if ( ! $ ( event . target ) . closest ( '.cp_eyedropper' ) . length && ! $ ( event . target ) . hasClass ( 'playground-list_item' ) ) { $ ( ".cp_grid" ) . addClass ( 'visuallyhidden' ) ; } } ) ; // Playground Event Handler $ ( 'body' ) . on ( 'playgroundUpdated' , '.playground-item' , function ( ) { var $input = $ ( this ) , base = $input . data ( 'playground' ) , $playground = $input . closest ( '.playground' ) , $codeEl , targetHtmlStr ; if ( ! $playground . length ) $playground = $input . closest ( 'article' ) ; $codeEl = $playground . find ( '.exampleWithCode code' ) ; if ( $playground . find ( '.copyable' ) . length ) { targetHtmlStr = $playground . find ( '.copyable' ) [ 0 ] . outerHTML ; } else if ( $playground . find ( '.copyable-inner' ) . length ) { targetHtmlStr = $playground . find ( '.copyable-inner' ) . html ( ) ; } else { targetHtmlStr = base . $targetEl [ 0 ] . outerHTML ; } $codeEl . html ( escapeHtml ( targetHtmlStr ) ) ; Prism . highlightElement ( $codeEl [ 0 ] ) ; } ) ; // Sets the code section on page load. $ ( '.playground-item' ) . trigger ( 'input' ) ; }
Sets up all playground elements and makes the code copy function for dynamic elements
Sets up all playground elements and makes the code copy function for dynamic elements