ulaulaman
/
eduinaf-ajax-filter-posts
mirror of https://github.com/ulaulaman/eduinaf-ajax-filter-posts.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Added loading textdomain. Added NL textdomain

This commit is contained in:
Robbert de Kuiper 2017-03-31 12:46:24 +02:00
parent 4169abe1bd
commit d1769f2f9c
7 changed files with 209 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ajax-filter-posts.php
View File

@ -9,14 +9,14 @@
* that starts the plugin.
*
* @link http://www.robbertdekuiper.com
* @since 1.0.0
* @since 0.1
* @package Ajax_Filter_Posts
*
* @wordpress-plugin
* Plugin Name: Ajax filter posts
* Plugin URI: http://www.robbertdekuiper.com
* Description: This is a short description of what the plugin does. It's displayed in the WordPress admin area.
* Version: 1.0.0
* Version: 0.1
* Author: Robbert de Kuiper
* Author URI: http://www.robbertdekuiper.com
* License: GPL-2.0+
@ -43,7 +43,7 @@ require plugin_dir_path( __FILE__ ) . 'class-ajax-filter-posts.php';
* then kicking off the plugin from this point in the file does
* not affect the page life cycle.
*
* @since 1.0.0
* @since 0.1
*/
function run_ajax_filter_posts() {

12
assets/css/ajax-filter-posts.css
View File

@ -302,6 +302,18 @@
background: #999;
}
.ajax-posts__status {
margin: 1rem auto;
background: rgba(255, 0, 0, 0.53);
color: white;
padding: 0.5rem 1rem;
border-radius: 10px;
width: 80%;
max-width: 400px;
text-align: center;
font-weight: bold;
}
.ajax-posts .ajax-posts__toggle-filter {
margin-left: 0;
}

76
assets/js/ajax-filter-posts.js
View File

