Changeset 4280

Timestamp:

10/21/2016 04:10:02 PM (8 years ago)

Author:

iandunn

Message:

WordCamp Site Cloner: Convert to REST/Backbone to improve scalability

See #1112
Props prettyboymp

Location:

sites/trunk/wordcamp.org/public_html/wp-content/plugins/wordcamp-site-cloner

Files:

• includes/site-control.php (modified) (3 diffs)
• includes/sites-section.php (deleted)
• includes/source-site-id-setting.php (modified) (4 diffs)
• templates/site-control.php (modified) (1 diff)
• templates/site-filters.php (added)
• templates/site-option.php (added)
• templates/sites-section.php (deleted)
• wordcamp-site-cloner.css (modified) (3 diffs)
• wordcamp-site-cloner.js (modified) (4 diffs)
• wordcamp-site-cloner.php (modified) (8 diffs)

sites/trunk/wordcamp.org/public_html/wp-content/plugins/wordcamp-site-cloner/includes/site-control.php

@@ -1 +1 @@
 <?php
 
+/**
+ * Custom Customizer Control for Search WordCamp sites to clone
+ */
+
 namespace WordCamp\Site_Cloner;
-
 defined( 'WPINC' ) or die();
 
-/**
- * Custom Customizer Control for a WordCamp site
- */
 class Site_Control extends \WP_Customize_Control {
-    public $site_id, $site_name, $screenshot_url, $theme_slug;
-    public $settings = 'wcsc_source_site_id';
-    public $section  = 'wcsc_sites';
+    public function __construct( $manager, $id, $args = array() ) {
+        parent::__construct( $manager, $id, $args );
+
+        $this->capability = 'edit_theme_options';
+        $this->section    = 'wcsc_sites';
+    }
 
     /**
@@ -17 +20 @@
      */
     public function enqueue() {
+        add_action( 'customize_controls_print_footer_scripts', array( $this, 'print_view_templates' ) );
+
         wp_enqueue_style(  'wordcamp-site-cloner' );
         wp_enqueue_script( 'wordcamp-site-cloner' );
@@ -25 +30 @@
      */
     public function render_content() {
-        $preview_url = add_query_arg(
-            array(
-                'theme'               => rawurlencode( $this->theme_slug ),
-                'wcsc_source_site_id' => rawurlencode( $this->site_id ),
-            ),
-            admin_url( 'customize.php' )
-        );
+        require_once( dirname( __DIR__ ) . '/templates/site-control.php' );
+    }
 
-        require( dirname( __DIR__ ) . '/templates/site-control.php' );
+    /**
+     * Render the control's Underscores templates
+     */
+    public function print_view_templates() {
+        require_once( dirname( __DIR__ ) . '/templates/site-option.php'  );
+        require_once( dirname( __DIR__ ) . '/templates/site-filters.php' );
     }
 }

sites/trunk/wordcamp.org/public_html/wp-content/plugins/wordcamp-site-cloner/includes/source-site-id-setting.php

@@ -2 +2 @@
 
 namespace WordCamp\Site_Cloner;
-
 defined( 'WPINC' ) or die();
 
@@ -16 +15 @@
     public $default           = 0;
     public $sanitize_callback = 'absint';
+
     protected $preview_source_site_id;
 
@@ -29 +29 @@
         add_filter( 'get_post_metadata',       array( $this, 'preview_jetpack_postmeta' ), 10, 4 );
         add_filter( 'safecss_skip_stylesheet', array( $this, 'preview_skip_stylesheet'  ) );
+
+        // Disable the current site's Custom CSS from being output
+        remove_action( 'wp_head', array( 'Jetpack_Custom_CSS', 'link_tag' ), 101 );
     }
 
@@ -110 +113 @@
      *
      * @param int $source_site_id
