/p/pretty-plugins/themes/3-eight/theme.js
JavaScript | 663 lines | 356 code | 131 blank | 176 comment | 58 complexity | 5dae2f49f49d074192298566123bee64 MD5 | raw file
Possible License(s): Apache-2.0, GPL-2.0, LGPL-3.0, LGPL-2.1, AGPL-1.0, BSD-3-Clause, MIT, GPL-3.0, MPL-2.0-no-copyleft-exception
- /* global _wpPluginSettings, confirm */
- window.wp = window.wp || {};
-
- ( function($) {
-
- // Set up our namespace...
- var plugins, l10n;
- plugins = wp.plugins = wp.plugins || {};
-
- // Store the plugin data and settings for organized and quick access
- // plugins.data.settings, plugins.data.plugins, plugins.data.l10n
- plugins.data = _wpPluginsSettings;
- l10n = plugins.data.l10n;
- categories = plugins.data.categories;
-
- // Setup app structure
- _.extend( plugins, { model: {}, view: {}, routes: {}, router: {}, template: wp.template });
-
- plugins.model = Backbone.Model.extend({});
-
- // Main view controller for plugins.php
- // Unifies and renders all available views
- plugins.view.Appearance = wp.Backbone.View.extend({
-
- el: '#wpbody-content .wrap .plugin-browser',
-
- window: $( window ),
- // Pagination instance
- page: 0,
-
- // Sets up a throttler for binding to 'scroll'
- initialize: function() {
- // Scroller checks how far the scroll position is
- _.bindAll( this, 'scroller' );
-
- // Bind to the scroll event and throttle
- // the results from this.scroller
- this.window.bind( 'scroll', _.throttle( this.scroller, 300 ) );
- },
-
- // Main render control
- render: function() {
- // Setup the main plugin view
- // with the current plugin collection
- this.view = new plugins.view.Plugins({
- collection: this.collection,
- parent: this
- });
-
- // Render categories form.
- this.categories();
-
- // Render search form.
- this.search();
-
- // Render and append
- this.view.render();
- this.$el.empty().append( this.view.el ).addClass('rendered');
- this.$el.append( '<br class="clear"/>' );
- },
-
- // Search input and view
- // for current plugin collection
- categories: function() {
- var view,
- self = this;
-
- // Don't render the categories if there is only one plugin
- if ( plugins.data.plugins.length === 1 ) {
- return;
- }
-
- view = new plugins.view.Categories({ collection: self.collection });
- view_wp_menu = new plugins.view.CategoriesWpMenu({ collection: self.collection });
-
- // Render and append before plugins list
- view.render();
- $('#wpbody .plugin-browser')
- .before( view.el );
- },
-
- // Search input and view
- // for current plugin collection
- search: function() {
- var view,
- self = this;
-
- // Don't render the search if there is only one plugin
- if ( plugins.data.plugins.length === 1 ) {
- return;
- }
-
- view = new plugins.view.Search({ collection: self.collection });
-
- view.render();
- $('.wp-filter')
- .append( '<div class="search-form"></div>' );
- $('.wp-filter .search-form')
- .append( view.el );
- },
-
- // Checks when the user gets close to the bottom
- // of the mage and triggers a plugin:scroll event
- scroller: function() {
- var self = this,
- bottom, threshold;
-
- bottom = this.window.scrollTop() + self.window.height();
- threshold = self.$el.offset().top + self.$el.outerHeight( false ) - self.window.height();
- threshold = Math.round( threshold * 0.9 );
-
- if ( bottom > threshold ) {
- this.trigger( 'plugin:scroll' );
- }
- }
- });
-
- // Set up the Collection for our plugin data
- plugins.Collection = Backbone.Collection.extend({
-
- model: plugins.model,
-
- // Search terms
- terms: '',
-
- // Controls searching on the current plugin collection
- // and triggers an update event
- doSearch: function( value ) {
- //reset category to "all" on search
- $('.plugin-categories .plugin-category').removeClass('current');
- $('[data-category="all"]').addClass('current');
-
- // Don't do anything if we've already done this search
- // Useful because the Search handler fires multiple times per keystroke
- if ( this.terms === value ) {
- return;
- }
-
- // Updates terms with the value passed
- this.terms = value;
-
- // If we have terms, run a search...
- if ( this.terms.length > 0 ) {
- this.search( this.terms );
- }
-
- // If search is blank, show all plugins
- // Useful for resetting the views when you clean the input
- if ( this.terms === '' ) {
- this.reset( plugins.data.plugins );
- }
-
- // Trigger an 'update' event
- this.trigger( 'update' );
- },
-
- // Controls viewing plugins from category on the current plugin collection
- // and triggers an update event
- doCategory: function( value ) {
- //Sets up class for active category button
- $('#plugin-search-input').val('');
- $('.plugin-categories .plugin-category').removeClass('current');
- $('[data-category="'+ value + '"]').addClass('current');
- $('#toplevel_page_pretty-plugins li').removeClass('current');
-
- // If we have terms, run a search...
- if ( value.length > 0 ) {
- this.category( value );
-
- if(value == 'all')
- $('#toplevel_page_pretty-plugins li a.current').parent().addClass('current');
- else
- $('#toplevel_page_pretty-plugins li a[href$="category\\='+value+'"]').parent().addClass('current');
- }
-
- // If search is blank, show all plugins
- // Useful for resetting the views when you clean the input
- if ( value === '' ) {
- this.reset( plugins.data.plugins );
- }
-
- // Trigger an 'update' event
- this.trigger( 'update' );
- },
-
- // Performs a search within the collection
- // @uses RegExp
- search: function( term ) {
- var match, results, haystack, name, description;
-
- // Start with a full collection
- this.reset( plugins.data.plugins, { silent: true } );
-
- // 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' );
-
- // Find results
- // _.filter and .test
- results = this.filter( function( data ) {
- name = data.get( 'Name' ).replace( /(<([^>]+)>)/ig, '' );
- description = data.get( 'Description' ).replace( /(<([^>]+)>)/ig, '' );
-
- haystack = _.union( [ name, description ] );
-
- return match.test( haystack );
- });
-
- this.reset( results );
- },
-
- // Picks categories within the collection
- category: function( term ) {
- var results;
-
- // Start with a full collection
- this.reset( plugins.data.plugins, { silent: true } );
-
- // Find results
- // _.filter and .test
- results = this.filter( function( data ) {
- if(term == 'all' || term == 'active' || term == 'inactive') {
- if(term == 'all')
- return data;
- else if(term == 'active' && data.attributes.isActive == true)
- return data;
- else if(term == 'inactive' && data.attributes.isActive == false)
- return data;
- }
- else if($.inArray( term, data.attributes.Categories ) !== -1)
- return data;
- });
-
- this.reset( results );
- },
-
- // Paginates the collection with a helper method
- // that slices the collection
- paginate: function( instance ) {
- var collection = this;
- instance = instance || 0;
-
- // Plugins per instance are set at 15
- collection = _( collection.rest( 15 * instance ) );
- collection = _( collection.first( 15 ) );
-
- return collection;
- }
- });
-
- // This is the view that controls each plugin item
- // that will be displayed on the screen
- plugins.view.Plugin = wp.Backbone.View.extend({
-
- // Wrap plugin data on a div.plugin element
- className: 'plugin-card',
-
- events: {
- 'click .show-more-button': 'showMore'
- },
-
- // Reflects which plugin view we have
- // 'grid' (default) or 'detail'
- state: 'grid',
-
- // The HTML template for each element to be rendered
- html: plugins.template( 'plugin' ),
-
- touchDrag: false,
-
- render: function() {
- var data = this.model.toJSON();
-
- // Render plugins using the html template
- this.$el.html( this.html( data ) ).attr({
- tabindex: 0,
- 'aria-describedby' : data.id + '-action ' + data.id + '-name'
- });
-
- // Renders active plugin styles
- this.activePlugin();
-
- if ( this.model.get( 'displayAuthor' ) ) {
- this.$el.addClass( 'display-author' );
- }
- },
-
- // Adds a class to the currently active plugin
- // and to the overlay in detailed view mode
- activePlugin: function() {
- if ( this.model.get( 'active' ) ) {
- this.$el.addClass( 'active' );
- }
- },
- showMore: function( event ) {
- event.preventDefault();
-
- this.$el.find('.plugin-content').removeClass('plugin-show-more');
- },
- });
-
- // Controls the rendering of div.plugins,
- // a wrapper that will hold all the plugin elements
- plugins.view.Plugins = wp.Backbone.View.extend({
-
- className: 'plugins',
- $overlay: $( 'div.plugin-overlay' ),
-
- // Number to keep track of scroll position
- // while in plugin-overlay mode
- index: 0,
-
- // The plugin count element
- count: $( '.plugin-count' ),
-
- initialize: function( options ) {
- var self = this;
-
- // Set up parent
- this.parent = options.parent;
-
- // Set current view to [grid]
- this.setView( 'grid' );
-
- // Move the active plugin to the beginning of the collection
- self.currentPlugin();
-
- // When the collection is updated by user input...
- this.listenTo( self.collection, 'update', function() {
- self.parent.page = 0;
- self.currentPlugin();
- self.render( this );
- });
-
- this.listenTo( this.parent, 'plugin:scroll', function() {
- self.renderPlugins( self.parent.page );
- });
-
- // Bind keyboard events.
- $('body').on( 'keyup', function( event ) {
- if ( ! self.overlay ) {
- return;
- }
-
- // Pressing the right arrow key fires a plugin:next event
- if ( event.keyCode === 39 ) {
- self.overlay.nextPlugin();
- }
-
- // Pressing the left arrow key fires a plugin:previous event
- if ( event.keyCode === 37 ) {
- self.overlay.previousPlugin();
- }
-
- // Pressing the escape key fires a plugin:collapse event
- if ( event.keyCode === 27 ) {
- self.overlay.collapse( event );
- }
- });
- },
-
- // Manages rendering of plugin pages
- // and keeping plugin count in sync
- render: function() {
- // Clear the DOM, please
- this.$el.html( '' );
-
- // Generate the plugins
- // Using page instance
- this.renderPlugins( this.parent.page );
-
- // Display a live plugin count for the collection
- this.count.text( this.collection.length );
- },
-
- // Iterates through each instance of the collection
- // and renders each plugin module
- renderPlugins: function( page ) {
- var self = this;
-
- self.instance = self.collection.paginate( page );
-
- // If we have no more plugins bail
- if ( self.instance.length === 0 ) {
- return;
- }
-
- // Loop through the plugins and setup each plugin view
- self.instance.each( function( plugin ) {
- self.plugin = new plugins.view.Plugin({
- model: plugin
- });
-
- // Render the views...
- self.plugin.render();
- // and append them to div.plugins
- self.$el.append( self.plugin.el );
- });
-
- this.parent.page++;
- },
-
- // Grabs current plugin and puts it at the beginning of the collection
- currentPlugin: function() {
- var self = this,
- current;
-
- current = self.collection.findWhere({ active: true });
-
- // Move the active plugin to the beginning of the collection
- if ( current ) {
- self.collection.remove( current );
- self.collection.add( current, { at:0 } );
- }
- },
-
- // Sets current view
- setView: function( view ) {
- return view;
- },
- });
-
- // Search input view controller.
- plugins.view.Search = wp.Backbone.View.extend({
-
- tagName: 'input',
- className: 'plugin-search',
- id: 'plugin-search-input',
-
- attributes: {
- placeholder: l10n.searchPlaceholder,
- type: 'search'
- },
-
- events: {
- 'input': 'search',
- 'keyup': 'search',
- 'change': 'search',
- 'search': 'search'
- },
-
- // Runs a search on the plugin collection.
- search: function( event ) {
- // Clear on escape.
- if ( event.type === 'keyup' && event.which === 27 ) {
- event.target.value = '';
- }
-
- this.collection.doSearch( event.target.value );
-
- // Update the URL hash
- if ( event.target.value ) {
- plugins.router.navigate( plugins.router.baseUrl( '&search=' + event.target.value ), { replace: true } );
- } else {
- plugins.router.navigate( plugins.router.baseUrl( '' ), { replace: true } );
- }
- }
- });
-
- // Categories input view controller.
- plugins.view.Categories = wp.Backbone.View.extend({
-
- tagName: 'div',
- className: 'wp-filter plugin-categories',
-
- events: {
- 'click a': 'categories'
- },
-
- render: function() {
- var el = $(this.el);
- el.append( $( '.filter-count' ) );
-
- el.append( $.parseHTML( '<span style="display:none;" class="plugin-categories-label">' + l10n.categories + '</span>' ) );
- el.append( '<ul class="filter-links"></ul>' );
- var el_ul = el.find('.filter-links');
- $.each(categories, function( index, value ) {
- var add_class = '';
- if(index == 'all')
- add_class = ' current';
-
- el_ul.append( $.parseHTML( '<li><a data-category="'+ index +'" class="plugin-category '+ add_class +'" href="#">' + value + '</a></li>' ) );
- });
- },
-
- // Runs a search on the plugin collection.
- categories: function( event ) {
- event.preventDefault();
-
- // Update the URL hash
- if ( event.target.dataset.category ) {
- this.collection.doCategory( event.target.dataset.category );
- plugins.router.navigate( plugins.router.baseUrl( '&category=' + event.target.dataset.category ), { replace: true } );
- }
- }
- });
-
- // Categories input view controller.
- plugins.view.CategoriesWpMenu = wp.Backbone.View.extend({
-
- el: 'li.toplevel_page_pretty-plugins',
-
- events: {
- 'click a': 'categories'
- },
-
- // Runs a search on the plugin collection.
- categories: function( event ) {
- event.preventDefault();
-
- // Update the URL hash
- if ( event.target.href ) {
- var category = this.getUrlParameter(event.target.href);
- if('category' in category)
- category = category['category'];
- else
- category = 'all';
-
- if ( category ) {
- this.collection.doCategory( category );
- plugins.router.navigate( plugins.router.baseUrl( '&category=' + category ), { replace: true } );
- }
- }
- },
-
- getUrlParameter: function(url){
- var vars = [], hash;
- var hashes = url.slice(url.indexOf('?') + 1).split('&');
- for(var i = 0; i < hashes.length; i++)
- {
- hash = hashes[i].split('=');
- vars.push(hash[0]);
- vars[hash[0]] = hash[1];
- }
- return vars;
- }
- });
-
- // Sets up the routes events for relevant url queries
- // Listens to [plugin] and [search] params
- plugins.routes = Backbone.Router.extend({
-
- initialize: function() {
- this.routes = _.object([
- ]);
- },
-
- baseUrl: function( url ) {
- return plugins.data.settings.root + url;
- }
- });
-
- // Execute and setup the application
- plugins.Run = {
- init: function() {
- // Initializes the blog's plugin library view
- // Create a new collection with data
- this.plugins = new plugins.Collection( plugins.data.plugins );
-
- // Set up the view
- this.view = new plugins.view.Appearance({
- collection: this.plugins
- });
-
- this.render();
- },
-
- render: function() {
- // Render results
- this.view.render();
- this.routes();
-
- // Set the initial search
- if ( 'undefined' !== typeof plugins.data.settings.search && '' !== plugins.data.settings.search ){
- $( '.plugin-search' ).val( plugins.data.settings.search );
- this.plugins.doSearch( plugins.data.settings.search );
- }
-
- // Set the initial category
- if ( 'undefined' !== typeof plugins.data.settings.category && '' !== plugins.data.settings.category ){
- this.plugins.doCategory( plugins.data.settings.category );
- }
-
- // Start the router if browser supports History API
- if ( window.history && window.history.pushState ) {
- // Calls the routes functionality
- Backbone.history.start({ pushState: true, silent: true });
- }
- },
-
- routes: function() {
- // Bind to our global thx object
- // so that the object is available to sub-views
- plugins.router = new plugins.routes();
- }
- };
-
- // Ready...
- jQuery( document ).ready(
-
- // Bring on the plugins
- _.bind( plugins.Run.init, plugins.Run )
-
- );
-
- })( jQuery );
-
- /*
-
- jQuery(document).ready( function($) {
- // Integrate with WP submenu
-
- $('#toplevel_page_pretty-plugins li a').click(function(e) {
- e.preventDefault();
-
- var category = get_url_parameter($(this).attr('href'));
- if(typeof category['category'] === "undefined")
- category = 'all';
- else
- category = category['category'];
- console.log(plugins);
- // Update the URL hash
- if ( category ) {
- _.bind( plugins.doCategory, category );
- //wp.plugins.view.Categories.collection.doCategory( category );
- wp.plugins.router.navigate( wp.plugins.router.baseUrl( '&category=' + category ), { replace: true } );
- }
-
- return false;
- });
- });
-
- // Align plugin browser thickbox
- var tb_position;
- jQuery(document).ready( function($) {
- tb_position = function() {
- var tbWindow = $('#TB_window'),
- width = $(window).width(),
- H = $(window).height(),
- W = ( 1040 < width ) ? 1040 : width,
- adminbar_height = 0;
-
- if ( $('body.admin-bar').length ) {
- adminbar_height = parseInt( jQuery('#wpadminbar').css('height'), 10 );
- }
-
- if ( tbWindow.size() ) {
- tbWindow.width( W - 50 ).height( H - 45 - adminbar_height );
- $('#TB_iframeContent').width( W - 50 ).height( H - 75 - adminbar_height );
- tbWindow.css({'margin-left': '-' + parseInt( ( ( W - 50 ) / 2 ), 10 ) + 'px'});
- if ( typeof document.body.style.maxWidth !== 'undefined' ) {
- tbWindow.css({'top': 20 + adminbar_height + 'px', 'margin-top': '0'});
- }
- }
- };
-
- $(window).resize(function(){ tb_position(); });
- });
- */