@ -2,6 +2,8 @@
var container = document.querySelector('.js-container-async');
var filterTogglers = container.getElementsByClassName('js-toggle-filters');
var content = container.querySelector('.ajax-posts__posts');
var status = container.querySelector('.ajax-posts__status');
var queryParams = {
'page' : null,
'tax' : {},
@ -9,6 +11,9 @@
'postType': 'post',
}
/**
* Set initial params, and add event listeners
*/
function init() {
if (container) {
// Set the amoun of post per page
@ -41,6 +46,11 @@
}
}
/**
* Update query and get posts after filter change
*
* @param NodeElement filter Clicked filter
*/
function handleFilterEvent(filter) {
if (!filter.classList.contains('is-active')) {
@ -57,11 +67,19 @@
getAJAXPosts({reset: true});
}
/**
* Get next page of posts
*
* @param NodeElement button Clicked load more button
*/
function handleLoadMoreEvent(button){
updateQueryParams({ page: parseInt(button.dataset.page, 10) })
getAJAXPosts({reset: false});
}
/**
* Reset filters to empty values
*/
function resetFilters() {
// Convert nodeList to array to prevent fail on for each
var activeFilters = Array.prototype.slice.call(container.querySelectorAll('a[data-filter].is-active'));
@ -77,10 +95,19 @@
getAJAXPosts({reset: true});
}
/**
* Toggle the filter class.
* Called via event listeners
*/
function toggleFilters() {
container.classList.toggle('is-expanded-filters');
}
/**
* Update te query parameters based on the filter change
*
* @param Array params params that will be changed
*/
function updateQueryParams(params) {
queryParams.page = params.page;
@ -108,6 +135,21 @@
}
}
/**
* Show the Error Reponse div
*/
function showResponseMessage() {
status.style.display = 'block';
status.scrollIntoView({behavior: "smooth"});
}
/**
* Show the Error Reponse div
*/
function hideResponseMessage() {
status.style.display = 'none';
}
/**
* Get new posts via Ajax
*
@ -117,9 +159,6 @@
*/
function getAJAXPosts(args) {
var content = container.querySelector('.ajax-posts__posts');
var status = container.querySelector('.ajax-posts__status');
// Set status to querying
container.classList.add('is-waiting');
@ -135,17 +174,25 @@
if (loadMoreButton) {
content.removeChild(loadMoreButton);
}
var response = JSON.parse(this.response).data;
var response = JSON.parse(this.response);
if (this.status === 200) {
if (args.reset){
content.innerHTML = response.content;
// If we have a succesfull query
if (response.success) {
// Hide error status button
hideResponseMessage();
// If we have to remove the show more button
if (args.reset) {
content.innerHTML = response.data.content;
} else {
content.innerHTML += response.data.content;
}
} else {
content.innerHTML += response.content;
status.innerHTML = response.data;
showResponseMessage();
}
}
else {
status.innerHTML = response.message;
} else {
status.innerHTML = filterPosts.serverErrorMessage;
showResponseMessage();
}
// Resolve status
container.classList.remove('is-waiting');
@ -153,6 +200,8 @@
request.ontimeout = function() {
status.innerHTML = filterPosts.timeoutMessage;
showResponseMessage();
container.classList.remove('is-waiting');
}
request.send(objectToQueryString({
@ -203,10 +252,13 @@
*
* Boiled down from jQuery
*
* WordPress Ajax post request doesn't accept JSON only form-urlencoded!
* WordPress Ajax post request doesn't accept JSON, only form-urlencoded!
* Took me a while to get...
*
* Although seems not to be totally true:
* http://wordpress.stackexchange.com/questions/177554/allowing-admin-ajax-php-to-receive-application-json-instead-of-x-www-form-url
*
* But in this case we just convert the params object to a url encoded string, like our friend and foe jQuery does.
*
*/
function objectToQueryString(a) {

27
class-ajax-filter-posts.php
View File

@ -7,24 +7,21 @@
* public-facing side of the site and the admin area.
*
* @link http://www.robbertdekuiper.com
* @since 1.0.0
* @since 0.1
*
* @package Ajax_Filter_Posts
* @subpackage Ajax_Filter_Posts/includes
*/
/**
* The core plugin class.
*
* This is used to define internationalization, admin-specific hooks, and
* public-facing site hooks.
* The plugin logic lives here
*
* Also maintains the unique identifier of this plugin as well as the current
* version of the plugin.
*
* @since 1.0.0
* @since 0.1
* @package Ajax_Filter_Posts
* @subpackage Ajax_Filter_Posts/includes
* @author Robbert de Kuiper <mail@robbertdekuiper.com>
*/
class Ajax_Filter_Posts {
@ -39,7 +36,7 @@ class Ajax_Filter_Posts {
/**
* The current version of the plugin.
*
* @var string $version The current version of the plugin.
* @var String $version The current version of the plugin.
*/
protected $version;
@ -47,21 +44,26 @@ class Ajax_Filter_Posts {
* Define the core functionality of the plugin.
*
* Set the plugin name and the plugin version that can be used throughout the plugin.
* Load the dependencies, define the locale, and set the hooks for the admin area and
* the public-facing side of the site.
* Load the dependencies, define the locale, and set the hooks.
*
*/
public function __construct() {
$this->plugin_name = 'ajax-filter-posts';
$this->version = '0.1';
add_action( 'plugins_loaded', [$this, 'load_textdomain'] );
add_action( 'wp_enqueue_scripts', [$this,'add_scripts'] );
add_action('wp_ajax_process_filter_change', [$this, 'process_filter_change']);
add_action('wp_ajax_nopriv_process_filter_change', [$this, 'process_filter_change']);
add_shortcode( 'ajax_filter_posts', [$this, 'create_shortcode']);
}
/**
* Set the plugins language domain
*/
public function load_textdomain() {
load_muplugin_textdomain( 'ajax-filter-posts', basename( dirname( __FILE__ )) . '/languages' );
}
/**
* Load the required assets for this plugin.
*
@ -72,7 +74,8 @@ class Ajax_Filter_Posts {
wp_localize_script( 'ajax-filter', 'filterPosts', array(
'nonce' => wp_create_nonce( 'filter-posts-nonce' ),
'ajaxUrl' => admin_url( 'admin-ajax.php' ),
'timeoutMessage' => __('Something went wrong, please try again later.', $this->plugin_name),
'timeoutMessage' => __('It took to long the get the posts. Please reload the page and try again.', 'ajax-filter-posts'),
'serverErrorMessage' => __('Got no response. Please reload the page and try again.', 'ajax-filter-posts'),
)
);
}
@ -165,7 +168,7 @@ class Ajax_Filter_Posts {
if ($response) {
wp_send_json_success($response);
} else {
wp_send_json_error(__('Oops, something went wrong', $this->plugin_name));
wp_send_json_error(__('Oops, something went wrong. Please reload the page and try again.', 'ajax-filter-posts'));
}
die();
}

107
languages/ajax-filter-posts.pot
View File

@ -0,0 +1,107 @@
# Copyright (C) 2014 ...
# This file is distributed under the GNU General Public License v2 or later.
#, fuzzy
msgid ""
msgstr ""
"Project-Id-Version: ajax-"
"filter-posts\n"
"POT-Creation-Date: "
"2017-03-31 12:12+0200\n"
"PO-Revision-Date: \n"
"Last-Translator: Robbert "
"de Kuiper "
"<mail@robbertdekuiper."
"com>\n"
"Report-Msgid-Bugs-To: "
"Robbert de Kuiper "
"<mail@robbertdekuiper."
"com>\n"
"MIME-Version: 1.0\n"
"Content-Type: text/"
"plain; charset=UTF-8\n"
"Content-Transfer-"
"Encoding: 8bit\n"
"Plural-Forms: "
"nplurals=2; plural=n != "
"1;\n"
"X-Textdomain-Support: "
"yesX-Generator: Poedit "
"1.6.4\n"
"X-Poedit-SourceCharset: "
"UTF-8\n"
"X-Poedit-KeywordsList: "
"__;_e;esc_html_e;"
"esc_html_x:1,2c;"
"esc_html__;esc_attr_e;"
"esc_attr_x:1,2c;"
"esc_attr__;_ex:1,2c;"
"_nx:4c,1,2;"
"_nx_noop:4c,1,2;_x:1,2c;"
"_n:1,2;_n_noop:1,2;"
"__ngettext:1,2;"
"__ngettext_noop:1,2;_c,"
"_nc:4c,1,2\n"
"X-Poedit-Basepath: ..\n"
"Language-Team: \n"
"Language: en_GB\n"
"X-Generator: Poedit 2.0\n"
"X-Poedit-"
"SearchPath-0: .\n"
#: class-ajax-filter-posts.php:78
msgid ""
"It took to long the get "
"the posts. Please reload "
"the page and try again."
msgstr ""
#: class-ajax-filter-posts.php:79
msgid ""
"Got no response. Please "
"reload the page and try "
"again."
msgstr ""
#: class-ajax-filter-posts.php:172
msgid ""
"Oops, something went "
"wrong. Please reload the "
"page and try again."
msgstr ""
#: templates/base.php:4
#, php-format
msgid "Filter %s"
msgstr ""
#: templates/base.php:5
#, php-format
msgid "Show %s"
msgstr ""
#: templates/base.php:6
msgid "Hide filters"
msgstr ""
#: templates/base.php:17
msgid "Loading"
msgstr ""
#: templates/partials/loop.php:14
msgid "Load more"
msgstr ""
#: templates/partials/loop.php:21
#, php-format
msgid ""
"Oh, we couldn't find any "
"%s"
msgstr ""
#: templates/partials/loop.php:22
#, php-format
msgid ""
"Try different filters or "
"<a %s> reset them all.</"
"a>"
msgstr ""

10
templates/base.php
View File

@ -1,19 +1,19 @@
<section data-post-type="<?= $attributes['post_type']; ?>" data-quantity="<?= $attributes['posts_per_page']; ?>" class="js-container-async ajax-posts">
<div class="ajax-posts__status" style="display:none;"></div>
<button class="js-toggle-filters ajax-posts__toggle-filter">
<span class="ajax-posts__filter-recipes-text">+ <?= __('Filter', $this->plugin_name) . ' ' . $plural_post_name; ?></span>
<span class="ajax-posts__show-recipes-text">+ <?= __('Show', $this->plugin_name) . ' ' . $plural_post_name; ?></span>
<span class="ajax-posts__hide-filters-text">- <?php _e('Hide filters', $this->plugin_name); ?></span>
<span class="ajax-posts__filter-recipes-text">+ <?php printf( __('Filter %s', 'ajax-filter-posts'), $plural_post_name); ?></span>
<span class="ajax-posts__show-recipes-text">+ <?php printf( __('Show %s', 'ajax-filter-posts'), $plural_post_name); ?></span>
<span class="ajax-posts__hide-filters-text">- <?= __('Hide filters', 'ajax-filter-posts'); ?></span>
</button>
<div class="ajax-posts__view">
<aside class="ajax-posts__filters">
<?php include(plugin_dir_path( __FILE__ ) . 'partials/filters.php' ); ?>
</aside>
<div class="ajax-posts__status"></div>
<div class="ajax-posts__posts">
<?php include(plugin_dir_path( __FILE__ ) . 'partials/loop.php' ); ?>
</div>
</div>
<div class="ajax-posts__spinner">
<span class="ajax-posts__screen-reader-only"><?php _e('Loading', $this->plugin_name); ?></span>
<span class="ajax-posts__screen-reader-only"><?php _e('Loading', 'ajax-filter-posts'); ?></span>
</div>
</section>

6
templates/partials/loop.php
View File

@ -11,14 +11,14 @@
<?php endwhile; ?>
<?php if (!$this->is_last_page($query)) : ?>
<button class="js-load-more" data-page="<?= $this->get_page_number($query) + 1; ?>">
<?php _e('Load more', $this->plugin_name) ?>
<?php _e('Load more', 'ajax-filter-posts') ?>
</button>
<?php endif; ?>
<?php else: ?>
<div class="ajax-posts-message ajax-posts-message--empty">
<svg xmlns="http://www.w3.org/2000/svg" width="31.95mm" height="41.85mm" viewBox="0 0 90.57 118.62"><defs><style>.a{fill:transparent;}.b,.c,.d,.e,.f,.g{fill:none;stroke:#aaa;stroke-miterlimit:10;}.b,.c,.d,.e,.f{stroke-width:1.45px;}.c{stroke-dasharray:5.41 5.41;}.d{stroke-dasharray:5.86 5.86;}.e{stroke-dasharray:6.41 6.41;}.f{stroke-dasharray:5.75 5.75;}.g{stroke-width:1.48px;stroke-dasharray:5.91;}</style></defs><polygon class="a" points="87.74 117.89 0.73 117.89 0.73 0.73 64.26 0.73 87.74 25.74 87.74 117.89"/><polyline class="b" points="87.74 114.98 87.74 117.89 84.84 117.89"/><line class="c" x1="79.42" y1="117.89" x2="6.34" y2="117.89"/><polyline class="b" points="3.63 117.89 0.73 117.89 0.73 114.98"/><line class="d" x1="0.73" y1="109.12" x2="0.73" y2="6.56"/><polyline class="b" points="0.73 3.63 0.73 0.73 3.63 0.73"/><line class="e" x1="10.05" y1="0.73" x2="58.14" y2="0.73"/><polyline class="b" points="61.35 0.73 64.26 0.73 66.25 2.85"/><polyline class="f" points="70.18 7.03 87.74 25.74 87.74 112.11"/><polyline class="g" points="63.89 0.73 63.89 26.18 87.74 26.18"/>
</svg>
<h4><?php printf( __('Oh, we couldn\'t find any %s', $this->plugin_name), $plural_post_name); ?></h4>
<p><?php printf( __('Try different filters or <a %s> reset them all.</a>', $this->plugin_name), 'href="#" class="js-reset-filters"'); ?></p>
<h4><?php printf( __('Oh, we couldn\'t find any %s', 'ajax-filter-posts'), $plural_post_name); ?></h4>
<p><?php printf( __('Try different filters or <a %s> reset them all.</a>', 'ajax-filter-posts'), 'href="#" class="js-reset-filters"'); ?></p>
</div>
<?php endif; ?>