+     *
+     * @return null
      */
     protected function update( $source_site_id ) {

sites/trunk/wordcamp.org/public_html/wp-content/plugins/wordcamp-site-cloner/templates/site-control.php

@@ -1 @@
-<?php defined( 'WPINC' ) or die(); ?>
+<?php
 
-<div id="wcsc-site-<?php echo esc_attr( $this->site_id ); ?>" class="wcscSite" data-preview-url="<?php echo esc_url( $preview_url ); ?>">
-    <div class="wcsc-site-screenshot">
-        <img src="<?php echo esc_url( $this->screenshot_url ); ?>" alt="<?php echo esc_attr( $this->site_name ); ?>" />
-    </div>
+/**
+ * Top level template for the output of the Site Cloner Customizer Control
+ */
 
-    <h3 class="wcsc-site-name">
-        <?php echo esc_html( $this->site_name ); ?>
+namespace WordCamp\Site_Cloner;
+defined( 'WPINC' ) or die();
+
+?>
+
+<div id="wcsc-cloner">
+    <h3>
+        <?php esc_html_e( 'WordCamp Sites', 'wordcamporg' ); ?>
+        <span id="wcsc-sites-count" class="title-count wcsc-sites-count"></span>
     </h3>
 
-    <span id="live-preview-label-<?php echo esc_attr( $this->site_id ); ?>" class="wcsc-live-preview-label">
-        <?php _e( 'Live Preview', 'wordcamporg' ); ?>
-    </span>
+    <div class="filters"></div>
+
+    <div class="wcsc-search">
+        <ul id="wcsc-results"></ul>
+    </div>
 </div>

sites/trunk/wordcamp.org/public_html/wp-content/plugins/wordcamp-site-cloner/wordcamp-site-cloner.css

@@ -1 @@
-.control-section-wcsc-sites {
-    padding: 0 8px;
+
+.wcsc-filter {
+    margin-bottom: 10px;
 }
 
-    #wcsc-sites {
-        overflow: auto;
-    }
-
-        .wcscSite {
+        .wcsc-site {
             position: relative;
             cursor: pointer;
             border: 1px solid #DEDEDE;
             box-shadow: 0 1px 1px -1px rgba( 0, 0, 0, 0.1 );
+            margin-top: 5px;
         }
 
@@ -18 +16 @@
             }
 
-                .wcscSite:hover .wcsc-site-screenshot {
+                .wcsc-site:hover .wcsc-site-screenshot {
                     opacity: 0.4;
                 }
 
-            .wcsc-live-preview-label {
+            .wcsc-live-preview-label,
+            .wcsc-previewing-label {
                 opacity: 0;
                 position: absolute;
@@ -39 +38 @@
             }
 
-                .wcscSite:hover .wcsc-live-preview-label {
+                .wcsc-site:hover .wcsc-live-preview-label,
+                .wcsc-site .wcsc-previewing-label {
                     opacity: 1;
                 }

sites/trunk/wordcamp.org/public_html/wp-content/plugins/wordcamp-site-cloner/wordcamp-site-cloner.js

@@ -1 @@
-( function( wp, $ ) {
+( function( wp, $, Backbone, win, settings ) {
     'use strict';
 
@@ -6 +6 @@
     }
 
-    var api = wp.customize;
+    wp.customize.WordCamp = wp.customize.WordCamp || {};
+
+    var api  = wp.customize,
+        wcsc = api.WordCamp.SiteCloner = {
+            models      : {},
+            views       : {},
+            collections : {},
+            routers     : {},
+            settings    : {}
+        };
+
+    wcsc.settings = settings || {};
+
+    // Model for a single site
+    wcsc.models.Site = Backbone.Model.extend( {
+        idAttribute : 'site_id',
+
+        defaults : {
+            'active' : false
+        }
+    } );
+
+    // Model representing the filter state for searching/filtering sites
+    wcsc.models.SearchFilter = Backbone.Model.extend( {
+        's'                : '',
+        'theme_slug'       : '',
+        'year'             : '',
+        'css_preprocessor' : ''
+    } );
+
+    // Top level view for the Site Cloner Control
+    wcsc.views.SiteSearch = Backbone.View.extend( {
+        el : '#wcsc-cloner .wcsc-search',
+
+        // Index of the currently viewed page of results
+        page : 0,
+
+        initialize : function( options ) {
+            // Update scroller position
+            _.bindAll( this, 'scroller' );
+
+            // Container that will be scrolled within
+            this.$container = $( '#wcsc-cloner' ).parents( 'ul.accordion-section-content' );
+            // Bind scrolling within the container to check for infinite scroll
+            this.$container.bind( 'scroll', _.throttle( this.scroller, 300 ) );
+
+            // The model and view for filtering the site results
+            this.filterView = new wcsc.views.SearchFilters( {
+                model  : this.collection.searchFilter,
+                parent : this
+            } );
+
+            // View for listing the matching sites
+            this.resultsView = new wcsc.views.SearchResults( {
+                collection : this.collection,
+                parent     : this
+            } );
+        },
+
+        render : function() {
+            this.filterView.render();
+            this.resultsView.render();
+
+            this.$el.empty().append( this.resultsView.el );
+        },
+
+        /**
+         * Checks if a user has reached the bottom of the list and triggers a scroll event to show more sites if
+         * needed.
+         */
+        scroller : function() {
+            var visibleBottom, threshold, elementHeight, containerHeight, scrollTop;
+
+            scrollTop       = this.$container.scrollTop();
+            containerHeight = this.$container.innerHeight();
+            elementHeight   = this.$container.get( 0 ).scrollHeight;
+
+            visibleBottom = scrollTop + containerHeight;
+            threshold     = Math.round( elementHeight * 0.9 );
+
+            if ( visibleBottom > threshold ) {
+                this.trigger( 'wcsc:scroll' );
+            }
+        }
+    } );
+
+    // Collection representing the list of cloneable sites
+    wcsc.collections.Sites = Backbone.Collection.extend( {
+        model : wcsc.models.Site,
+        url   : wcsc.settings.apiUrl,
+
+        initialize : function( options ) {
+            this.searchFilter = options.searchFilter || {};
+
+            this.listenTo( this.searchFilter, 'change', this.applyFilter );
+        },
+
+        // Filter this collection by the updated searchFilter attributes
+        applyFilter : function() {
+            var filters       = this.searchFilter.toJSON(),
+                activeFilters = _.pick( filters, _.identity ),
+                term          = '',
+                sites;
+
+            // Nothing actually changed, so don't update the collection
+            if ( _.isEmpty( this.searchFilter.changedAttributes() ) ) {
+                return;
+            }
+
+            // No active filters. Reset to the full list and bail
+            if ( _.isEmpty( activeFilters ) ) {
+                this.resetCanonical();
+                return;
+            }
+
+            this.resetCanonical( { silent: true } );
+
+            // Remove the search query restriction since we already filtered by word matches above
+            if ( activeFilters.s ) {
+                term = activeFilters.s;
+
+                delete activeFilters.s;
+            }
+
+            sites = this.where( activeFilters );
+
+            if ( term ) {
+                sites = this.filterBySearch( sites, term );
+            }
+
+            this.reset( sites );
+        },
+
+        // Internal method for filtering sites by search terms
+        filterBySearch : function( sites, term ) {
+            var match, name;
+
+            // Escape the term string for RegExp meta characters
+            term = term.replace( /[-\/\\^$*+?.()|[\]{}]/g, '\\$&' );
+
+            // Consider spaces as word delimiters and match the whole string
+            // so matching terms can be combined
+            term  = term.replace( / /g, ')(?=.*' );
+            match = new RegExp( '^(?=.*' + term + ').+', 'i' );
+
+            return _.filter( sites, function( site ) {
+                name = site.get( 'name' ).replace( /(<([^>]+)>)/ig, '' );
+
+                return match.test( name );
+            } );
+        },
+
+        paginate : function( pageIndex ) {
+            var collection = this;
+
+            pageIndex  = pageIndex || 0;
+
+            collection = _( collection.rest( 20 * pageIndex ) );
+            collection = _( collection.first( 20 ) );
+
+            return collection;
+        },
+
+        // Resets the site collection dataset to the canonical list originally pulled from the api
+        resetCanonical : function( options ) {
+            var activeSite,
+                activeSiteId = api( 'wcsc_source_site_id' ).get();
+
+            options = options || {};
+
+            this.reset( wcsc.settings.siteData, options );
+
+            // Restore the currently active site
+            if ( activeSiteId ) {
+                activeSite = this.find( { site_id : activeSiteId } );
+
+                if ( 'undefined' !== typeof activeSite ) {
+                    activeSite.set( { active: true } );
+                }
+            }
+        }
+    } );
+
+    // View for a single site
+    wcsc.views.Site = Backbone.View.extend( {
+        className : 'wcsc-site',
+        html      : wp.template( 'wcsc-site-option' ),
+        touchDrag : false,
+
+        attributes : function() {
+            return {
+                'id'           : 'wcsc-site-' + this.model.get( 'site_id' ),
+                'data-site-id' : this.model.get( 'site_id' )
+            }
+        },
+
+        events : {
+            'click'     : 'preview',
+            'keydown'   : 'preview',
+            'touchend'  : 'preview',
+            'touchmove' : 'preventPreview'
+        },
+
+        initialize : function( options ) {
+            this.parent = options.parent;
+
+            this.listenTo( this.model, 'change', this.render );
+            this.render();
+        },
+
+        render : function() {
+            this.$el.html( this.html( this.model.toJSON() ) );
+        },
+
+        preventPreview : function() {
+            this.touchDrag = true;
+        },
+
+        preview : function( event ) {
+            event = event || window.event;
+
+            // Ignore touches caused by scrolling
+            if ( this.touchDrag === true ) {
+                this.touchDrag = false;
+            }
+
+            event.preventDefault();
+
+            this.$el.trigger( 'wcsc:previewSite', this.model );
+        }
+    } );
+
+    // View for the site results list
+    wcsc.views.SearchResults = Backbone.View.extend( {
+        className: 'wcsc-results',
+
+        initialize : function( options ) {
+            var self = this;
+
+            this.parent     = options.parent;
+            this.$siteCount = $( '#wcsc-sites-count' );
+
+            // Re-render the view whenever a collection change is complete
+            this.listenTo( this.collection, 'reset', function() {
+                self.parent.page = 0;
+                self.render( this );
+            } );
+
+            this.listenTo( this.parent, 'wcsc:scroll', function() {
+                self.renderSites( self.parent.page );
+            } );
+        },
+
+        render : function() {
+            this.$el.empty();
+            this.renderSites( this.parent.page );
+            this.$siteCount.text( this.collection.length );
+        },
+
+        renderSites : function( page ) {
+            var self = this;
+
+            // Get a collection of just the requested page
+            this.instance = this.collection.paginate( page );
+
+            if ( this.instance.size() === 0 ) {
+                this.parent.trigger( 'wcsc:end' );
+                return;
+            }
+
+            this.instance.each( function( site ) {
+                var siteView = new wcsc.views.Site( {
+                    model  : site,
+                    parent : self
+                } );
+
+                siteView.render();
+
+                self.$el.append( siteView.el );
+            } );
+
+            this.parent.page++;
+        }
+
+    } );
+
+    // View for the search and dropdown filters
+    wcsc.views.SearchFilters = Backbone.View.extend( {
+        el        : '#wcsc-cloner .filters',
+        className : 'wscs-filters',
+        html      : wp.template( 'wcsc-site-filters' ),
+
+        events : {
+            "input #wcsc-filter-search-input" : "search",
+            "keyup #wcsc-filter-search-input" : "search",
+            "change select"                   : "applyFilter"
+        },
+
+        initialize : function( options ) {
+            this.parent = options.parent;
+        },
+
+        render : function() {
+            var data = {};
+
+            data.themeOptions        = wcsc.settings.themes;
+            data.yearOptions         = _.uniq( this.parent.collection.pluck( 'year' ) ).sort();
+            data.preprocessorOptions = _.uniq( this.parent.collection.pluck( 'css_preprocessor' ) ).sort();
+
+            this.$el.html( this.html( data ) );
+
+            this.$searchInput        = $( '#wcsc-filter-search-input' );
+            this.$themeFilter        = $( '#wcsc-filter-theme_slug' );
+            this.$yearFilter         = $( '#wcsc-filter-year' );
+            this.$preprocessorFilter = $( '#wcsc-filter-css_preprocessor' );
+        },
+
+        search : function( event ) {
+            // Clear on escape.
+            if ( event.type === 'keyup' && event.which === 27 ) {
+                event.target.value = '';
+            }
+
+            /**
+             * Since doSearch is debounced, it will only run when user input comes to a rest
+             */
+            this.doSearch( event );
+        },
+
+        doSearch : _.debounce( function( event ) {
+            this.model.set( 's', event.target.value );
+        }, 500 ),
+
+        applyFilter : function( event ) {
+            var $target = $( event.target ),
+                value   = $target.val(),
+                filter  = $target.data( 'filter' );
+
+            this.model.set( filter, value );
+        },
+
+        // Set the inputs to the set of filters as triggered by the router on initial load
+        setInputs : function( filters ) {
+            this.model.set( filters, { silent : true } );
+
+            this.$searchInput.val(        this.model.get( 's'                ) );
+            this.$themeFilter.val(        this.model.get( 'theme_slug'       ) );
+            this.$yearFilter.val(         this.model.get( 'year'             ) );
+            this.$preprocessorFilter.val( this.model.get( 'css_preprocessor' ) );
+
+            this.model.trigger( 'change', this.model );
+        }
+    } );
 
     /**
-     * The Clone Another WordCamp panel
+     * Sets up a listener to store the user's selected filters and search, so that a user's position can be
+     * restored as well as possible after a theme changes causes a full refresh.
      */
-    api.panelConstructor.wcscPanel = api.Panel.extend( {
-        /**
-         * Initialize the panel after it's loaded
-         *
-         * Ideally, the Previewer would be set to the requested site ID during the initial PHP request, rather than
-         * loading the host site in the Previewer, and then refreshing it to use the requested site. That became a
-         * rabbit hole, though, so it's done this way instead.
-         */
+    wcsc.routers.FilterState = Backbone.Router.extend( {
+        routes : {
+            'wcsc?*filters' : 'applyFilters'
+        },
+
+        initialize : function( options ) {
+            this.parent = options.parent;
+
+            // Any time the collection is reset, we need to update the displayed route
+            this.listenTo( this.parent.view.collection, 'reset', this.updateLocation );
+        },
+
+        // Applies the filters set in the query string to the view
+        applyFilters : function( queryString ) {
+            var filters = deserializeQueryString( queryString );
+
+            this.parent.view.filterView.setInputs( filters );
+        },
+
+        updateLocation : function() {
+            var filters       = this.parent.view.collection.searchFilter.toJSON(),
+                activeFilters = _.pick( filters, _.identity ),
+                queryString   = $.param( activeFilters );
+
+            this.navigate( 'wcsc?' + queryString );
+        }
+    } );
+
+    // Customizer Control wrapping the site search applet
+    api.controlConstructor.wcscSearch = api.Control.extend( {
         ready : function() {
-            var urlParams = getUrlParams( window.location.href );
-
+            var filter = new wcsc.models.SearchFilter(); // Top level model representing the current filter applied to the collection
+
+            this.siteCollection = new wcsc.collections.Sites( { searchFilter : filter } );
+
+            // Fill the site collection and setup search when complete
+            this.siteCollection.fetch( {
+                success : this.setupSearch.bind( this )
+            } );
+        },
+
+        // Initialize the site search instance for cloning other sites
+        setupSearch : function() {
+            var currentSite,
+                control   = this,
+                urlParams = getUrlParams( win.location.href );
+
+            // Set a canonical array of all sites prior to filtering
+            wcsc.settings.siteData = this.siteCollection.toJSON();
+
+            // If the wcsc_source_site_id is set, it;s most likely from a user previewing a site, so bring them back
             if ( urlParams.hasOwnProperty( 'wcsc_source_site_id' ) ) {
-                this.expand();
-                api( 'wcsc_source_site_id' ).set( urlParams.wcsc_source_site_id );
-            }
-        }
-    } );
-
-    /**
-     * Custom control representing a site that can be previewed/imported
-     */
-    api.controlConstructor.wcscSite = api.Control.extend( {
-        /**
-         * Initialize the control after it's loaded
-         */
-        ready : function() {
-            this.container.on( 'click', '.wcscSite', this.previewSite );
-        },
-
-        /**
-         * Preview the selected site
-         *
-         * If the site is using a different theme, then reload the entire Customizer with the theme URL parameter
-         * set, so that the Theme Switcher will handle previewing the new theme for us. Otherwise just set the ID
-         * to refresh the Previewer with the current theme and the new site's CSS, etc.
-         *
-         * @param {object} event
-         */
-        previewSite : function( event ) {
-            var previewUrl       = $( this ).data( 'preview-url' ),
-                previewUrlParams = getUrlParams( previewUrl );
-
-            if ( api( 'wcsc_source_site_id' ).get() == previewUrlParams.wcsc_source_site_id ) {
+                api.section( this.section() ).expand();
+
+                currentSite = this.siteCollection.find( { site_id : urlParams.wcsc_source_site_id } );
+
+                if ( currentSite ) {
+                    this.setActiveSite( currentSite );
+                }
+            }
+
+            $( '#wcsc-cloner' ).on( 'wcsc:previewSite', '.wcsc-site', function( event, site ) {
+                control.previewSite( site );
+            } );
+
+            // Setup the top level Site Search View
+            this.view = new wcsc.views.SiteSearch( {
+                parent     : this,
+                collection : this.siteCollection
+            } );
+
+            this.view.render();
+
+            // Initialize the router to allow state to be restored after a full refresh
+            wcsc.router = new wcsc.routers.FilterState( { parent : this } );
+            Backbone.history.start();
+        },
+
+        previewSite : function( site ) {
+            var queryString, routerFragment;
+
+            if ( api( 'wcsc_source_site_id' ).get() == site.get( 'site_id' ) ) {
+                // We're already previewing this site
                 return;
             }
 
-            if ( api.settings.theme.stylesheet === previewUrlParams.theme ) {
-                api( 'wcsc_source_site_id' ).set( previewUrlParams.wcsc_source_site_id );
+            if ( api.settings.theme.stylesheet === site.get( 'theme_slug' ) ) {
+                this.setActiveSite( site );
             } else {
-                window.parent.location = previewUrl;
-            }
+                // We have to do a full refresh when changing themes or other controls won't correlate to the current theme.
+                queryString = $.param( {
+                    'theme'               : site.get( 'theme_slug' ),
+                    'wcsc_source_site_id' : site.get( 'site_id' )
+                } );
+
+                routerFragment      = Backbone.history.getFragment();
+                win.parent.location = wcsc.settings.customizerUrl + '?' + queryString + '#' + routerFragment;
+            }
+        },
+
+        // Set the active site and update the model to reflect the change
+        setActiveSite : function( site ) {
+            var site_id = site.get( 'site_id' );
+
+            this.siteCollection.each( function( _site ) {
+                _site.set( { active : false } );
+            } );
+
+            site.set( { active : true } );
+            api( 'wcsc_source_site_id' ).set( site.get( 'site_id' ) );
         }
     } );
@@ -75 +487 @@
      */
     function getUrlParams( url ) {
-        var match, questionMarkIndex, query,
-            urlParams = {},
-            pl        = /\+/g,  // Regex for replacing addition symbol with a space
-            search    = /([^&=]+)=?([^&]*)/g,
-            decode    = function ( s ) {
-                return decodeURIComponent( s.replace( pl, " " ) );
-            };
+        var questionMarkIndex, query, hashIndex;
+
+        // Strip hash first
+        hashIndex = url.indexOf( '#' );
+
+        if ( hashIndex > -1 ) {
+            url = url.substring( 0, hashIndex );
+        }
 
         questionMarkIndex = url.indexOf( '?' );
 
         if ( -1 === questionMarkIndex ) {
-            return urlParams;
+            return {};
         } else {
             query = url.substring( questionMarkIndex + 1 );
         }
 
-        while ( match = search.exec( query ) ) {
+        return deserializeQueryString( query );
+    }
+
+    /**
+     * Deserialize a query string into an object
+     *
+     * @param queryString
+     * @returns {object}
+     */
+    function deserializeQueryString( queryString ) {
+        var match,
+            urlParams = {},
+            pl        = /\+/g,  // Regex for replacing addition symbol with a space
+            search    = /([^&=]+)=?([^&]*)/g,
+            decode    = function( s ) {
+                return decodeURIComponent( s.replace( pl, " " ) );
+            };
+
+        while ( match = search.exec( queryString ) ) {
             urlParams[ decode( match[ 1 ] ) ] = decode( match[ 2 ] );
         }
@@ -97 +528 @@
         return urlParams;
     }
-} )( window.wp, jQuery );
+})( wp, jQuery, Backbone, window, _wcscSettings );

sites/trunk/wordcamp.org/public_html/wp-content/plugins/wordcamp-site-cloner/wordcamp-site-cloner.php

@@ -1 +1 @@
 <?php
-
-namespace WordCamp\Site_Cloner;
-
-defined( 'WPINC' ) or die();
 
 /*
 Plugin Name: WordCamp Site Cloner
 Description: Allows organizers to clone another WordCamp's theme and custom CSS as a starting point for their site.
-Version:     0.1
+Version:     0.2
 Author:      WordCamp.org
 Author URI:  http://wordcamp.org
@@ -14 +10 @@
 */
 
-// todo if Jetpack_Custom_CSS:get_css is callable, register these, otherwise fatal errors
-
-add_action( 'plugins_loaded',        __NAMESPACE__ . '\get_wordcamp_sites' );
-add_action( 'admin_enqueue_scripts', __NAMESPACE__ . '\register_scripts' );
-add_action( 'admin_menu',            __NAMESPACE__ . '\add_submenu_page' );
-add_action( 'customize_register',    __NAMESPACE__ . '\register_customizer_components' );
+namespace WordCamp\Site_Cloner;
+defined( 'WPINC' ) or die();
+
+const PRIME_SITES_CRON_ACTION      = 'wcsc_prime_sites';
+const WORDCAMP_SITES_TRANSIENT_KEY = 'wcsc_sites';
+
+/**
+ * Initialization
+ */
+function initialize() {
+    // We rely on the Custom CSS module being available
+    if ( ! class_exists( '\Jetpack' ) ) {
+        return;
+    }
+
+    add_action( 'admin_enqueue_scripts', __NAMESPACE__ . '\register_scripts'               );
+    add_action( 'admin_menu',            __NAMESPACE__ . '\add_submenu_page'               );
+    add_action( 'customize_register',    __NAMESPACE__ . '\register_customizer_components' );
+    add_action( 'rest_api_init',         __NAMESPACE__ . '\register_api_endpoints'         );
+    add_action( PRIME_SITES_CRON_ACTION, __NAMESPACE__ . '\prime_wordcamp_sites'           );
+
+    if ( ! wp_next_scheduled( PRIME_SITES_CRON_ACTION ) ) {
+        wp_schedule_event( time(), 'daily', PRIME_SITES_CRON_ACTION );
+    }
+}
+add_action( 'plugins_loaded', __NAMESPACE__ . '\initialize' ); // After Jetpack has loaded
 
 /**
@@ -29 +45 @@
         plugin_dir_url( __FILE__ ) . 'wordcamp-site-cloner.css',
         array(),
-        1
+        2
     );
 
@@ -35 +51 @@
         'wordcamp-site-cloner',
         plugin_dir_url( __FILE__ ) . 'wordcamp-site-cloner.js',
-        array( 'jquery', 'customize-controls' ),
-        1,
+        array( 'jquery', 'customize-controls', 'wp-backbone' ),
+        2,
         true
     );
+
+    wp_localize_script(
+        'wordcamp-site-cloner',
+        '_wcscSettings',
+        array(
+            'apiUrl'        => get_rest_url( null, '/wordcamp-site-cloner/v1/sites/' ),
+            'customizerUrl' => admin_url( 'customize.php' ),
+            'themes'        => get_available_themes(),
+        )
+    );
+}
+
+/**
+ * Get all of the available themes
+ *
+ * @return array
+ */
+function get_available_themes() {
+    /** @var \WP_Theme $theme */
+    $available_themes = array();
+    $raw_themes       = wp_get_themes( array( 'allowed' => true ) );
+
+    foreach ( $raw_themes as $theme ) {
+        $theme_name         = $theme->display( 'Name' );
+        $available_themes[] = array(
+            'slug' => $theme->get_stylesheet(),
+            'name' => $theme_name ?: $theme->get_stylesheet()
+        );
+    }
+
+    return $available_themes;
 }
 
@@ -53 +100 @@
         __( 'Clone Another WordCamp', 'wordcamporg' ),
         'switch_themes',
-        'customize.php?autofocus[panel]=wordcamp_site_cloner'
+        'customize.php?autofocus[section]=wcsc_sites'
     );
 }
@@ -64 +111 @@
 function register_customizer_components( $wp_customize ) {
     require_once( __DIR__ . '/includes/source-site-id-setting.php' );
-    require_once( __DIR__ . '/includes/sites-section.php' );
     require_once( __DIR__ . '/includes/site-control.php' );
-
-    $wp_customize->register_control_type( __NAMESPACE__ . '\Site_Control' );
 
     $wp_customize->add_setting( new Source_Site_ID_Setting(
         $wp_customize,
         'wcsc_source_site_id',
-        array()
+        array( 'capability' => 'switch_themes' )
     ) );
 
-    $wp_customize->add_panel(
-        'wordcamp_site_cloner',
-        array(
-            'type'        => 'wcscPanel',
-            'title'       => __( 'Clone Another WordCamp', 'wordcamporg' ),
-            'description' => __( "Clone another WordCamp's theme and custom CSS as a starting point for your site.", 'wordcamporg' ),
-        )
-    );
-
-    $wp_customize->add_section( new Sites_Section(
-        $wp_customize,
+    $wp_customize->add_section(
         'wcsc_sites',
         array(
-            'panel' => 'wordcamp_site_cloner',
-            'title' => __( 'WordCamp Sites', 'wordcamporg' ),
+            'title'      => __( 'Clone Another WordCamp', 'wordcamporg' ),
+            'capability' => 'switch_themes'
+        )
+    );
+
+    $wp_customize->add_control( new Site_Control(
+        $wp_customize,
+        'wcsc_site_search',
+        array(
+            'type'     => 'wcscSearch',
+            'label'    => __( 'Search', 'wordcamporg' ),
+            'settings' => 'wcsc_source_site_id',
+            'section'  => 'wcsc_sites'
         )
     ) );
-
-    foreach( get_wordcamp_sites() as $wordcamp ) {
-        if ( get_current_blog_id() == $wordcamp['site_id'] ) {
-            continue;
-        }
-
-        $wp_customize->add_control( new Site_Control(
-            $wp_customize,
-            'wcsc_site_id_' . $wordcamp['site_id'],
-            array(
-                'type'           => 'wcscSite',                      // todo should be able to set this in control instead of here, but if do that then control contents aren't rendered
-                'site_id'        => $wordcamp['site_id'],
-                'site_name'      => $wordcamp['name'],
-                'theme_slug'     => $wordcamp['theme_slug'],
-                'screenshot_url' => $wordcamp['screenshot_url'],
-            )
-        ) );
-    }
-}
-
-/**
- * Get required data for relevant WordCamp sites
- *
- * This isn't actually used until register_customizer_components(), but it's called during `plugins_loaded` in
- * order to prime the cache. That has to be done before `setup_theme`, because the Theme Switcher will override
- * the current theme when `?theme=` is present in the URL parameters, and it's safer to just avoid that than to
- * muck with the internals and try to reverse it on the fly.
+}
+
+/**
+ * Register the REST API endpoint for the Customizer to use to retriever the site list
+ */
+function register_api_endpoints() {
+    if ( ! current_user_can( 'switch_themes' ) ) {
+        return;
+
+        // todo - use `permission_callback` instead
+    }
+
+    register_rest_route(
+        'wordcamp-site-cloner/v1',
+        '/sites',
+        array(
+            'methods'  => 'GET',
+            'callback' => __NAMESPACE__ . '\sites_endpoint',
+        )
+    );
+}
+
+/**
+ * Handle the response for the Sites endpoint
+ *
+ * This always pulls cached data, because Central needs to be the site generating it. See get_wordcamp_sites().
  *
  * @return array
  */
+function sites_endpoint() {
+    $sites        = array();
+    $cached_sites = get_site_transient( WORDCAMP_SITES_TRANSIENT_KEY );
+
+    if ( $cached_sites ) {
+        unset( $cached_sites[ get_current_blog_id() ] );
+
+        $sites = array_values( $cached_sites );
+    }
+
+    return $sites;
+}
+
+/**
+ * Prime the cache of cloneable WordCamp sites
+ *
+ * This is called via WP Cron.
+ *
+ * @todo - Reintroduce batching from `1112.3.diff` to get more than 500 sites
+ */
+function prime_wordcamp_sites() {
+    // This only needs to run on a single site, then the whole network can use the cached result
+    if ( ! is_main_site() ) {
+        return;
+    }
+
+    // Keep the cache longer than needed, just to be sure that it doesn't expire before the cron job runs again
+    set_site_transient( WORDCAMP_SITES_TRANSIENT_KEY, get_wordcamp_sites(), DAY_IN_SECONDS * 2 );
+}
+
+/**
+ * Get WordCamp sites that are suitable for cloning
+ *
+ * @return array
+ */
 function get_wordcamp_sites() {
-    require_once( WP_PLUGIN_DIR . '/wcpt/wcpt-wordcamp/wordcamp-loader.php' );
-
-    // plugins_loaded is runs on every screen, but we only need this when loading the Customizer and Previewer
-    if ( 'customize.php' != basename( $_SERVER['SCRIPT_NAME'] ) && empty( $_REQUEST['wp_customize'] ) ) {
+    /*
+     * The post statuses that \WordCamp_Loader::get_public_post_statuses() returns are only created on Central,
+     * because the plugin isn't active on any other sites.
+     */
+    if ( ! is_main_site() ) {
         return array();
     }
 
-    $transient_key = 'wcsc_sites';
-
-    if ( $sites = get_site_transient( $transient_key ) ) {
-        return $sites;
+    if ( ! \Jetpack::is_module_active( 'custom-css' ) ) {
+        \Jetpack::activate_module( 'custom-css', false, false );
     }
 
     switch_to_blog( BLOG_ID_CURRENT_SITE ); // central.wordcamp.org
 
-    $sites = array();
-    $wordcamps = get_posts( array(
-        'post_type'      => 'wordcamp',
+    $wordcamp_query = new \WP_Query( array(
+        'post_type'      => WCPT_POST_TYPE_ID,
         'post_status'    => \WordCamp_Loader::get_public_post_statuses(),
-        'posts_per_page' => 125, // todo temporary workaround until able to add filters to make hundreds of sites manageable
+        'posts_per_page' => 500,
         'meta_key'       => 'Start Date (YYYY-mm-dd)',
         'orderby'        => 'meta_value_num',
+        'order'          => 'DESC',
 
         'meta_query' => array(
             array(
+                // New sites won't have finished designs, so ignore them
                 'key'     => 'Start Date (YYYY-mm-dd)',
                 'value'   => strtotime( 'now - 1 month' ),
                 'compare' => '<'
-            ),
+            )
         ),
     ) );
 
-    foreach( $wordcamps as $wordcamp ) {
-        $site_id  = get_wordcamp_site_id( $wordcamp );
-        $site_url = get_post_meta( $wordcamp->ID, 'URL', true );
-
-        if ( ! $site_id || ! $site_url ) {
+    $sites = get_filtered_wordcamp_sites( $wordcamp_query->get_posts() );
+
+    uasort( $sites, __NAMESPACE__ . '\sort_sites_by_year' );
+
+    restore_current_blog();
+
+    return $sites;
+}
+
+/**
+ * Filter out sites that aren't relevant to the Cloner
+ *
+ * @param array $wordcamps
+ *
+ * @return array
+ */
+function get_filtered_wordcamp_sites( $wordcamps ) {
+    $sites = array();
+
+    foreach ( $wordcamps as $wordcamp ) {
+        $site_id    = get_wordcamp_site_id( $wordcamp );
+        $site_url   = get_post_meta( $wordcamp->ID, 'URL',                     true );
+        $start_date = get_post_meta( $wordcamp->ID, 'Start Date (YYYY-mm-dd)', true );
+
+        if ( ! $site_id || ! $site_url || ! $start_date ) {
             continue;
         }
@@ -165 +264 @@
         switch_to_blog( $site_id );
 
-        $sites[] = array(
-            'site_id'        => $site_id,
-            'name'           => get_wordcamp_name(),
-            'theme_slug'     => get_stylesheet(),
-            'screenshot_url' => get_screenshot_url( $site_url ),
-        );
+        /*
+         * Sites with Coming Soon enabled probably don't have a finished design yet, so there's no point in
+         * cloning it.
+         */
+        if ( ! coming_soon_plugin_enabled() ) {
+            $preprocessor = \Jetpack_Custom_CSS::get_preprocessor();
+            $preprocessor = isset( $preprocessor[ 'name' ] ) ? $preprocessor[ 'name' ] : 'none';
+
+            $sites[ $site_id ] = array(
+                'site_id'          => $site_id,
+                'name'             => get_wordcamp_name(),
+                'theme_slug'       => get_stylesheet(),
+                'screenshot_url'   => get_screenshot_url( $site_url ),
+                'year'             => date( 'Y', $start_date ),
+                'css_preprocessor' => $preprocessor,
+            );
+        }
 
         restore_current_blog();
     }
 
-    restore_current_blog();
-
-    set_site_transient( $transient_key, $sites, DAY_IN_SECONDS );
-
     return $sites;
+}
+
+/**
+ * Determine if the Coming Soon plugin is enabled for the current site
+ *
+ * @return bool
+ */
+function coming_soon_plugin_enabled() {
+    global $WCCSP_Settings;
+    $enabled = false;
+
+    if ( ! is_callable( 'WCCSP_Settings::get_settings' ) ) {
+        return $enabled;
+    }
+
+    // We may need to instantiate the class if this is the first time calling this function
+    if ( ! is_a( $WCCSP_Settings, 'WCCSP_Settings' ) ) {
+        $WCCSP_Settings = new \WCCSP_Settings();
+    }
+
+    $settings = $WCCSP_Settings->get_settings();
+
+    if ( isset( $settings[ 'enabled' ] ) && 'on' === $settings[ 'enabled' ] ) {
+        $enabled = true;
+    }
+
+    return $enabled;
 }
 
@@ -196 +329 @@
     return apply_filters( 'wcsc_site_screenshot_url', $screenshot_url );
 }
+
+/**
+ * Sort arrays by the year
+ *
+ * @param array $site_a
+ * @param array $site_b
+ *
+ * @return int
+ */
+function sort_sites_by_year( $site_a, $site_b ) {
+    if ( $site_a[ 'year' ] === $site_b[ 'year' ] ) {
+        return 0;
+    }
+
+    return ( $site_a[ 'year' ] < $site_b[ 'year' ] ? 1 : -1 );
+}