Last active
December 12, 2015 04:29
-
-
Save gyrus/4714922 to your computer and use it in GitHub Desktop.
A sophisticated carousel system for use with the Pilau Starter theme (https://github.com/pilau/starter). Also dependent on the Developer's Custom Fields plugin (https://github.com/gyrus/WordPress-Developers-Custom-Fields). Successfully tested, but there may be some glitches to iron out in integrating - it was developed for one project and never …
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * Carousel JavaScript | |
| */ | |
| /* Trigger when DOM has loaded */ | |
| jQuery( document ).ready( function( $ ) { | |
| // Initialize | |
| pilau_carousels.wrapper = $( '#carousels' ); | |
| if ( pilau_carousels.wrapper.length ) | |
| pilau_carousels.init(); | |
| }); | |
| /** | |
| * Carousels object to handle carousel stuff | |
| * | |
| * @type {Object} | |
| */ | |
| var pilau_carousels = { | |
| /** | |
| * The wrapper for the carousel elements | |
| * | |
| * @type {?Object} | |
| */ | |
| wrapper: null, | |
| /** | |
| * The window in which the actual carousels are placed | |
| * | |
| * @type {?Object} | |
| */ | |
| window: null, | |
| /** | |
| * IDs for available carousels | |
| * | |
| * @type {?string} | |
| */ | |
| carousels: null, | |
| /** | |
| * The nav list | |
| * | |
| * @type {?Object} | |
| */ | |
| nav: null, | |
| /** | |
| * The panel orientation indicator | |
| * | |
| * @type {?Object} | |
| */ | |
| orientation: null, | |
| /** | |
| * The current width of the side covers | |
| * | |
| * @type {?number} | |
| */ | |
| sides_width: null, | |
| /** | |
| * The currently active carousel | |
| * | |
| * @type {?Object} | |
| */ | |
| active: null, | |
| /** | |
| * The number of panels in the currently active carousel | |
| * | |
| * @type {?number} | |
| */ | |
| active_panels: null, | |
| /** | |
| * The width of a panel in the currently active carousel | |
| * | |
| * @type {?number} | |
| */ | |
| panel_width: null, | |
| /** | |
| * The width of gutters between panel blocks | |
| * | |
| * @type {number} | |
| */ | |
| block_gutter: 14, | |
| /** | |
| * Is the active carousel in the process of scrolling? | |
| * | |
| * @type {boolean} | |
| */ | |
| scrolling: false, | |
| /** | |
| * Initialization | |
| * | |
| * Assumes that pilau_carousels.wrapper has already been set to jQuery object | |
| * | |
| * @return void | |
| */ | |
| init: function() { | |
| var i; | |
| // Set window | |
| this.window = jQuery( '#carousels-window' ); | |
| // Place controls | |
| this.wrapper.prepend( '<div id="carousels-controls"><div id="carousels-nav"><p>focus on:</p><ul title="Switch carousel"></ul></div><ul id="carousels-orientation"></ul></div>' ); | |
| this.nav = jQuery( '#carousels-nav ul' ); | |
| this.orientation = jQuery( '#carousels-orientation' ); | |
| // Get list of carousels available | |
| this.carousels = this.wrapper.attr( 'data-carousels' ).split( ' ' ); | |
| // Add them to the nav | |
| for ( i = 0; i < this.carousels.length; i++ ) { | |
| this.nav.append( '<li class="' + this.carousels[ i ] + '"><a href="/?carousel=' + this.carousels[ i ] + '">' + this.carousels[ i ] + '</a></li>' ); | |
| } | |
| // Carousel switching | |
| this.nav.on( 'click', 'a', function() { | |
| var li = jQuery( this ).parents( 'li' ), c; | |
| // Don't respond at all to the active nav link | |
| if ( ! li.hasClass( 'active' ) ) { | |
| c = li.attr( 'class' ); | |
| pilau_carousels.load( c ); | |
| // Set cookie to store carousel | |
| jQuery.cookie( 'pilau_home_carousel', c, { expires: 365 * 10, path: '/' } ); | |
| } | |
| return false; | |
| }); | |
| // Place sides and scroll arrows | |
| this.wrapper.append( '<div id="carousels-side-left" class="side"></div>' ); | |
| this.wrapper.append( '<div id="carousels-side-right" class="side"></div>' ); | |
| this.wrapper.append( '<div id="carousels-scroll-left" class="scroll"><div class="arrow"></div></div>' ); | |
| this.wrapper.append( '<div id="carousels-scroll-right" class="scroll"><div class="arrow"></div></div>' ); | |
| jQuery( '.ie7' ).find( '#carousels .side' ).css( 'background-color', '#000' ); // IE 7 needs this :-( | |
| jQuery( '.no-rgba' ).find( '#carousels .side' ).css( 'opacity', 0.5 ); | |
| // Hover states for blocks that need animation | |
| this.wrapper.on( 'hover', '.block.horizontal.hover-reveal, .block.vertical.hover-reveal, .block.square.hover-reveal', function( e ) { | |
| var b, t, h; | |
| // Store block for use in nested callbacks | |
| b = jQuery( this ); | |
| // Store text box | |
| t = jQuery( '.text', this ); | |
| // Store original height of text box | |
| if ( typeof( t.prop( 'data-original-height' ) ) == 'undefined' ) | |
| t.prop( 'data-original-height', t.height() ); | |
| // Height of full block | |
| h = b.height(); | |
| // Hack for IE 8 and below | |
| if ( jQuery( 'html' ).hasClass( 'lt-ie9' ) ) { | |
| h = h - 16; | |
| } | |
| if ( e.type == 'mouseenter' ) { | |
| // Show hidden text | |
| jQuery( '.hidden-text', this ).slideDown( 300 ); | |
| // Make text full height | |
| t.animate( { height: h + 'px' }, 400 ); | |
| } else if ( e.type == 'mouseleave' ) { | |
| // Hide hidden text | |
| jQuery( '.hidden-text', this ).slideUp( 600 ); | |
| // Shrink text box back | |
| t.animate( { height: t.prop( 'data-original-height' ) }, 700 ); | |
| } | |
| }); | |
| // Hover states for blocks handled by CSS | |
| this.wrapper.hoverClass( '.block.square.hover-highlight' ); | |
| // Get the scrolling ready | |
| this.wrapper.on( 'hover', '.scroll', function( e ) { | |
| // Suggestion of movement on hover | |
| var o; | |
| if ( e.type == 'mouseenter' ) { | |
| o = pilau_carousels.arrow_right( this ) ? '-=' : '+='; | |
| pilau_carousels.active.animate( { left: o + pilau_carousels.block_gutter }, 400 ); | |
| } else { | |
| o = pilau_carousels.arrow_right( this ) ? '+=' : '-='; | |
| pilau_carousels.active.animate( { left: o + pilau_carousels.block_gutter }, 600 ); | |
| } | |
| }).on( 'click', '.scroll', function() { | |
| // Click to scroll | |
| pilau_carousels.scroll( pilau_carousels.arrow_right( this ) ? 'right' : 'left' ); | |
| }); | |
| // Initialize the active carousel | |
| this.init_active( this.wrapper.find( '.carousel:first' ) ); | |
| // Refresh the view | |
| this.refresh(); | |
| }, | |
| /** | |
| * Initialize the active carousel | |
| * | |
| * @param {Object} c The carousel to be active | |
| * @param {boolean} fade Do a cross-fade? Default - false | |
| * @return void | |
| */ | |
| init_active: function( c, fade ) { | |
| var i, old, cp, cpn; | |
| if ( typeof fade == 'undefined' ) | |
| fade = false; | |
| // Store the old active carousel, set the new one | |
| old = this.active; | |
| this.active = c; | |
| // Set the current panel to the first if not already set | |
| cp = c.find( '.panel.current' ) | |
| if ( ! cp.length ) { | |
| c.find( '.panel' ).removeClass( 'current' ); | |
| c.find( '.panel-0' ).addClass( 'current' ); | |
| cpn = 0; | |
| } else { | |
| // Get the panel number that's current | |
| cpn = this.panel_number( cp ); | |
| } | |
| // Get all panels | |
| var panels = c.children( '.panel' ); | |
| // Number of panels | |
| this.active_panels = panels.length; | |
| // Set width of one panel | |
| this.panel_width = jQuery( panels[0] ).outerWidth( true ); // including margin | |
| // Set the width of the whole carousel | |
| // Carousels will start with last panel to the left, so shift left by one panel | |
| // to put first panel into window view | |
| c.css({ | |
| 'width': ( this.panel_width * this.active_panels ) + 'px', | |
| 'left': '-' + ( this.panel_width - 14 ) + 'px' | |
| }); | |
| // Update the nav | |
| this.nav.find( 'li' ).removeClass( 'active' ); | |
| this.nav.find( 'li.' + pilau_get_string_part( this.active.attr('id') ) ).addClass( 'active' ); | |
| // Add dots to the panels orientation indicator | |
| this.orientation.html(''); | |
| for ( i = 0; i < this.active_panels; i++ ) { | |
| this.orientation.append( '<li>' + i + '</li>' ); | |
| } | |
| this.orientation.find( 'li:eq(' + cpn + ')' ).addClass( 'current' ); | |
| // Cross-fade? | |
| if ( fade ) { | |
| // Make sure the new one is visible - it will be behind | |
| c.show(); | |
| // Fade out old one | |
| old.fadeOut( 600, function() { | |
| // Set z-indices | |
| jQuery( this ).css( 'z-index', 0 ); | |
| c.css( 'z-index', 100 ); | |
| }) | |
| } | |
| }, | |
| /** | |
| * Load a carousel | |
| * | |
| * @param {string} id The ID of the carousel to load | |
| * @return void | |
| */ | |
| load: function( id ) { | |
| var c = this.wrapper.find( '#carousel-' + id ); | |
| // Is the carousel already in the DOM? | |
| if ( ! c.length ) { | |
| // Place preloader | |
| pilau_preloader_place( '#carousels-window' ); | |
| // Get from the server | |
| jQuery.get( pilau_global.ajaxurl, { | |
| action: 'pilau_carousel', | |
| carousel: id | |
| }, function( r ) { | |
| //console.log( r ); | |
| // Place the carousel | |
| c = jQuery( r ).css( 'z-index', 0 ); | |
| pilau_carousels.window.append( c ); | |
| // Remove preloader | |
| pilau_preloader_remove( '#carousels-window' ); | |
| // Make the new carousel active, with cross-fade | |
| pilau_carousels.init_active( c, true ); | |
| }).error( function( e ) { | |
| //console.log( 'error' ); console.log( e ); | |
| pilau_ajax_error( e ); | |
| }); | |
| } else { | |
| // Make the new carousel active, with cross-fade | |
| this.init_active( c, true ); | |
| } | |
| }, | |
| /** | |
| * Refresh the carousel display | |
| * | |
| * @return void | |
| */ | |
| refresh: function() { | |
| // Set sides width to the viewport width, minus the carousel window width, divided by two | |
| this.sides_width = ( jQuery( window ).width() - jQuery( '#carousels-window' ).width() ) / 2; | |
| this.wrapper.find( '.side' ).css({ 'width': this.sides_width + 'px' }); | |
| // Position the scroll arrows | |
| this.wrapper.find( '#carousels-scroll-left' ).css({ 'left': ( this.sides_width - 30 ) + 'px' }); | |
| this.wrapper.find( '#carousels-scroll-right' ).css({ 'right': ( this.sides_width - 30 ) + 'px' }); | |
| }, | |
| /** | |
| * Scroll a carousel | |
| * | |
| * @param {string} dir The direction to scroll in | |
| * @return void | |
| */ | |
| scroll: function( dir ) { | |
| var o = ( dir == 'right' ) ? '-=' : '+=', | |
| pw = pilau_carousels.panel_width + 'px', | |
| cc = this.active, | |
| cp = cc.find( '.panel.current' ), | |
| cpi; | |
| // Only do it if it's not already scrolling | |
| if ( ! this.scrolling ) { | |
| this.scrolling = true; | |
| cc.find( '.panel' ).removeClass( 'current' ); | |
| // First, shift end panel, depending on direction | |
| if ( dir == 'right' ) { | |
| // Take from left and shift to right | |
| cc.find( '.panel:first-child' ).appendTo( cc ); | |
| // Shift carousel back | |
| cc.css({ 'left': '+=' + pw }); | |
| // Update current panel | |
| cp.next().addClass( 'current' ); | |
| } else { | |
| // Take from right and shift to left | |
| cc.find( '.panel:last-child' ).prependTo( cc ); | |
| // Shift carousel back | |
| cc.css({ 'left': '-=' + pw }); | |
| // Update current panel | |
| cp.prev().addClass( 'current' ); | |
| } | |
| // Stop any animation, then scroll | |
| cc.stop().animate( { 'left': o + pw }, 800, function() { | |
| // Adjust orientation indicator to match current panel | |
| pilau_carousels.orientation.find( 'li' ).removeClass( 'current' ); | |
| pilau_carousels.orientation.find( 'li:eq(' + pilau_carousels.panel_number( cc.find( '.panel.current' ) ) + ')' ).addClass( 'current' ); | |
| // Indicate that scrolling has finished | |
| pilau_carousels.scrolling = false; | |
| }); | |
| } | |
| }, | |
| /** | |
| * Detect which direction the given scroll arrow is | |
| * | |
| * @param {HtmlElement} arrow The arrow | |
| * @return {boolean} | |
| */ | |
| arrow_right: function( arrow ) { | |
| // True for right, false for left | |
| return ( jQuery( arrow ).attr( 'id' ) == 'carousels-scroll-right' ); | |
| }, | |
| /** | |
| * Get the panel number from a panel's classes | |
| * | |
| * @param {Object} panel | |
| * @return {number} | |
| */ | |
| panel_number: function( panel ) { | |
| var pn = panel.attr( 'class' ).match( /panel\-([0-9]+)/ ); | |
| return pn[1]; | |
| } | |
| }; | |
| /* Trigger when window resizes */ | |
| jQuery( window ).resize( function( $ ) { | |
| // Refresh display - need to test first because IE fires resize on document load, it seems | |
| if ( typeof pilau_carousels.wrapper == 'object' ) | |
| pilau_carousels.refresh(); | |
| }); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Import variables first | |
| @import 'vars.less'; | |
| /* | |
| Styles for the home page carousel to be used both on the front-end and in | |
| the admin management screen | |
| */ | |
| /* | |
| On the front-end, #carousels is the wrapper for the entire carousel; in admin | |
| it's the form. | |
| On the front-end, each of the (possibly 3) loaded carousels is wrapped by | |
| .carousel, whereas in admin the separate carousels are on different pages. | |
| */ | |
| #carousels { | |
| text-align: left; | |
| overflow: hidden; | |
| padding: 20px 0; | |
| .panel { | |
| position: relative; | |
| width: @carousel-width; | |
| height: @carousel-height; | |
| background-color: @color-background-grey-dark; | |
| // Default block stuff | |
| .block { | |
| position: absolute; | |
| width: @carousel-col-narrow; | |
| height: @carousel-row; | |
| overflow: hidden; | |
| background-color: lighten( @color-background-grey-dark, 5% ); | |
| a { | |
| display: block; | |
| color: @color-text-light; | |
| } | |
| .text { | |
| position: absolute; | |
| z-index: 50; | |
| padding: @carousel-text-padding-top @carousel-text-padding-sides @carousel-text-padding-bottom; | |
| max-height: @carousel-row - ( @carousel-text-padding-top + @carousel-text-padding-bottom ); | |
| background-color: #fff; | |
| p { | |
| margin-bottom: .3em; | |
| } | |
| p.content-type { | |
| color: @color-pink; | |
| text-transform: uppercase; | |
| font-weight: bold; | |
| margin-bottom: 0; | |
| } | |
| .joined-headings { | |
| p.content-type { | |
| margin-bottom: .2em; | |
| } | |
| } | |
| p.content-type.unjoined, .joined-headings { | |
| padding: 0 0 6px; | |
| margin: 0 0 10px !important; | |
| border-bottom: 1px solid @color-line-light; | |
| font-size: @heading-size-tiny; | |
| h2 { | |
| margin: 0; | |
| .FontRegular( 1.1em ); | |
| letter-spacing: 0; | |
| } | |
| } | |
| h2 { | |
| margin: 0 0 10px; | |
| .FontBold( @heading-size-carousel, 1.2em ); | |
| letter-spacing: -1px; | |
| } | |
| .hidden-text { | |
| padding-bottom: 5px; | |
| ul { | |
| padding-left: 1.2em; | |
| list-style: square; | |
| a:hover, a:focus { | |
| text-decoration: none; | |
| color: @color-text-dark; | |
| } | |
| } | |
| } | |
| } | |
| .img { | |
| position: absolute; | |
| top: 0; | |
| z-index: 40; | |
| line-height: 1; | |
| img { | |
| display: block; | |
| } | |
| } | |
| // General block stuff | |
| &.hover-highlight { | |
| a { | |
| color: @color-text-light; | |
| &:hover, &:focus { | |
| color: #000; | |
| } | |
| &:hover h2, &:focus h2 { | |
| color: @color-text-light; | |
| } | |
| } | |
| .img { | |
| background-color: #fff; // To achieve hover effect by making image in front semi-transparent | |
| } | |
| &.hover { | |
| .img img { | |
| opacity: .8; | |
| } | |
| } | |
| } | |
| &.horizontal { | |
| width: @carousel-col-narrow + @carousel-gutter + @carousel-col-narrow; | |
| .img { | |
| height: @carousel-row; | |
| } | |
| } | |
| &.square { | |
| .text { | |
| width: @carousel-col-narrow - ( @carousel-text-padding-sides * 2 ); | |
| height: @carousel-row - @carousel-text-padding-top - @carousel-text-padding-bottom; | |
| } | |
| &.hover-reveal { | |
| .img { | |
| height: @carousel-square-block-image-height; | |
| } | |
| .text { | |
| width: @carousel-col-narrow - ( @carousel-text-padding-sides * 2 ); | |
| } | |
| } | |
| &.image { | |
| .text { | |
| height: auto; | |
| min-height: @carousel-row - @carousel-square-block-image-height - @carousel-text-padding-top - @carousel-text-padding-bottom; | |
| } | |
| } | |
| } | |
| &.vertical { | |
| width: @carousel-col-wide; | |
| height: @carousel-height; | |
| .img { | |
| height: @carousel-row + @carousel-gutter; | |
| } | |
| .text { | |
| width: @carousel-col-wide - ( @carousel-text-padding-sides * 2 ); | |
| min-height: @carousel-row - ( @carousel-text-padding-top + @carousel-text-padding-bottom ); | |
| max-height: ( ( @carousel-row * 2 ) + @carousel-gutter ) - ( @carousel-text-padding-top + @carousel-text-padding-bottom ); | |
| bottom: 0; | |
| ul { | |
| a { | |
| color: #fff; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| // Pink blocks | |
| &.layout-0 .block-3, &.layout-1 .block-1 { | |
| .text { | |
| background-color: @color-pink; | |
| color: #000; | |
| .content-type { | |
| color: #fff; | |
| } | |
| h2 { | |
| color: @color-text-dark; | |
| } | |
| } | |
| } | |
| // Specific layout stuff | |
| &.layout-0 { | |
| .block { | |
| &.horizontal { | |
| .text { | |
| width: @carousel-col-wide - ( @carousel-text-padding-sides * 2 ); | |
| //min-height: 114px - @carousel-text-padding-top; | |
| bottom: 0; | |
| right: 0; | |
| } | |
| } | |
| &.square { | |
| top: @carousel-row + @carousel-gutter; | |
| &.hover-highlight { | |
| a:hover, a:focus { | |
| .text { | |
| color: #000; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .block-2 { | |
| left: @carousel-col-narrow + @carousel-gutter; | |
| a { | |
| .text { | |
| bottom: 0; | |
| .hidden-text p { | |
| color: @color-text-medium-grey; | |
| } | |
| &:hover, &:focus { | |
| .hidden-text p { | |
| color: @color-text-dark; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .block-3 { | |
| left: @carousel-col-narrow + @carousel-gutter + @carousel-col-narrow + @carousel-gutter; | |
| .content-type { | |
| border-color: @color-line-pink !important; | |
| } | |
| } | |
| } | |
| &.layout-1 { | |
| .block-0 { | |
| a { | |
| .text { | |
| height: auto; | |
| .hidden-text p { | |
| color: @color-text-medium-grey; | |
| } | |
| &:hover, &:focus { | |
| .hidden-text p { | |
| color: @color-text-dark; | |
| } | |
| } | |
| } | |
| .img { | |
| top: auto; | |
| bottom: 0; | |
| } | |
| } | |
| } | |
| .block-1 { | |
| left: @carousel-col-narrow + @carousel-gutter; | |
| .joined-headings { | |
| border-color: @color-line-pink; | |
| } | |
| a { | |
| color: #000; | |
| &:hover, &:focus, &:hover h2, &:focus h2 { | |
| color: #fff !important; | |
| } | |
| } | |
| } | |
| .block-2 { | |
| top: @carousel-row + @carousel-gutter; | |
| width: @carousel-col-narrow + @carousel-gutter + @carousel-col-narrow; | |
| .text { | |
| width: @carousel-col-narrow + @carousel-gutter + @carousel-col-narrow - ( @carousel-text-padding-sides * 2 ); | |
| height: @carousel-row + ( @carousel-text-padding-top + @carousel-text-padding-bottom ); | |
| h2 { | |
| font-size: @heading-size-extra-large; | |
| } | |
| .joined-headings { | |
| p { | |
| margin-right: .8em; | |
| } | |
| p, h2 { | |
| .InlineBlock(); | |
| } | |
| } | |
| } | |
| } | |
| .block-3 { | |
| left: @carousel-col-narrow + @carousel-gutter + @carousel-col-narrow + @carousel-gutter; | |
| width: @carousel-col-wide; | |
| height: @carousel-height; | |
| .text { | |
| ul { | |
| a { | |
| color: @color-pink; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /** | |
| * Carousel panels | |
| * | |
| * Structure of carousel data stored in options: | |
| * <code> | |
| * array( | |
| * '[carousel slug]' => array( | |
| * 'title' => '[carousel title]', | |
| * 'panels' => array( | |
| * [0] => array( // a panel | |
| * 'layout' => [n], // 0, 1, 2, etc. - arbitrary number referring to different layouts | |
| * 'blocks' => array( | |
| * [0] => [n], // ID of post selected for this block | |
| * [1] => [n], | |
| * [2] => [n], | |
| * [3] => [n] | |
| * ); | |
| * ); | |
| * ); | |
| * ); | |
| * ); | |
| * </code> | |
| * | |
| */ | |
| /** | |
| * Minimum number of panels per carousel | |
| */ | |
| define( 'PILAU_CAROUSEL_MIN_PANELS', 3 ); | |
| /** | |
| * Carousel setup | |
| */ | |
| add_action( 'init', 'pilau_carousels_setup' ); | |
| function pilau_carousels_setup() { | |
| global $pilau_carousels, $pilau_carousel_layouts, $pilau_carousels_data; | |
| /* | |
| * Removed conditional for now - test for is_front_page doesn't work on init | |
| */ | |
| /* | |
| // Test if we're on a carousels page, front or admin, or relevant AJAX request | |
| if ( is_front_page() || | |
| ( is_admin() && basename( $_SERVER['SCRIPT_NAME'] ) == 'themes.php' && isset( $_GET['page'] ) && $_GET['page'] == 'pilau-carousel-panels' ) || | |
| ( defined( 'DOING_AJAX' ) && DOING_AJAX && in_array( $_REQUEST['action'], array( 'pilau_carousel_content_select', 'pilau_carousel_block' ) ) ) ) { | |
| */ | |
| // The carousels | |
| $pilau_carousels = array( | |
| 'all' => 'All', | |
| 'children' => 'Children', | |
| 'climate' => 'Climate' | |
| ); | |
| // The layouts | |
| $pilau_carousel_layouts = array(); | |
| $pilau_carousel_layouts[0] = array( | |
| 'blocks' => array( | |
| 0 => array( | |
| 'format' => 'horizontal', | |
| 'image' => true, | |
| 'hover' => 'reveal', | |
| 'joined-headings' => false, | |
| 'intro-text' => false | |
| ), | |
| 1 => array( | |
| 'format' => 'square', | |
| 'image' => false, | |
| 'hover' => 'highlight', | |
| 'joined-headings' => true, | |
| 'intro-text' => true | |
| ), | |
| 2 => array( | |
| 'format' => 'square', | |
| 'image' => true, | |
| 'hover' => 'reveal', | |
| 'joined-headings' => true, | |
| 'intro-text' => false | |
| ), | |
| 3 => array( | |
| 'format' => 'vertical', | |
| 'image' => true, | |
| 'hover' => 'reveal', | |
| 'joined-headings' => false, | |
| 'intro-text' => true | |
| ) | |
| ) | |
| ); | |
| $pilau_carousel_layouts[1] = array( | |
| 'blocks' => array( | |
| 0 => array( | |
| 'format' => 'square', | |
| 'image' => true, | |
| 'hover' => 'reveal', | |
| 'joined-headings' => true, | |
| 'intro-text' => false | |
| ), | |
| 1 => array( | |
| 'format' => 'square', | |
| 'image' => false, | |
| 'hover' => 'highlight', | |
| 'joined-headings' => true, | |
| 'intro-text' => true | |
| ), | |
| 2 => array( | |
| 'format' => 'horizontal', | |
| 'image' => false, | |
| 'hover' => 'highlight', | |
| 'joined-headings' => false, | |
| 'intro-text' => true | |
| ), | |
| 3 => array( | |
| 'format' => 'vertical', | |
| 'image' => true, | |
| 'hover' => 'reveal', | |
| 'joined-headings' => false, | |
| 'intro-text' => true | |
| ) | |
| ) | |
| ); | |
| // Get carousels data | |
| $pilau_carousels_data = get_option( 'pilau_carousels_data' ); | |
| //echo '<pre>'; print_r( $pilau_carousels_data ); echo '</pre>'; exit; | |
| // Defaults | |
| if ( ! $pilau_carousels_data ) { | |
| $pilau_carousels_data = array(); | |
| foreach ( $pilau_carousels as $slug => $title ) { | |
| $pilau_carousels_data[ $slug ] = array( | |
| 'title' => $title, | |
| 'panels' => array() | |
| ); | |
| $layout = 0; | |
| for ( $i = 0; $i < PILAU_CAROUSEL_MIN_PANELS; $i++ ) { | |
| // Add default panel, alternating between the two layouts | |
| $pilau_carousels_data[ $slug ]['panels'][ $i ] = pilau_carousel_default_panel( $i % 2 ); | |
| $layout++; | |
| if ( $layout >= count( $pilau_carousel_layouts ) ) | |
| $layout = 0; | |
| } | |
| } | |
| update_option( 'pilau_carousels_data', $pilau_carousels_data ); | |
| } | |
| // Admin-only | |
| if ( is_admin() ) { | |
| // Add thickbox | |
| add_thickbox(); | |
| } | |
| /* | |
| } | |
| */ | |
| } | |
| /** | |
| * Helper function to initialize a default panel | |
| * | |
| * @param int $layout The ID of the layout | |
| * @return array | |
| */ | |
| function pilau_carousel_default_panel( $layout = 0 ) { | |
| global $pilau_carousel_layouts; | |
| $panel = array( | |
| 'layout' => $layout, | |
| 'blocks' => array() | |
| ); | |
| // Cycle through blocks, initializing to null | |
| for ( $i = 0; $i < count( $pilau_carousel_layouts[ $layout ]['blocks'] ); $i++ ) { | |
| $panel['blocks'][ $i ] = null; | |
| } | |
| return $panel; | |
| } | |
| /** | |
| * Helper function to map block formats to image formats | |
| * | |
| * @param string $block_format | |
| * @return string | |
| */ | |
| function pilau_carousel_image_format( $block_format ) { | |
| return $block_format == 'horizontal' ? 'horizontal' : 'square'; | |
| } | |
| /** | |
| * Admin menu | |
| */ | |
| add_action( 'admin_menu', 'pilau_carousel_panels_admin_menu' ); | |
| function pilau_carousel_panels_admin_menu() { | |
| add_theme_page( __('Home page carousel'), __('Home page carousel'), 'manage_options', 'pilau-carousel-panels', 'pilau_carousel_panels_interface' ); | |
| } | |
| /** | |
| * Carousel panels admin interface | |
| */ | |
| function pilau_carousel_panels_interface() { | |
| global $pilau_carousels, $pilau_carousels_data; | |
| $carousel = pilau_current_admin_tab( $pilau_carousels ); | |
| ?> | |
| <div class="wrap"> | |
| <div id="icon-themes" class="icon32"><br></div> | |
| <h2><?php _e( 'Home page carousel management' ); ?></h2> | |
| <?php if ( isset( $_GET['updated'] ) ) { ?> | |
| <div id="message" class="updated"><p><?php _e( 'Carousel updated.' ); ?></p></div> | |
| <?php } ?> | |
| <?php pilau_admin_tabs( $pilau_carousels, admin_url( 'themes.php?page=pilau-carousel-panels' ) ); ?> | |
| <form method="post" action="<?php echo admin_url( 'themes.php?page=pilau-carousel-panels' ); ?>" id="carousels" class="clearfix warn-if-changed"> | |
| <p class="delete-heading"><?php _e( 'Delete' ); ?></p> | |
| <p><label for="add-new-panel-start"><?php _e( 'Add a new panel here' ) ?> <input type="checkbox" name="add-new-panel-start" id="add-new-panel-start" value="1" /></label></p> | |
| <?php | |
| // Output panels in this carousel | |
| foreach ( $pilau_carousels_data[ $carousel ]['panels'] as $panel_index => $panel ) { | |
| echo '<fieldset class="clearfix">'; | |
| echo '<input class="delete" type="checkbox" name="pilau-panel-delete[]" value="' . $panel_index . '" />'; | |
| echo '<div id="panel-' . $panel_index . '" class="panel layout-' . $panel["layout"] . '">'; | |
| // Blocks in this panel | |
| foreach ( $panel['blocks'] as $block_index => $block_content ) { | |
| echo '<div class="' . pilau_carousel_block_classes( $panel['layout'], $block_index, true ) . '">'; | |
| $content_url = add_query_arg( array( | |
| 'action' => 'pilau_carousel_content_select', | |
| 'width' => '640', | |
| 'height' => '800', | |
| 'layout' => $panel['layout'], | |
| 'block' => $block_index, | |
| 'panel' => $panel_index | |
| ), 'admin-ajax.php' ); | |
| echo '<div class="controls">'; | |
| echo '<a href="' . $content_url . '" class="thickbox button-secondary">' . __( 'Select content' ) . '</a>'; | |
| echo '<a href="' . admin_url( 'post.php?post=' . $block_content . '&action=edit#_slt_carousel-content-box' ) . '" class="button-secondary edit-content" target="_blank"'; | |
| if ( ! $block_content ) | |
| echo ' style="display:none"'; | |
| echo '>' . __( 'Edit content' ) . ' »</a>'; | |
| echo '<input type="hidden" name="panel-' . $panel_index . '-layout-' . $panel['layout'] . '-block-' . $block_index . '-content" value="' . $block_content . '" />'; | |
| echo '</div>'; | |
| echo '<div class="block-content">'; | |
| if ( $block_content ) | |
| echo pilau_carousel_block( $block_content, $panel["layout"], $block_index, true ); | |
| echo '</div>'; | |
| echo '</div>'; | |
| } | |
| echo '</div>'; | |
| echo '</fieldset>'; | |
| } | |
| ?> | |
| <p><label for="add-new-panel-end"><?php _e( 'Add a new panel here' ) ?> <input type="checkbox" name="add-new-panel-end" id="add-new-panel-end" value="1" /></label></p> | |
| <div class="submit"> | |
| <?php wp_nonce_field( 'pilau-carousel-panels', 'pilau_carousel_panels_nonce' ); ?> | |
| <input type="hidden" name="carousel" value="<?php echo $carousel; ?>" /> | |
| <input type="submit" value="<?php _e( 'Update carousel' ); ?>" class="button-primary" /> | |
| </div> | |
| </form> | |
| </div> | |
| <?php | |
| } | |
| /** | |
| * Determine a carousel block's classes | |
| * | |
| * @param int $layout ID of the layout | |
| * @param int $block ID of the block in the layout (see $pilau_carousel_layouts) | |
| * @param bool $admin Is the request for the admin interface? | |
| * @return string Value for HTML class attribute | |
| */ | |
| function pilau_carousel_block_classes( $layout = 0, $block = 0, $admin = false ) { | |
| global $pilau_carousel_layouts; | |
| $block_classes = array( | |
| 'block', | |
| 'block-' . $block, | |
| $pilau_carousel_layouts[ $layout ]['blocks'][ $block ]['format'], | |
| 'hover-' . $pilau_carousel_layouts[ $layout ]['blocks'][ $block ]['hover'] | |
| ); | |
| if ( $pilau_carousel_layouts[ $layout ]['blocks'][ $block ]['joined-headings'] ) | |
| $block_classes[] = 'joined-headings'; | |
| if ( $pilau_carousel_layouts[ $layout ]['blocks'][ $block ]['image'] ) | |
| $block_classes[] = 'image'; | |
| return implode( ' ', $block_classes ); | |
| } | |
| /** | |
| * Generate a carousel block | |
| * | |
| * @param int $post_id ID of the post being placed | |
| * @param int $layout ID of the layout | |
| * @param int $block ID of the block in the layout (see $pilau_carousel_layouts) | |
| * @param bool $admin Is the request for the admin interface? | |
| * @return string The generated output | |
| */ | |
| function pilau_carousel_block( $post_id = null, $layout = 0, $block = 0, $admin = false ) { | |
| global $pilau_carousel_layouts; | |
| $output = $hidden_links = ''; | |
| if ( ! is_object( $post = get_post( $post_id ) ) ) | |
| return $output; | |
| // Get details of block | |
| $block_infos = $pilau_carousel_layouts[ $layout ]['blocks'][ $block ]; | |
| if ( ! $block_infos ) | |
| return $output; | |
| // Try to get custom fields | |
| $custom_fields = array(); | |
| if ( function_exists( 'slt_cf_all_field_values' ) ) | |
| $custom_fields = slt_cf_all_field_values( 'post', $post_id ); | |
| // Should the whole block be wrapped in a link, or just the image? | |
| $link_wrap = null; | |
| $block_link_target = get_permalink( $post_id ); | |
| if ( ! $admin ) { | |
| if ( $layout == 0 && ( $block == 0 || $block == 3 ) || $layout == 1 && ( $block == 3 ) ) { | |
| // Set up hidden links now because we need to know how many there are | |
| $hidden_links_count = 0; | |
| $last_hidden_link = ''; | |
| if ( function_exists( 'slt_cf_simple_formatting' ) ) { | |
| for ( $i = 1; $i <= 5; $i++ ) { | |
| if ( isset( $custom_fields[ 'carousel-link-hidden-' . $i ] ) && $custom_fields[ 'carousel-link-hidden-' . $i ] ) { | |
| $hidden_links .= '<li>' . wptexturize( slt_cf_simple_formatting( $custom_fields[ 'carousel-link-hidden-' . $i ], 'html', false ) ) . '</li>'; | |
| $last_hidden_link = $custom_fields[ 'carousel-link-hidden-' . $i ]; | |
| $hidden_links_count++; | |
| } | |
| } | |
| } | |
| if ( $hidden_links_count == 1 ) { | |
| // If there's just one hidden link, link whole block to it | |
| $link_wrap = 'block'; | |
| $block_link_target = end( explode( '":', $last_hidden_link ) ); | |
| // Switch hidden link anchor for span to avoid nested links | |
| $hidden_links = preg_replace( '/<(\/?)a[^>]*>/i', '<\1span>', $hidden_links ); | |
| } | |
| } else { | |
| $link_wrap = 'block'; | |
| } | |
| } | |
| if ( $link_wrap == 'block' ) | |
| $output .= '<a href="' . esc_url( $block_link_target ) . '" class="block-wrapper">'; | |
| // Open text | |
| $output .= '<div class="text">'; | |
| // Heading | |
| if ( isset( $custom_fields[ 'carousel-heading' ] ) && $custom_fields[ 'carousel-heading' ] ) { | |
| $heading = $custom_fields[ 'carousel-heading' ]; | |
| } else { | |
| $heading = $post->post_title; | |
| } | |
| // Some blocks have the content type heading and the main heading together | |
| if ( $block_infos['joined-headings'] ) { | |
| $output .= '<div class="joined-headings"><p class="content-type">' . $custom_fields['carousel-content-type'] . '</p>'; | |
| if ( strtolower( $custom_fields['carousel-content-type'] ) != strtolower( $heading ) ) | |
| $output .= '<h2>' . $heading . '</h2>'; | |
| $output .= '</div>'; | |
| } else { | |
| if ( $custom_fields['carousel-content-type'] ) | |
| $output .= '<p class="content-type unjoined">' . $custom_fields['carousel-content-type'] . '</p>'; | |
| if ( ! $custom_fields['carousel-content-type'] || ( strtolower( $custom_fields['carousel-content-type'] ) != strtolower( $heading ) ) ) | |
| $output .= '<h2>' . wptexturize( $heading ) . '</h2>'; | |
| } | |
| // Any text visible before the hover state? | |
| if ( $block_infos['intro-text'] ) { | |
| if ( isset( $custom_fields[ 'carousel-text' ] ) && $custom_fields[ 'carousel-text' ] ) { | |
| $intro_text = $custom_fields[ 'carousel-text' ]; | |
| } else { | |
| $intro_text = pilau_extract( $post->post_content, 15 ); | |
| } | |
| if ( $intro_text ) { | |
| $output .= '<div class="intro-text">' . wptexturize( wpautop( wp_kses( $intro_text, array() ) ) ) . '</div>'; | |
| } | |
| } | |
| // Any text / links to be revealed by the hover? | |
| if ( $block_infos['hover'] == 'reveal' ) { | |
| $hidden_content = ''; | |
| if ( isset( $custom_fields[ 'carousel-text-hidden' ] ) && $custom_fields[ 'carousel-text-hidden' ] ) { | |
| $hidden_text = wptexturize( slt_cf_simple_formatting( $custom_fields[ 'carousel-text-hidden' ] ) ); | |
| // First para should be large if there's more than one | |
| if ( substr_count( $hidden_text, '<p>' ) > 1 ) | |
| $hidden_text = preg_replace( '/<p>/', '<p class="large">', $hidden_text, 1 ); | |
| $hidden_content .= $hidden_text; | |
| } | |
| // Links wrapper? | |
| if ( $hidden_links ) | |
| $hidden_content .= '<ul>' . $hidden_links . '</ul>'; | |
| // General hidden wrapper? | |
| if ( $hidden_content ) | |
| $output .= '<div class="hidden-text">' . $hidden_content . '</div>'; | |
| } | |
| // End text | |
| $output .= '</div>'; | |
| // Try to get the right image if an image is needed | |
| $image_url = null; | |
| if ( $block_infos['image'] ) { | |
| $image_size = $block_infos['format'] == 'vertical' ? 'medium' : 'carousel-' . $block_infos['format']; | |
| $image_field = 'carousel-image-' . ( $block_infos['format'] == 'horizontal' ? 'horizontal' : 'square' ); | |
| if ( isset( $custom_fields[ $image_field ] ) && $custom_fields[ $image_field ] ) { | |
| $image_url = pilau_get_image_url( $custom_fields[ $image_field ], $image_size ); | |
| } else { | |
| // Try featured image, or first one available | |
| if ( has_post_thumbnail( $post_id ) ) { | |
| $image_url = pilau_get_featured_image_url( $post_id, $image_size ); | |
| } else { | |
| $attachments = get_children( array( | |
| 'numberposts' => 1, | |
| 'order' => 'DESC', | |
| 'post_parent' => $post_id, | |
| 'post_type' => 'attachment', | |
| 'post_mime_type' => 'image' | |
| ), ARRAY_A ); | |
| if ( $attachments ) { | |
| $attachments = array_values( $attachments ); | |
| $image_url = pilau_get_image_url( $attachments[0]['ID'], $image_size ); | |
| } | |
| } | |
| } | |
| if ( $image_url ) { | |
| $image_markup = '<img src="' . esc_attr( $image_url ) . '" alt="">'; | |
| if ( $link_wrap == 'image' ) | |
| $image_markup = '<a href="' . get_permalink( $post_id ) . '">' . $image_markup . '</a>'; | |
| $output .= '<div class="img">' . $image_markup . '</div>'; | |
| } | |
| } | |
| // Close the wrapping link | |
| if ( $link_wrap == 'block' ) | |
| $output .= '</a>'; | |
| return $output; | |
| } | |
| /** | |
| * Return a carousel block via AJAX | |
| */ | |
| add_action( 'wp_ajax_pilau_carousel_block', 'pilau_carousel_block_ajax' ); | |
| function pilau_carousel_block_ajax() { | |
| ob_end_clean(); | |
| $admin = isset( $_REQUEST['admin'] ) && $_REQUEST['admin']; | |
| echo pilau_carousel_block( $_REQUEST['post_id'], $_REQUEST['layout'], $_REQUEST['block'], $admin ); | |
| exit( 0 ); | |
| } | |
| /** | |
| * Generate a carousel panel (front-end) | |
| * | |
| * @param array $panel Panels data | |
| * @return string The generated output | |
| */ | |
| function pilau_carousel_panel( $panel ) { | |
| $output = ''; | |
| if ( count( $panel['blocks'] ) ) { | |
| static $i = 0; | |
| $panel_classes = array( | |
| 'panel', | |
| 'panel-' . $i, | |
| 'layout-' . $panel['layout'] | |
| ); | |
| $output .= '<div class="' . implode( " ", $panel_classes ) . '">'; | |
| foreach ( $panel['blocks'] as $block_index => $block_content ) { | |
| $output .= '<div class="' . pilau_carousel_block_classes( $panel['layout'], $block_index ) . '">' . pilau_carousel_block( $block_content, $panel['layout'], $block_index ) . '</div>'; | |
| } | |
| $output .= '</div>'; | |
| $i++; | |
| } | |
| return $output; | |
| } | |
| /** | |
| * Generate a carousel (front-end) | |
| * | |
| * @todo Caching disabled because of odd behaviour - fix if possible | |
| * | |
| * @param string $carousel Slug of the carousel | |
| * @return string The generated output | |
| */ | |
| function pilau_carousel( $carousel ) { | |
| $carousels_data = get_option( 'pilau_carousels_data' ); | |
| //echo '<pre>'; print_r( $carousels_data ); echo '</pre>';exit; | |
| // HTML cached via Transients API | |
| //if ( ( ! $output = get_transient( 'pilau_carousels_html_' . $carousel ) ) || ( isset( $_REQUEST['refresh'] ) && $_REQUEST['refresh'] ) ) { | |
| $output = ''; | |
| // Are there panels for this carousel? | |
| if ( $carousels_data[ $carousel ]['panels'] ) { | |
| $count = 1; | |
| // Go through each panel | |
| foreach ( $carousels_data[ $carousel ]['panels'] as $panel ) { | |
| // Don't output if there are empty blocks | |
| if ( in_array( '', $panel['blocks'] ) ) | |
| continue; | |
| // Make sure the last panel goes at the start, to be on the left of | |
| // the initial panel when displayed | |
| if ( $count < count( $carousels_data[ $carousel ]['panels'] ) ) | |
| $output .= pilau_carousel_panel( $panel ); | |
| else | |
| $output = pilau_carousel_panel( $panel ) . $output; | |
| $count++; | |
| } | |
| // Add wrapper with classes | |
| $classes = array( 'carousel' ); | |
| $output = '<div id="carousel-' . $carousel . '" class="' . implode( " ", $classes ) . '">' . $output . '</div>'; | |
| // Cache for 1 hour | |
| //set_transient( 'pilau_carousels_html_' . $carousel, $output, 60 * 60 ); | |
| } | |
| //} | |
| return $output; | |
| } | |
| /** | |
| * Return a carousel via AJAX | |
| * | |
| * @since CIFF 0.1 | |
| */ | |
| add_action( 'wp_ajax_pilau_carousel', 'pilau_carousel_ajax' ); | |
| add_action( 'wp_ajax_nopriv_pilau_carousel', 'pilau_carousel_ajax' ); | |
| function pilau_carousel_ajax() { | |
| ob_end_clean(); | |
| echo pilau_carousel( $_REQUEST['carousel'] ); | |
| exit( 0 ); | |
| } | |
| /** | |
| * Modal dialog to select content for carousel blocks | |
| * | |
| * @todo "News" still being output with label "Posts"? | |
| */ | |
| add_action( 'wp_ajax_pilau_carousel_content_select', 'pilau_carousel_content_select_ajax' ); | |
| function pilau_carousel_content_select_ajax() { | |
| global $pilau_carousel_layouts; | |
| // Get all public post types, but drop attachments | |
| $post_types = get_post_types( array( 'public' => true ), 'objects' ); | |
| unset( $post_types['attachment'] ); | |
| ?> | |
| <div class="wrap" id="carousel-content-select"> | |
| <h2><?php _e( 'Select content for carousel block' ) ?></h2> | |
| <?php foreach ( $post_types as $pt ) { ?> | |
| <?php | |
| $the_posts = new WP_Query( array( | |
| 'posts_per_page' => -1, | |
| 'post_type' => $pt->name | |
| )); | |
| if ( $the_posts->have_posts() ) { ?> | |
| <h3 id="heading-<?php echo $pt->name; ?>"><a href="#"><?php echo $pt->labels->name; ?> »</a></h3> | |
| <ul id="list-<?php echo $pt->name; ?>"<?php /*if ( $pt !== reset( $post_types ) ) {*/ ?> style="display:none"<?php /*}*/ ?> class="clearfix"> | |
| <?php | |
| while ( $the_posts->have_posts() ) { | |
| $the_posts->the_post(); | |
| // Get custom fields | |
| $custom_fields = slt_cf_all_field_values(); | |
| // Try to get appropriate image | |
| $image_type = pilau_carousel_image_format( $pilau_carousel_layouts[ $_REQUEST['layout'] ]['blocks'][ $_REQUEST['block'] ]['format'] ); | |
| $image_field = 'carousel-image-' . $image_type; | |
| $image_url = null; | |
| if ( isset( $custom_fields[ $image_field ] ) && $custom_fields[ $image_field ] ) | |
| $image_url = pilau_get_image_url( $custom_fields[ $image_field ], 'carousel-' . $image_type ); | |
| // Output | |
| echo '<li><a href="#" id="post-' . get_the_ID() . '"><div class="img ' . $image_type . '">'; | |
| if ( $image_url ) | |
| echo '<img src="' . $image_url . '" height="25">'; | |
| echo '</div>'; | |
| echo '<div>' . pilau_extract( get_the_title(), 5 ) . '</div>'; | |
| echo '</a></li>'; | |
| } | |
| // Reset loop | |
| wp_reset_postdata(); | |
| ?> | |
| </ul> | |
| <?php | |
| } | |
| ?> | |
| <?php } ?> | |
| <script> | |
| jQuery( document ).ready( function( $ ) { | |
| // Open / close lists | |
| $( '#carousel-content-select h3 a' ).on( 'click', function() { | |
| var list = $( this ).parent().next( 'ul' ); | |
| if ( list.is( ':hidden' ) ) | |
| list.slideDown(); | |
| else | |
| list.slideUp(); | |
| return false; | |
| }); | |
| // Selection action | |
| $( '#carousel-content-select li a' ).on( 'click', function() { | |
| var id_parts = $( this ).attr( 'id' ).split( '-' ); | |
| var id = id_parts[1]; | |
| // Load block content from AJAX call into page | |
| $( '#carousels #panel-<?php echo $_REQUEST['panel']; ?> .block-<?php echo $_REQUEST['block']; ?> .block-content' ).load( '<?php echo admin_url( 'admin-ajax.php' ); ?>', { | |
| action: 'pilau_carousel_block', | |
| post_id: id, | |
| layout: <?php echo $_REQUEST['layout']; ?>, | |
| block: <?php echo $_REQUEST['block']; ?>, | |
| admin: 1 | |
| }, function( responseText, textStatus, XMLHttpRequest ) { | |
| //console.log( responseText ); | |
| //console.log( textStatus ); | |
| //console.log( XMLHttpRequest ); | |
| // Put content ID into hidden field | |
| // Trigger change event to make leaving page warning work! | |
| $( '#carousels #panel-<?php echo $_REQUEST['panel']; ?> .block-<?php echo $_REQUEST['block']; ?> input[type=hidden]' ).val( id ).trigger( 'change' ); | |
| // Change Edit link | |
| var el = $( '#carousels #panel-<?php echo $_REQUEST['panel']; ?> .block-<?php echo $_REQUEST['block']; ?> a.edit-content' ); | |
| el.attr( 'href', el.attr( 'href' ).replace( /\?post=[^&]*/, '?post=' + id ) ).show(); | |
| // Close thickbox | |
| tb_remove(); | |
| }); | |
| return false; | |
| }); | |
| }); | |
| </script> | |
| </div> | |
| <?php | |
| exit(); | |
| } | |
| /** | |
| * Add custom fields | |
| * | |
| * @uses slt_cf_register_box() | |
| */ | |
| if ( function_exists( 'slt_cf_register_box' ) ) | |
| add_action( 'init', 'pilau_carousel_custom_fields', 10001 ); | |
| function pilau_carousel_custom_fields() { | |
| global $pilau_all_post_types, $_wp_additional_image_sizes; | |
| slt_cf_register_box( array( | |
| 'type' => 'post', | |
| 'title' => 'Carousel content', | |
| 'id' => 'carousel-content-box', | |
| 'context' => 'normal', | |
| 'priority' => 'high', | |
| 'description' => 'If any of these items aren\'t entered for this piece of content and it gets placed in a carousel, content will be automatically sourced from the title, main content, attached images, etc. Enter specific carousel content here for greater control.', | |
| 'fields' => array( | |
| array( | |
| 'name' => 'carousel-content-type', | |
| 'label' => 'Content type indicator', | |
| 'type' => 'text', | |
| 'description' => 'E.g. Strategy, Climate, Team, etc.', | |
| 'scope' => $pilau_all_post_types, | |
| 'capabilities' => array( 'publish_pages' ) | |
| ), | |
| array( | |
| 'name' => 'carousel-heading', | |
| 'label' => 'Heading', | |
| 'type' => 'text', | |
| 'scope' => $pilau_all_post_types, | |
| 'capabilities' => array( 'publish_pages' ) | |
| ), | |
| array( | |
| 'name' => 'carousel-text', | |
| 'label' => 'Intro text', | |
| 'type' => 'text', | |
| 'description' => 'Text that is visible before the hover state.', | |
| 'scope' => $pilau_all_post_types, | |
| 'capabilities' => array( 'publish_pages' ) | |
| ), | |
| array( | |
| 'name' => 'carousel-text-hidden', | |
| 'label' => 'Hidden text', | |
| 'type' => 'textarea', | |
| 'height' => 6, | |
| 'description' => 'For placement in blocks that have text that\'s hidden until the hover state. To add links (below), enter link text and a URL like this: <code>"Link text":http://domain.com</code>', | |
| 'scope' => $pilau_all_post_types, | |
| 'capabilities' => array( 'publish_pages' ) | |
| ), | |
| array( | |
| 'name' => 'carousel-link-hidden-1', | |
| 'label' => 'Hidden link 1', | |
| 'type' => 'text', | |
| 'scope' => $pilau_all_post_types, | |
| 'capabilities' => array( 'publish_pages' ) | |
| ), | |
| array( | |
| 'name' => 'carousel-link-hidden-2', | |
| 'label' => 'Hidden link 2', | |
| 'type' => 'text', | |
| 'scope' => $pilau_all_post_types, | |
| 'capabilities' => array( 'publish_pages' ) | |
| ), | |
| array( | |
| 'name' => 'carousel-link-hidden-3', | |
| 'label' => 'Hidden link 3', | |
| 'type' => 'text', | |
| 'scope' => $pilau_all_post_types, | |
| 'capabilities' => array( 'publish_pages' ) | |
| ), | |
| array( | |
| 'name' => 'carousel-link-hidden-4', | |
| 'label' => 'Hidden link 4', | |
| 'type' => 'text', | |
| 'scope' => $pilau_all_post_types, | |
| 'capabilities' => array( 'publish_pages' ) | |
| ), | |
| array( | |
| 'name' => 'carousel-link-hidden-5', | |
| 'label' => 'Hidden link 5', | |
| 'type' => 'text', | |
| 'scope' => $pilau_all_post_types, | |
| 'capabilities' => array( 'publish_pages' ) | |
| ), | |
| array( | |
| 'name' => 'carousel-image-horizontal', | |
| 'label' => 'Landscape image', | |
| 'type' => 'file', | |
| 'preview_size' => 'carousel-horizontal', | |
| 'description' => 'If you intend to place this content in a horizontal-style carousel block, upload an optimal image here. It should ideally be ' . $_wp_additional_image_sizes['carousel-horizontal']['width'] . 'px wide, ' . $_wp_additional_image_sizes['carousel-horizontal']['height'] . 'px high.', | |
| 'scope' => $pilau_all_post_types, | |
| 'capabilities' => array( 'publish_pages' ) | |
| ), | |
| array( | |
| 'name' => 'carousel-image-square', | |
| 'label' => 'Squarish image', | |
| 'type' => 'file', | |
| 'preview_size' => 'medium', | |
| 'description' => 'An optimal image for the vertical and square carousel blocks. It should ideally be ' . get_option( 'medium_size_w' ) . 'px wide, 257px high. This fits the vertical block, and can be resized easily for the square blocks.', | |
| 'scope' => $pilau_all_post_types, | |
| 'capabilities' => array( 'publish_pages' ) | |
| ) | |
| ) | |
| )); | |
| // Any filtering of default values | |
| add_filter( 'slt_cf_default_value', 'ciff_cf_default_value', 10, 5 ); | |
| function ciff_cf_default_value( $default, $request_type, $object_id, $object, $field ) { | |
| global $post; | |
| // Default content type | |
| if ( $field['name'] == 'carousel-content-type' ) { | |
| switch ( get_post_type() ) { | |
| case 'page': | |
| switch ( basename( get_page_template() ) ) { | |
| case 'page_priority-area.php': | |
| $default = __( 'Strategy' ); | |
| break; | |
| default: | |
| // Use section as default | |
| if ( $post->ancestors ) | |
| $default = get_the_title( end( $post->ancestors ) ); | |
| else | |
| $default = get_the_title(); | |
| break; | |
| } | |
| break; | |
| case 'teammember': | |
| case 'boardmember': | |
| $default = __( 'Team' ); | |
| break; | |
| case 'post': | |
| $default = __( 'News' ); | |
| break; | |
| default: | |
| $default = ucfirst( get_post_type() ); | |
| break; | |
| } | |
| } | |
| return $default; | |
| } | |
| } | |
| /** | |
| * Process carousel page submissions | |
| */ | |
| add_action( 'admin_init', 'pilau_carousel_panels_interface_process' ); | |
| function pilau_carousel_panels_interface_process() { | |
| global $pilau_carousels_data; | |
| // Submitted? | |
| if ( isset( $_POST['pilau_carousel_panels_nonce'] ) && check_admin_referer( 'pilau-carousel-panels', 'pilau_carousel_panels_nonce' ) ) { | |
| // Deleted panels | |
| $deleted_panels = isset( $_POST['pilau-panel-delete'] ) ? $_POST['pilau-panel-delete'] : array(); | |
| // Collect submitted panels into new array | |
| $carousel_panels = array(); | |
| foreach ( $_POST as $field => $value ) { | |
| // Detect block content fields | |
| if ( strlen( $field ) > 30 && substr( $field, 0, 6 ) == 'panel-' ) { | |
| $field_parts = explode( '-', $field ); | |
| $panel = $field_parts[1]; | |
| $layout = $field_parts[3]; | |
| $block = $field_parts[5]; | |
| // Skip if part of a deleted panel | |
| if ( in_array( $panel, $deleted_panels ) ) | |
| continue; | |
| // Initialize new panel? | |
| if ( ! isset( $carousel_panels[ $panel ] ) ) { | |
| $carousel_panels[ $panel ] = array( | |
| 'layout' => $layout, | |
| 'blocks' => array() | |
| ); | |
| } | |
| // Add block | |
| $carousel_panels[ $panel ]['blocks'][ $block ] = $value; | |
| } | |
| } | |
| // Add new panels? | |
| if ( isset( $_POST['add-new-panel-start'] ) ) { | |
| array_unshift( $carousel_panels, pilau_carousel_default_panel( 1 - $carousel_panels[0]['layout'] ) ); | |
| } else if ( isset( $_POST['add-new-panel-end'] ) ) { | |
| $carousel_panels[] = pilau_carousel_default_panel( 1 - $carousel_panels[ end( array_keys( $carousel_panels ) ) ]['layout'] ); | |
| } | |
| // Need to make up the minimum? | |
| if ( count( $carousel_panels ) < PILAU_CAROUSEL_MIN_PANELS ) { | |
| for ( $i = 0; $i < ( PILAU_CAROUSEL_MIN_PANELS - count( $carousel_panels ) ); $i++ ) { | |
| $carousel_panels[] = pilau_carousel_default_panel( 1 - $carousel_panels[ end( array_keys( $carousel_panels ) ) ]['layout'] ); | |
| } | |
| } | |
| // Replace current carousel | |
| $pilau_carousels_data[ $_POST['carousel'] ]['panels'] = $carousel_panels; | |
| update_option( 'pilau_carousels_data', $pilau_carousels_data ); | |
| // Redirect | |
| wp_redirect( admin_url( 'themes.php?page=pilau-carousel-panels&tab=' . $_POST['carousel'] . '&updated=1' ) ); | |
| } | |
| } | |
| /** | |
| * Add links to WP toolbar | |
| */ | |
| add_action( 'admin_bar_menu', 'pilau_carousel_panels_toolbar_link', 1000 ); | |
| function pilau_carousel_panels_toolbar_link( $toolbar ) { | |
| if ( is_front_page() ) { | |
| $toolbar->add_node( array( | |
| 'id' => 'carousel', | |
| 'title' => 'Manage carousels', | |
| 'href' => admin_url( 'themes.php?page=pilau-carousel-panels' ) | |
| )); | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /** | |
| * Front page | |
| */ | |
| // Get carousels data | |
| $pilau_carousels_data = get_option( 'pilau_carousels_data' ); | |
| // Default to all | |
| $pilau_initial_carousel = 'all'; | |
| if ( isset( $_COOKIE['pilau_home_carousel'] ) ) { | |
| $pilau_initial_carousel = $_COOKIE['pilau_home_carousel']; | |
| } else if ( isset( $_REQUEST['carousel'] ) ) { | |
| $pilau_initial_carousel = $_REQUEST['carousel']; | |
| } | |
| ?> | |
| <?php get_header(); ?> | |
| <div role="main" id="main"> | |
| <?php /* Pass carousels data along for client-side JS */ ?> | |
| <aside id="carousels" data-carousels="<?php echo implode( ' ', array_keys( $pilau_carousels_data ) ); ?>" role="complementary"><div id="carousels-window"> | |
| <?php | |
| /* | |
| * No-JS clients just get the initial carousel - other carousels are loaded via AJAX | |
| */ | |
| echo pilau_carousel( $pilau_initial_carousel ); | |
| ?> | |
| </div></aside> | |
| </div><!-- #main --> | |
| <?php get_footer(); ?> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| require( dirname( __FILE__ ) . '/carousel.php' ); | |
| add_action( 'after_setup_theme', 'pilau_setup' ); | |
| function pilau_setup() { | |
| add_image_size( 'carousel-horizontal', 466, 243, false ); | |
| add_image_size( 'carousel-vertical', 306, 256, false ); | |
| add_image_size( 'carousel-square', 226, 188, true ); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| IE7 hacks | |
| */ | |
| .js .home #carousels .scroll { | |
| background: url("../img/bg-ie-transparent-white.png"); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Front-end-only styles */ | |
| .js .home { | |
| // Carousels | |
| #carousels { | |
| position: relative; | |
| height: @carousel-height + ( @carousel-gutter * 2 ) + @carousel-controls-height; | |
| width: 100%; | |
| padding: 0; | |
| background-color: @color-background-grey-dark; | |
| text-align: center; | |
| #carousels-controls { | |
| position: relative; | |
| height: @carousel-controls-height; | |
| width: @width-wrapper; | |
| margin: 0 auto; | |
| text-align: left; | |
| .FontBold( .9em ); | |
| color: lighten( @color-text-light, 10% ); | |
| } | |
| #carousels-nav { | |
| padding: @carousel-gutter 0 0 @carousel-gutter; | |
| p, li { | |
| .InlineBlock(); | |
| margin-right: @carousel-gutter; | |
| } | |
| ul { | |
| text-transform: uppercase; | |
| .InlineBlock(); | |
| li { | |
| a { | |
| padding: 2px 5px; | |
| color: #fff; | |
| &:hover, &:focus { | |
| background-color: @color-pink; | |
| text-decoration: none; | |
| } | |
| } | |
| &.active a { | |
| color: @color-pink; | |
| cursor: default; | |
| &:hover, &:focus { | |
| background-color: transparent; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| #carousels-orientation { | |
| position: absolute; | |
| top: @carousel-gutter; | |
| right: @carousel-gutter * 2; | |
| li { | |
| .InlineBlock(); | |
| width: 8px; | |
| height: 8px; | |
| margin-right: @carousel-gutter; | |
| text-indent: -9999px; | |
| background: url('@{url-theme}/img/carousel-dot-off.png') no-repeat; | |
| &.current { | |
| background: url('@{url-theme}/img/carousel-dot-on.png') no-repeat; | |
| } | |
| } | |
| } | |
| #carousels-window { | |
| clear: both; | |
| position: relative; | |
| width: @width-wrapper; | |
| height: @carousel-height; | |
| margin: @carousel-gutter auto; | |
| .carousel { | |
| position: absolute; | |
| z-index: 100; | |
| height: @carousel-height; | |
| overflow: hidden; | |
| text-align: left; | |
| .panel { | |
| float: left; | |
| margin-right: @carousel-gutter; | |
| .block { | |
| .text { | |
| .hidden-text { | |
| display: none; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .side { | |
| position: absolute; | |
| top: @carousel-controls-height + @carousel-gutter; | |
| z-index: 1000; | |
| .TransparentBackground( #000, .5 ); | |
| height: @carousel-height; | |
| width: 100px; // Refreshed dynamically | |
| } | |
| #carousels-side-left { | |
| left: 0; | |
| } | |
| #carousels-side-right { | |
| right: 0; | |
| } | |
| .scroll { | |
| position: absolute; | |
| top: ( ( @carousel-height - @carousel-scroll-height ) / 2 ) + @carousel-controls-height + @carousel-gutter; | |
| z-index: 2000; | |
| width: @carousel-scroll-width; | |
| height: @carousel-scroll-height; | |
| cursor: pointer; | |
| .TransparentBackground( #fff, .6 ); | |
| .BorderRadius(); | |
| .DropShadow( 4px, 1px, 3px, 2px, .4 ); | |
| .arrow { | |
| position: absolute; | |
| width: @carousel-scroll-arrow-width; | |
| height: @carousel-scroll-arrow-height; | |
| top: ( @carousel-scroll-height - @carousel-scroll-arrow-height ) / 2; | |
| right: ( @carousel-scroll-width - @carousel-scroll-arrow-width ) / 2; | |
| background: url('@{url-theme}/img/carousel-arrow-left-off.png') no-repeat; | |
| } | |
| &:hover .arrow, &:focus .arrow { | |
| background: url('@{url-theme}/img/carousel-arrow-left-on.png') no-repeat; | |
| } | |
| } | |
| #carousels-scroll-left { | |
| left: 100px; // Refreshed dynamically | |
| .DropShadow( -4px, 1px, 3px, 2px, .4 ); | |
| } | |
| #carousels-scroll-right { | |
| right: 100px; // Refreshed dynamically | |
| .arrow { | |
| background: url('@{url-theme}/img/carousel-arrow-right-off.png') no-repeat; | |
| } | |
| &:hover .arrow, &:focus .arrow { | |
| background: url('@{url-theme}/img/carousel-arrow-right-on.png') no-repeat; | |
| } | |
| } | |
| } | |
| } | |
| .no-js #carousels { | |
| text-align: center; | |
| #carousels-window { | |
| width: @width-wrapper; | |
| margin: 0 auto; | |
| text-align: left; | |
| } | |
| .panel { | |
| margin: 20px 0; | |
| } | |
| } | |
| .lt-ie9 { | |
| .js .home #carousels .scroll { | |
| background: url("@{url-theme}/img/bg-ie-transparent-white.png"); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment