bash: Sun Dec 8 21:47:04 CST 2019

dev
mashiro 4 years ago
parent fee6675dd1
commit dba384ea23
  1. 2
      README.md
  2. 3
      package.json
  3. 16
      src/php/comments.php
  4. 459
      src/php/functions.php
  5. 2
      src/php/layout/header-top.php
  6. 125
      src/php/utils/graphql.php
  7. 113
      src/scss/layouts/comment.scss
  8. 335
      src/ts/functions/commentbox.ts
  9. 230
      src/ts/utils/graphql.ts
  10. 4
      webpack.common.js

@ -6,7 +6,7 @@ Sakura v2
__This repo is under developement, do not active in production environment!__
### Install
Clone/download into `./wp-content/themes/`, install the depended plugins (currently need two plugins for GraphQL API support: [WPGraphQL](https://github.com/wp-graphql/wp-graphql), [WPGraphQL JWT Authentication](https://github.com/wp-graphql/wp-graphql-jwt-authentication)), then active the theme in WordPress dashboard after compiling.
Clone/download into `./wp-content/themes/`, install the depended plugin [WPGraphQL](https://github.com/wp-graphql/wp-graphql) (for GraphQL API support), then active the theme in WordPress dashboard after compiling.
### Compile
```bash

@ -58,7 +58,8 @@
"test": "echo \"Error: no test specified\" && exit 1",
"build": "cross-env ENV_MODE=build webpack --progress",
"dev": "cross-env ENV_MODE=build webpack --progress --watch",
"start": "webpack-dev-server"
"start": "webpack-dev-server",
"push": "npm run build && bash push.sh"
},
"author": "mashirozx",
"license": "MIT"

@ -24,7 +24,21 @@
<div class="dislike"><i class="iconfont icon-dislike-o"></i> <span class="num"></span></div>
<div class="share"><i class="iconfont icon-forward"></i></div>
<div class="more"><i class="iconfont icon-more-dots"></i></div>
<div class="child">child</div>
<div class="child"></div>
</li>
</template>
<template id="comment-child-li-template">
<li class="comment-child">
<a class="avatar"><img class="user-avatar"></a>
<div class="author"><a class="name"></a></div>
<div class="reply">Reply</div>
<div class="mate"><span class="time"></span> <span class="location"></span></div>
<div class="content"></div>
<div class="like"><i class="iconfont icon-like-o"></i> <span class="num"></span></div>
<div class="dislike"><i class="iconfont icon-dislike-o"></i> <span class="num"></span></div>
<div class="share"><i class="iconfont icon-forward"></i></div>
<div class="more"><i class="iconfont icon-more-dots"></i></div>
</li>
</template>

@ -6,22 +6,22 @@
*/
/*------------------------------------*\
Define Global Constants
Define Global Constants
\*------------------------------------*/
// Debug mode
define('SAKURA_DEBUG', false);
// Get webpack manifest file
// Get webpack manifest file
define('MANIFEST', json_decode(file_get_contents(get_template_directory() . "/manifest.json"), true));
/*------------------------------------*\
External Modules
External Modules
\*------------------------------------*/
// require 'vendor/autoload.php';
/*------------------------------------*\
External Utils
External Utils
\*------------------------------------*/
require_once 'utils/functions.php';
@ -29,21 +29,21 @@ require_once 'utils/disable-wp-emoji.php';
require_once 'utils/graphql.php';
/*------------------------------------*\
Theme Support
Theme Support
\*------------------------------------*/
if ( ! isset( $content_width ) ) {
if (!isset($content_width)) {
$content_width = 900;
}
if ( function_exists( 'add_theme_support' ) ) {
if (function_exists('add_theme_support')) {
// Add Thumbnail Theme Support.
add_theme_support( 'post-thumbnails' );
add_image_size( 'large', 700, '', true ); // Large Thumbnail.
add_image_size( 'medium', 250, '', true ); // Medium Thumbnail.
add_image_size( 'small', 120, '', true ); // Small Thumbnail.
add_image_size( 'custom-size', 700, 200, true ); // Custom Thumbnail Size call using the_post_thumbnail('custom-size');
add_theme_support('post-thumbnails');
add_image_size('large', 700, '', true); // Large Thumbnail.
add_image_size('medium', 250, '', true); // Medium Thumbnail.
add_image_size('small', 120, '', true); // Small Thumbnail.
add_image_size('custom-size', 700, 200, true); // Custom Thumbnail Size call using the_post_thumbnail('custom-size');
// Add Support for Custom Backgrounds - Uncomment below if you're going to use.
/*add_theme_support('custom-background', array(
@ -65,384 +65,411 @@ if ( function_exists( 'add_theme_support' ) ) {
));*/
// Enables post and comment RSS feed links to head.
add_theme_support( 'automatic-feed-links' );
add_theme_support('automatic-feed-links');
// Enable HTML5 support.
add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );
add_theme_support('html5', array('comment-list', 'comment-form', 'search-form', 'gallery', 'caption'));
// Localisation Support.
load_theme_textdomain( 'sakura', get_template_directory() . '/languages' );
load_theme_textdomain('sakura', get_template_directory() . '/languages');
}
/*------------------------------------*\
Functions
Functions
\*------------------------------------*/
// HTML5 Blank navigation
function html5blank_nav() {
function html5blank_nav()
{
wp_nav_menu(
array(
'theme_location' => 'header-menu',
'menu' => '',
'container' => 'div',
'container_class' => 'menu-{menu slug}-container',
'container_id' => '',
'menu_class' => 'menu',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul>%3$s</ul>',
'depth' => 0,
'walker' => '',
array(
'theme_location' => 'header-menu',
'menu' => '',
'container' => 'div',
'container_class' => 'menu-{menu slug}-container',
'container_id' => '',
'menu_class' => 'menu',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul>%3$s</ul>',
'depth' => 0,
'walker' => '',
)
);
}
// Load scripts (header.php)
function sakura_header_scripts() {
if ( $GLOBALS['pagenow'] != 'wp-login.php' && ! is_admin() ) {
function sakura_header_scripts()
{
if ($GLOBALS['pagenow'] != 'wp-login.php' && !is_admin()) {
// Remove jQuery
wp_deregister_script( 'jquery' );
wp_deregister_script('jquery');
// Scripts minify
wp_register_script( 'bundle-js', get_template_directory_uri() . join_paths('/', MANIFEST['main']['js'][0]), array(), '1.0.0' );
wp_register_script('bundle-js', get_template_directory_uri() . join_paths('/', MANIFEST['main']['js'][0]), array(), '1.0.0');
// Enqueue Scripts
wp_enqueue_script( 'bundle-js' );
}
wp_enqueue_script('bundle-js');
}
}
// Load styles
function sakura_styles() {
function sakura_styles()
{
// TODO add options!
wp_deregister_style( 'wp-block-library' ); // Gutenberg CSS
wp_deregister_style('wp-block-library'); // Gutenberg CSS
// Icon fonts
wp_register_style( 'MaterialIcons', 'https://fonts.googleapis.com/icon?family=Material+Icons', array(), '1.0' );
wp_enqueue_style( 'MaterialIcons' );
wp_register_style( 'SakuraIcons', 'https://at.alicdn.com/t/font_679578_9p0ydgvimss.css', array(), '1.0' );
wp_enqueue_style( 'SakuraIcons' );
wp_register_style('MaterialIcons', 'https://fonts.googleapis.com/icon?family=Material+Icons', array(), '1.0');
wp_enqueue_style('MaterialIcons');
wp_register_style('SakuraIcons', 'https://at.alicdn.com/t/font_679578_9p0ydgvimss.css', array(), '1.0');
wp_enqueue_style('SakuraIcons');
// Custom CSS
wp_register_style( 'sakura_style', get_template_directory_uri() . join_paths('/', MANIFEST['main']['css'][0]), array(), '1.0' );
wp_register_style('sakura_style', get_template_directory_uri() . join_paths('/', MANIFEST['main']['css'][0]), array(), '1.0');
// Register CSS
wp_enqueue_style( 'sakura_style' );
wp_enqueue_style('sakura_style');
}
// Register HTML5 Blank Navigation
function register_html5_menu() {
register_nav_menus( array( // Using array to specify more menus if needed
'header-menu' => esc_html( 'Header Menu', 'html5blank' ), // Main Navigation
'extra-menu' => esc_html( 'Extra Menu', 'html5blank' ) // Extra Navigation if needed (duplicate as many as you need!)
) );
function register_html5_menu()
{
register_nav_menus(array( // Using array to specify more menus if needed
'header-menu' => esc_html('Header Menu', 'html5blank'), // Main Navigation
'extra-menu' => esc_html('Extra Menu', 'html5blank'), // Extra Navigation if needed (duplicate as many as you need!)
));
}
// Remove the <div> surrounding the dynamic navigation to cleanup markup
function my_wp_nav_menu_args( $args = '' ) {
function my_wp_nav_menu_args($args = '')
{
$args['container'] = false;
return $args;
}
// Remove Injected classes, ID's and Page ID's from Navigation <li> items
function my_css_attributes_filter( $var ) {
return is_array( $var ) ? array() : '';
function my_css_attributes_filter($var)
{
return is_array($var) ? array() : '';
}
// Remove invalid rel attribute values in the categorylist
function remove_category_rel_from_category_list( $thelist ) {
return str_replace( 'rel="category tag"', 'rel="tag"', $thelist );
function remove_category_rel_from_category_list($thelist)
{
return str_replace('rel="category tag"', 'rel="tag"', $thelist);
}
// Add page slug to body class, love this - Credit: Starkers Wordpress Theme
function add_slug_to_body_class( $classes ) {
function add_slug_to_body_class($classes)
{
global $post;
if ( is_home() ) {
$key = array_search( 'blog', $classes, true );
if ( $key > -1 ) {
unset( $classes[$key] );
if (is_home()) {
$key = array_search('blog', $classes, true);
if ($key > -1) {
unset($classes[$key]);
}
} elseif ( is_page() ) {
$classes[] = sanitize_html_class( $post->post_name );
} elseif ( is_singular() ) {
$classes[] = sanitize_html_class( $post->post_name );
} elseif (is_page()) {
$classes[] = sanitize_html_class($post->post_name);
} elseif (is_singular()) {
$classes[] = sanitize_html_class($post->post_name);
}
return $classes;
}
// Remove the width and height attributes from inserted images
function remove_width_attribute( $html ) {
$html = preg_replace( '/(width|height)="\d*"\s/', "", $html );
function remove_width_attribute($html)
{
$html = preg_replace('/(width|height)="\d*"\s/', "", $html);
return $html;
}
// If Dynamic Sidebar Exists
if ( function_exists( 'register_sidebar' ) ) {
if (function_exists('register_sidebar')) {
// Define Sidebar Widget Area 1
register_sidebar( array(
'name' => esc_html( 'Widget Area 1', 'html5blank' ),
'description' => esc_html( 'Description for this widget-area...', 'html5blank' ),
'id' => 'widget-area-1',
register_sidebar(array(
'name' => esc_html('Widget Area 1', 'html5blank'),
'description' => esc_html('Description for this widget-area...', 'html5blank'),
'id' => 'widget-area-1',
'before_widget' => '<div id="%1$s" class="%2$s">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
) );
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
// Define Sidebar Widget Area 2
register_sidebar( array(
'name' => esc_html( 'Widget Area 2', 'html5blank' ),
'description' => esc_html( 'Description for this widget-area...', 'html5blank' ),
'id' => 'widget-area-2',
register_sidebar(array(
'name' => esc_html('Widget Area 2', 'html5blank'),
'description' => esc_html('Description for this widget-area...', 'html5blank'),
'id' => 'widget-area-2',
'before_widget' => '<div id="%1$s" class="%2$s">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
) );
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
}
// Remove wp_head() injected Recent Comment styles
function my_remove_recent_comments_style() {
function my_remove_recent_comments_style()
{
global $wp_widget_factory;
if ( isset( $wp_widget_factory->widgets['WP_Widget_Recent_Comments'] ) ) {
remove_action( 'wp_head', array(
if (isset($wp_widget_factory->widgets['WP_Widget_Recent_Comments'])) {
remove_action('wp_head', array(
$wp_widget_factory->widgets['WP_Widget_Recent_Comments'],
'recent_comments_style'
) );
'recent_comments_style',
));
}
}
// Pagination for paged posts, Page 1, Page 2, Page 3, with Next and Previous Links, No plugin
function html5wp_pagination() {
function html5wp_pagination()
{
global $wp_query;
$big = 999999999;
echo paginate_links( array(
'base' => str_replace( $big, '%#%', get_pagenum_link( $big ) ),
'format' => '?paged=%#%',
'current' => max( 1, get_query_var( 'paged' ) ),
'total' => $wp_query->max_num_pages,
) );
echo paginate_links(array(
'base' => str_replace($big, '%#%', get_pagenum_link($big)),
'format' => '?paged=%#%',
'current' => max(1, get_query_var('paged')),
'total' => $wp_query->max_num_pages,
));
}
// Create 20 Word Callback for Index page Excerpts, call using sakura_wp_excerpt('sakura_wp_index');
function sakura_wp_index( $length ) {
function sakura_wp_index($length)
{
return 20;
}
// Create 40 Word Callback for Custom Post Excerpts, call using sakura_wp_excerpt('sakura_wp_custom_post');
function sakura_wp_custom_post( $length ) {
function sakura_wp_custom_post($length)
{
return 40;
}
// Create the Custom Excerpts callback
function sakura_wp_excerpt( $length_callback = '', $more_callback = '' ) {
function sakura_wp_excerpt($length_callback = '', $more_callback = '')
{
global $post;
if ( function_exists( $length_callback ) ) {
add_filter( 'excerpt_length', $length_callback );
if (function_exists($length_callback)) {
add_filter('excerpt_length', $length_callback);
}
if ( function_exists( $more_callback ) ) {
add_filter( 'excerpt_more', $more_callback );
if (function_exists($more_callback)) {
add_filter('excerpt_more', $more_callback);
}
$output = get_the_excerpt();
$output = apply_filters( 'wptexturize', $output );
$output = apply_filters( 'convert_chars', $output );
echo esc_html( $output );
$output = apply_filters('wptexturize', $output);
$output = apply_filters('convert_chars', $output);
echo esc_html($output);
}
// Custom View Article link to Post
function sakura_view_article( $more ) {
function sakura_view_article($more)
{
global $post;
return '... <a class="view-article" href="' . get_permalink( $post->ID ) . '">' . esc_html_e( 'View Article', 'html5blank' ) . '</a>';
return '... <a class="view-article" href="' . get_permalink($post->ID) . '">' . esc_html_e('View Article', 'html5blank') . '</a>';
}
// Default post thumbnail
function get_post_thumb_url( $size ) {
function get_post_thumb_url($size)
{
// TODO: full sizes of sizes
$default = "https://view.moezx.cc/images/2019/10/21/5e65o9lxtbvht2tdjvpgsmarw.jpg";
return has_post_thumbnail() ? get_the_post_thumbnail_url( get_the_ID() , $size ) : $default;
return has_post_thumbnail() ? get_the_post_thumbnail_url(get_the_ID(), $size) : $default;
}
// Remove Admin bar
function remove_admin_bar() {
function remove_admin_bar()
{
return false;
}
// Remove 'text/css' from our enqueued stylesheet
function html5_style_remove( $tag ) {
return preg_replace( '~\s+type=["\'][^"\']++["\']~', '', $tag );
function html5_style_remove($tag)
{
return preg_replace('~\s+type=["\'][^"\']++["\']~', '', $tag);
}
// Remove thumbnail width and height dimensions that prevent fluid images in the_thumbnail
function remove_thumbnail_dimensions( $html ) {
$html = preg_replace( '/(width|height)=\"\d*\"\s/', '', $html );
function remove_thumbnail_dimensions($html)
{
$html = preg_replace('/(width|height)=\"\d*\"\s/', '', $html);
return $html;
}
// Custom Gravatar in Settings > Discussion
function html5blankgravatar ( $avatar_defaults ) {
$myavatar = get_template_directory_uri() . '/img/gravatar.jpg';
function html5blankgravatar($avatar_defaults)
{
$myavatar = get_template_directory_uri() . '/img/gravatar.jpg';
$avatar_defaults[$myavatar] = 'Custom Gravatar';
return $avatar_defaults;
}
// Threaded Comments
function enable_threaded_comments() {
if ( ! is_admin() ) {
if ( is_singular() AND comments_open() AND ( get_option( 'thread_comments' ) == 1 ) ) {
wp_enqueue_script( 'comment-reply' );
function enable_threaded_comments()
{
if (!is_admin()) {
if (is_singular() and comments_open() and (get_option('thread_comments') == 1)) {
wp_enqueue_script('comment-reply');
}
}
}
// Custom Comments Callback
function html5blankcomments( $comment, $args, $depth ) {
function html5blankcomments($comment, $args, $depth)
{
$GLOBALS['comment'] = $comment;
extract( $args, EXTR_SKIP );
extract($args, EXTR_SKIP);
if ( 'div' == $args['style'] ) {
$tag = 'div';
if ('div' == $args['style']) {
$tag = 'div';
$add_below = 'comment';
} else {
$tag = 'li';
$tag = 'li';
$add_below = 'div-comment';
}
?>
?>
<!-- heads up: starting < for the html tag (li or div) in the next line: -->
<<?php echo esc_html( $tag ) ?> <?php comment_class( empty( $args['has_children'] ) ? '' : 'parent' ) ?> id="comment-<?php comment_ID(); ?>">
<?php if ( 'div' != $args['style'] ) : ?>
<div id="div-comment-<?php comment_ID(); ?>" class="comment-body">
<?php endif; ?>
<<?php echo esc_html($tag) ?> <?php comment_class(empty($args['has_children']) ? '' : 'parent')?> id="comment-<?php comment_ID();?>">
<?php if ('div' != $args['style']): ?>
<div id="div-comment-<?php comment_ID();?>" class="comment-body">
<?php endif;?>
<div class="comment-author vcard">
<?php if ( $args['avatar_size'] != 0 ) echo get_avatar( $comment, $args['avatar_size'] ); ?>
<?php printf( esc_html( '<cite class="fn">%s</cite> <span class="says">says:</span>' ), get_comment_author_link() ) ?>
<?php if ($args['avatar_size'] != 0) {
echo get_avatar($comment, $args['avatar_size']);
}
?>
<?php printf(esc_html('<cite class="fn">%s</cite> <span class="says">says:</span>'), get_comment_author_link())?>
</div>
<?php if ( $comment->comment_approved == '0' ) : ?>
<em class="comment-awaiting-moderation"><?php esc_html_e( 'Your comment is awaiting moderation.' ) ?></em>
<?php if ($comment->comment_approved == '0'): ?>
<em class="comment-awaiting-moderation"><?php esc_html_e('Your comment is awaiting moderation.')?></em>
<br />
<?php endif; ?>
<?php endif;?>
<div class="comment-meta commentmetadata"><a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>">
<div class="comment-meta commentmetadata"><a href="<?php echo htmlspecialchars(get_comment_link($comment->comment_ID)) ?>">
<?php
printf( esc_html( '%1$s at %2$s' ), get_comment_date(), get_comment_time() ) ?></a><?php edit_comment_link( esc_html_e( '(Edit)' ), ' ', '' );
?>
printf(esc_html('%1$s at %2$s'), get_comment_date(), get_comment_time())?></a><?php edit_comment_link(esc_html_e('(Edit)'), ' ', '');
?>
</div>
<?php comment_text() ?>
<?php comment_text()?>
<div class="reply">
<?php comment_reply_link( array_merge( $args, array('add_below' => $add_below, 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ) ?>
<?php comment_reply_link(array_merge($args, array('add_below' => $add_below, 'depth' => $depth, 'max_depth' => $args['max_depth'])))?>
</div>
<?php if ( 'div' != $args['style'] ) : ?>
<?php if ('div' != $args['style']): ?>
</div>
<?php endif; ?>
<?php endif;?>
<?php }
/*------------------------------------*\
Actions + Filters + ShortCodes
Actions + Filters + ShortCodes
\*------------------------------------*/
// Add Actions
add_action( 'wp_enqueue_scripts', 'sakura_header_scripts' ); // Add Custom Scripts to wp_head
add_action( 'get_header', 'enable_threaded_comments' ); // Enable Threaded Comments
add_action( 'wp_enqueue_scripts', 'sakura_styles' ); // Add Theme Stylesheet
add_action( 'init', 'register_html5_menu' ); // Add HTML5 Blank Menu
add_action( 'init', 'create_post_type_html5' ); // Add our HTML5 Blank Custom Post Type
add_action( 'widgets_init', 'my_remove_recent_comments_style' ); // Remove inline Recent Comment Styles from wp_head()
add_action( 'init', 'html5wp_pagination' ); // Add our HTML5 Pagination
add_action('wp_enqueue_scripts', 'sakura_header_scripts'); // Add Custom Scripts to wp_head
add_action('get_header', 'enable_threaded_comments'); // Enable Threaded Comments
add_action('wp_enqueue_scripts', 'sakura_styles'); // Add Theme Stylesheet
add_action('init', 'register_html5_menu'); // Add HTML5 Blank Menu
add_action('init', 'create_post_type_html5'); // Add our HTML5 Blank Custom Post Type
add_action('widgets_init', 'my_remove_recent_comments_style'); // Remove inline Recent Comment Styles from wp_head()
add_action('init', 'html5wp_pagination'); // Add our HTML5 Pagination
// Remove Actions
remove_action( 'wp_head', 'feed_links_extra', 3 ); // Display the links to the extra feeds such as category feeds
remove_action( 'wp_head', 'feed_links', 2 ); // Display the links to the general feeds: Post and Comment Feed
remove_action( 'wp_head', 'rsd_link' ); // Display the link to the Really Simple Discovery service endpoint, EditURI link
remove_action( 'wp_head', 'wlwmanifest_link' ); // Display the link to the Windows Live Writer manifest file.
remove_action( 'wp_head', 'wp_generator' ); // Display the XHTML generator that is generated on the wp_head hook, WP version
remove_action( 'wp_head', 'rel_canonical' );
remove_action( 'wp_head', 'wp_shortlink_wp_head', 10, 0 );
remove_action('wp_head', 'feed_links_extra', 3); // Display the links to the extra feeds such as category feeds
remove_action('wp_head', 'feed_links', 2); // Display the links to the general feeds: Post and Comment Feed
remove_action('wp_head', 'rsd_link'); // Display the link to the Really Simple Discovery service endpoint, EditURI link
remove_action('wp_head', 'wlwmanifest_link'); // Display the link to the Windows Live Writer manifest file.
remove_action('wp_head', 'wp_generator'); // Display the XHTML generator that is generated on the wp_head hook, WP version
remove_action('wp_head', 'rel_canonical');
remove_action('wp_head', 'wp_shortlink_wp_head', 10, 0);
// Add Filters
add_filter( 'avatar_defaults', 'html5blankgravatar' ); // Custom Gravatar in Settings > Discussion
add_filter( 'body_class', 'add_slug_to_body_class' ); // Add slug to body class (Starkers build)
add_filter( 'widget_text', 'do_shortcode' ); // Allow shortcodes in Dynamic Sidebar
add_filter( 'widget_text', 'shortcode_unautop' ); // Remove <p> tags in Dynamic Sidebars (better!)
add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' ); // Remove surrounding <div> from WP Navigation
add_filter('avatar_defaults', 'html5blankgravatar'); // Custom Gravatar in Settings > Discussion
add_filter('body_class', 'add_slug_to_body_class'); // Add slug to body class (Starkers build)
add_filter('widget_text', 'do_shortcode'); // Allow shortcodes in Dynamic Sidebar
add_filter('widget_text', 'shortcode_unautop'); // Remove <p> tags in Dynamic Sidebars (better!)
add_filter('wp_nav_menu_args', 'my_wp_nav_menu_args'); // Remove surrounding <div> from WP Navigation
// add_filter( 'nav_menu_css_class', 'my_css_attributes_filter', 100, 1 ); // Remove Navigation <li> injected classes (Commented out by default)
// add_filter( 'nav_menu_item_id', 'my_css_attributes_filter', 100, 1 ); // Remove Navigation <li> injected ID (Commented out by default)
// add_filter( 'page_css_class', 'my_css_attributes_filter', 100, 1 ); // Remove Navigation <li> Page ID's (Commented out by default)
add_filter( 'the_category', 'remove_category_rel_from_category_list' ); // Remove invalid rel attribute
add_filter( 'the_excerpt', 'shortcode_unautop' ); // Remove auto <p> tags in Excerpt (Manual Excerpts only)
add_filter( 'the_excerpt', 'do_shortcode' ); // Allows Shortcodes to be executed in Excerpt (Manual Excerpts only)
add_filter('the_category', 'remove_category_rel_from_category_list'); // Remove invalid rel attribute
add_filter('the_excerpt', 'shortcode_unautop'); // Remove auto <p> tags in Excerpt (Manual Excerpts only)
add_filter('the_excerpt', 'do_shortcode'); // Allows Shortcodes to be executed in Excerpt (Manual Excerpts only)
//add_filter( 'excerpt_more', 'sakura_view_article' ); // Add 'View Article' button instead of [...] for Excerpts
add_filter( 'show_admin_bar', 'remove_admin_bar' ); // Remove Admin bar
add_filter( 'style_loader_tag', 'html5_style_remove' ); // Remove 'text/css' from enqueued stylesheet
add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 ); // Remove width and height dynamic attributes to thumbnails
add_filter( 'post_thumbnail_html', 'remove_width_attribute', 10 ); // Remove width and height dynamic attributes to post images
add_filter( 'image_send_to_editor', 'remove_width_attribute', 10 ); // Remove width and height dynamic attributes to post images
add_filter('show_admin_bar', 'remove_admin_bar'); // Remove Admin bar
add_filter('style_loader_tag', 'html5_style_remove'); // Remove 'text/css' from enqueued stylesheet
add_filter('post_thumbnail_html', 'remove_thumbnail_dimensions', 10); // Remove width and height dynamic attributes to thumbnails
add_filter('post_thumbnail_html', 'remove_width_attribute', 10); // Remove width and height dynamic attributes to post images
add_filter('image_send_to_editor', 'remove_width_attribute', 10); // Remove width and height dynamic attributes to post images
// Remove Filters
remove_filter( 'the_excerpt', 'wpautop' ); // Remove <p> tags from Excerpt altogether
remove_filter('the_excerpt', 'wpautop'); // Remove <p> tags from Excerpt altogether
// Shortcodes
add_shortcode( 'html5_shortcode_demo', 'html5_shortcode_demo' ); // You can place [html5_shortcode_demo] in Pages, Posts now.
add_shortcode( 'html5_shortcode_demo_2', 'html5_shortcode_demo_2' ); // Place [html5_shortcode_demo_2] in Pages, Posts now.
add_shortcode('html5_shortcode_demo', 'html5_shortcode_demo'); // You can place [html5_shortcode_demo] in Pages, Posts now.
add_shortcode('html5_shortcode_demo_2', 'html5_shortcode_demo_2'); // Place [html5_shortcode_demo_2] in Pages, Posts now.
// Shortcodes above would be nested like this -
// [html5_shortcode_demo] [html5_shortcode_demo_2] Here's the page title! [/html5_shortcode_demo_2] [/html5_shortcode_demo]
/*------------------------------------*\
Custom Post Types
Custom Post Types
\*------------------------------------*/
// Create 1 Custom Post type for a Demo, called HTML5-Blank
function create_post_type_html5() {
register_taxonomy_for_object_type( 'category', 'html5-blank' ); // Register Taxonomies for Category
register_taxonomy_for_object_type( 'post_tag', 'html5-blank' );
register_post_type( 'html5-blank', // Register Custom Post Type
function create_post_type_html5()
{
register_taxonomy_for_object_type('category', 'html5-blank'); // Register Taxonomies for Category
register_taxonomy_for_object_type('post_tag', 'html5-blank');
register_post_type('html5-blank', // Register Custom Post Type
array(
'labels' => array(
'name' => esc_html( 'HTML5 Blank Custom Post', 'html5blank' ), // Rename these to suit
'singular_name' => esc_html( 'HTML5 Blank Custom Post', 'html5blank' ),
'add_new' => esc_html( 'Add New', 'html5blank' ),
'add_new_item' => esc_html( 'Add New HTML5 Blank Custom Post', 'html5blank' ),
'edit' => esc_html( 'Edit', 'html5blank' ),
'edit_item' => esc_html( 'Edit HTML5 Blank Custom Post', 'html5blank' ),
'new_item' => esc_html( 'New HTML5 Blank Custom Post', 'html5blank' ),
'view' => esc_html( 'View HTML5 Blank Custom Post', 'html5blank' ),
'view_item' => esc_html( 'View HTML5 Blank Custom Post', 'html5blank' ),
'search_items' => esc_html( 'Search HTML5 Blank Custom Post', 'html5blank' ),
'not_found' => esc_html( 'No HTML5 Blank Custom Posts found', 'html5blank' ),
'not_found_in_trash' => esc_html( 'No HTML5 Blank Custom Posts found in Trash', 'html5blank' ),
),
'public' => true,
'hierarchical' => true, // Allows your posts to behave like Hierarchy Pages
'has_archive' => true,
'supports' => array(
'title',
'editor',
'excerpt',
'thumbnail'
), // Go to Dashboard Custom HTML5 Blank post for supports
'can_export' => true, // Allows export in Tools > Export
'taxonomies' => array(
'post_tag',
'category'
) // Add Category and Post Tags support
) );
'labels' => array(
'name' => esc_html('HTML5 Blank Custom Post', 'html5blank'), // Rename these to suit
'singular_name' => esc_html('HTML5 Blank Custom Post', 'html5blank'),
'add_new' => esc_html('Add New', 'html5blank'),
'add_new_item' => esc_html('Add New HTML5 Blank Custom Post', 'html5blank'),
'edit' => esc_html('Edit', 'html5blank'),
'edit_item' => esc_html('Edit HTML5 Blank Custom Post', 'html5blank'),
'new_item' => esc_html('New HTML5 Blank Custom Post', 'html5blank'),
'view' => esc_html('View HTML5 Blank Custom Post', 'html5blank'),
'view_item' => esc_html('View HTML5 Blank Custom Post', 'html5blank'),
'search_items' => esc_html('Search HTML5 Blank Custom Post', 'html5blank'),
'not_found' => esc_html('No HTML5 Blank Custom Posts found', 'html5blank'),
'not_found_in_trash' => esc_html('No HTML5 Blank Custom Posts found in Trash', 'html5blank'),
),
'public' => true,
'hierarchical' => true, // Allows your posts to behave like Hierarchy Pages
'has_archive' => true,
'supports' => array(
'title',
'editor',
'excerpt',
'thumbnail',
), // Go to Dashboard Custom HTML5 Blank post for supports
'can_export' => true, // Allows export in Tools > Export
'taxonomies' => array(
'post_tag',
'category',
), // Add Category and Post Tags support
));
}
/*------------------------------------*\
ShortCode Functions
ShortCode Functions
\*------------------------------------*/
// Shortcode Demo with Nested Capability
function html5_shortcode_demo( $atts, $content = null ) {
return '<div class="shortcode-demo">' . do_shortcode( $content ) . '</div>'; // do_shortcode allows for nested Shortcodes
function html5_shortcode_demo($atts, $content = null)
{
return '<div class="shortcode-demo">' . do_shortcode($content) . '</div>'; // do_shortcode allows for nested Shortcodes
}
// Demo Heading H2 shortcode, allows for nesting within above element. Fully expandable.
function html5_shortcode_demo_2( $atts, $content = null ) {
function html5_shortcode_demo_2($atts, $content = null)
{
return '<h2>' . $content . '</h2>';
}

@ -1,7 +1,7 @@
<div class="header-top">
<!--index cover image-->
<figure data="mark" class="img-wrapper parallax-wrapper">
<div data="layer" class="img-view" data-depth="0.3">
<div data="layer" class="img-view" data-depth="0.1">
<img data="cover" class="img" src="https://view.moezx.cc/images/2019/10/21/1zuypi4mkggq6js5lqxt3sjaa.jpg">
</div>
</figure>

@ -1,4 +1,8 @@
<?php
/**
* Add mate field to comments
* @since 4.0
*/
add_action('graphql_register_types', 'register_comment_mate_type');
function register_comment_mate_type()
@ -42,6 +46,14 @@ function register_comment_mate_type()
'type' => 'Integer',
'description' => __('The dislike count of the comment', 'sakura'),
],
'child' => [
'type' => 'String',
'description' => __('The children ID of the comment', 'sakura'),
],
'childPre' => [
'type' => 'String',
'description' => __('The the first 3 children to show', 'sakura'),
],
],
]);
}
@ -55,6 +67,7 @@ function register_comment_mate_field()
'type' => 'CommentMate',
'resolve' => function (\WPGraphQL\Model\Comment $comment, $args, $depth) {
$comment_ID = $comment->commentId;
$comment_child = new CommentChild($comment_ID);
return [
'name' => get_comment_author($comment_ID),
'avatar' => get_avatar_url($comment->commentAuthorEmail),
@ -65,8 +78,118 @@ function register_comment_mate_field()
'role' => 9,
'like' => 100,
'dislike' => 10,
// CURRENTLY WPGRAPHQL DOESNOT SUPPORT A [Integer] TYPE,
// SO WE USE A STRING HERE
'child' => json_encode($comment_child->comment_child_id_list),
'childPre' => json_encode($comment_child->comment_child_preview),
];
},
]);
}
/**
* Get a comment's child comments as mate
* @since 4.0
* @author Mashiro
* @license MIT
* @property int $comment_ID
* @property array $comment_child_id_list
* @property array $comment_child_preview
*/
class CommentChild
{
public $comment_ID;
public $comment_child_id_list;
public $comment_child_preview;
public function __construct($comment_ID)
{
$this->comment_ID = $comment_ID;
$this->comment_child_id_list = $this->get_the_child_id_list($this->comment_ID);
$this->comment_child_preview = $this->get_the_child_preview($this->comment_child_id_list);
}
/**
* SQL query for the child id
* @since 4.0
*/
private function pushChildId($child_list_all, $child_ID)
{
global $wpdb;
$child_array = $wpdb->get_col("SELECT comment_ID FROM $wpdb->comments WHERE comment_parent = $child_ID");
$child_list_all = array_merge($child_list_all, $child_array);
if (!empty($child_array)) {
foreach ($child_array as $child) {
$this->pushChildId($child_list_all, $child);
}
}
return $child_list_all;
}
/**
* Get id of all `children` and `grandchildren` and `grandgrandchildren`
* and so on of a comment
* @since 4.0
* @param $comment_ID Int
* @return a array of all the id of children
*/
private function get_the_child_id_list($comment_ID)
{
$child_list_all = array();
$child_list_all = $this->pushChildId($child_list_all, $comment_ID);
return array_map('intval', $child_list_all);
}
/**
* SQL query for the child preview
* TODO: we can enhance query performance by merging queries in
* pushChildPre() and pushChildId()
* @since 4.0
*/
private function pushChildPre($child_id_list, $i)
{
global $wpdb;
$id = $child_id_list[$i];
$parentId = $wpdb->get_var("SELECT comment_parent FROM $wpdb->comments WHERE comment_ID = $id");
return array(
'id' => $id,
'name' => get_comment_author($id),
'avatar' => get_avatar_url(get_comment_author_email($id)),
'url' => get_comment_author_url($id),
'content' => get_comment_text($id),
'ua' => 'Chrome 70 Windows 10',
'location' => 'Shanghai, China',
'level' => 6,
'role' => 9,
'like' => 100,
'dislike' => 10,
'parent' => intval($parentId),
);
}
/**
* Get the earliest 3 comments (if exist) to preview
*/
private function get_the_child_preview($comment_child_id_list)
{
$preview = array();
if (count($comment_child_id_list) > 3) {
for ($i = 0; $i <= 2; $i++) {
$preview[$i] = $this->pushChildPre($comment_child_id_list, $i);
}
} elseif (count($comment_child_id_list) == 0) {
return $preview;
} else {
for ($i = 0; $i <= count($comment_child_id_list) - 1; $i++) {
$preview[$i] = $this->pushChildPre($comment_child_id_list, $i);
}
}
return $preview;
}
}

@ -1,71 +1,76 @@
/*comment list*/
.comment-item {
display: grid;
grid-template-columns: 60px repeat(3, 50px) auto 50px;
grid-template-rows: 25px 25px auto 25px auto;
grid-template-areas:
'avatar author author author author reply'
'avatar mate mate mate mate reply'
'. content content content content content'
'. like dislike share . more'
'. child child child child child';
.comment-list {
padding: 0;
>.avatar {
grid-area: avatar;
.comment-item,
.comment-child {
display: grid;
grid-template-columns: 60px repeat(3, 50px) auto 50px;
grid-template-rows: 25px 25px auto 25px auto;
grid-template-areas:
'avatar author author author author reply'
'avatar mate mate mate mate reply'
'. content content content content content'
'. like dislike share . more'
'. child child child child child';
img {
width: 48px;
height: 48px;
border-radius: 50%;
>.avatar {
grid-area: avatar;
img {
width: 48px;
height: 48px;
border-radius: 50%;
}
}
}
>.author {
grid-area: author;
color: $font-color-gray;
>.author {
grid-area: author;
color: $font-color-gray;
a.name {
text-decoration: none;
color: $font-color-pink;
a.name {
text-decoration: none;
color: $font-color-pink;
}
}
}
>.reply {
grid-area: reply;
}
>.reply {
grid-area: reply;
}
>.mate {
grid-area: mate;
color: $font-color-gray;
}
>.mate {
grid-area: mate;
color: $font-color-gray;
}
>.content {
grid-area: content;
color: $font-color-normal;
}
>.content {
grid-area: content;
color: $font-color-normal;
}
>.like {
grid-area: like;
color: $font-color-gray;
}
>.like {
grid-area: like;
color: $font-color-gray;
}
>.dislike {
grid-area: dislike;
color: $font-color-gray;
}
>.dislike {
grid-area: dislike;
color: $font-color-gray;
}
>.share {
grid-area: share;
color: $font-color-gray;
}
>.share {
grid-area: share;
color: $font-color-gray;
}
>.more {
grid-area: more;
color: $font-color-gray;
}
>.more {
grid-area: more;
color: $font-color-gray;
}
>.child {
grid-area: child;
background-color: darkgray;
>.child {
grid-area: child;
background-color: darkgray;
}
}
}

@ -1,30 +1,88 @@
import { getPostCommentByPostId } from '../utils/graphql'
import ApolloClient from 'apollo-boost'
import { ApoloQuery, getPostCommentByPostId } from '../utils/graphql'
const getCommentData = function (callback: Function) {
const theCommentQuery: getPostCommentByPostId = new getPostCommentByPostId(1, 5)
const client: ApolloClient = new ApolloClient()
client.query(theCommentQuery.query)
.then(data => callback(data))
.catch(error => console.log(error))
interface node {
date: string
content: string
commentId: number
mate: commentMate
}
const pushNewCommentItem = function (node: object) {
let li = document.querySelector('#comment-list-li-template'),
ul = document.querySelector('#comment-list-ul')
interface commentMate {
name: string
url: string
avatar: string
ua: string
location: string
level: number
role: number
like: number
dislike: number
child: string
childPre: string
}
interface childPre {
[index: number]: number;
length: number;
callee: childPreNode;
}
li.content.querySelector('.content').innerHTML = node.content.trim()
li.content.querySelector('.time').textContent = node.date
interface childPreNode {
id: number
name: string
url: string
avatar: string
content: string
ua: string
location: string
level: number
role: number
like: number
dislike: number
child: string
childPre: string
parent: number
}
li.content.querySelector('.name').textContent = node.mate.name
li.content.querySelector('.avatar img').setAttribute('src', node.mate.avatar)
li.content.querySelector('a.avatar').setAttribute('href', node.mate.url)
li.content.querySelector('a.name').setAttribute('href', node.mate.url)
li.content.querySelector('.location').textContent = node.mate.location
li.content.querySelector('.like .num').textContent = node.mate.like
li.content.querySelector('.dislike .num').textContent = node.mate.dislike
const createCommentChild = function (child: object): DocumentFragment {
let newDiv = document.createElement("div");
let newContent = document.createTextNode("Hi there and greetings!");
newDiv.appendChild(newContent);
}
const pushCommentChild = function (childDiv: HTMLElement, child: [number?]): HTMLElement {
return childDiv
}
const clone = document.importNode(li.content, true)
const pushNewCommentItem = function (node: node) {
let ul: HTMLElement = document.querySelector('#comment-list-ul'),
li: HTMLTemplateElement = document.querySelector('#comment-list-li-template'),
clone: DocumentFragment = document.importNode(li.content, true),
mate: commentMate = node.mate,
// child: [number?] = JSON.parse(mate.child),
childPre: childPre = JSON.parse(mate.childPre)
clone.querySelector('.content').innerHTML = node.content.trim()
clone.querySelector('.time').textContent = node.date
clone.querySelector('.name').textContent = mate.name
clone.querySelector('.avatar img').setAttribute('src', mate.avatar)
clone.querySelector('a.avatar').setAttribute('href', mate.url)
clone.querySelector('a.name').setAttribute('href', mate.url)
clone.querySelector('.location').textContent = mate.location
clone.querySelector('.like .num').textContent = String(mate.like)
clone.querySelector('.dislike .num').textContent = String(mate.dislike)
let childDiv: HTMLElement = clone.querySelector('.child')
if (childPre === undefined || childPre.length == 0) {
// if has no child comment
childDiv.remove()
} else {
// if has child
childDiv.setAttribute('data-child', mate.child)
let childContent: DocumentFragment = createCommentChild(childPre)
childDiv.appendChild(childContent)
}
ul.appendChild(clone)
}
@ -37,236 +95,9 @@ const getCommentDataCallback = function (data: object) {
}
const main = async function () {
getCommentData(getCommentDataCallback)
// dev(getCommentDataCallback)
const theQuery: getPostCommentByPostId = new getPostCommentByPostId(1, 10)
const client: ApoloQuery = new ApoloQuery(theQuery.query, getCommentDataCallback)
client.do()
}
export default main
const dev = function (callback: Function) {
const data: object = {
"data": {
"postBy": {
"id": "cG9zdDox",
"postId": 1,
"comments": {
"edges": [{
"node": {
"date": "2019-12-06 12:55:17",
"content": "<p>test \u4e2d\u6587<\/p>\n",
"commentId": 26,
"mate": {
"name": "\u5abd`\u5979\u5a87\u786a",
"url": "https:\/\/2heng.xin",
"avatar": "https:\/\/secure.gravatar.com\/avatar\/8901d7fe1c34079b81d15b96fc5d933d?s=96&d=mm&r=g",
"ua": "Chrome 70 Windows 10",
"location": "Shanghai, China",
"level": 6,
"role": 9,
"like": 100,
"dislike": 10,
"__typename": "CommentMate"
},
"__typename": "Comment",
"children": {
"nodes": [],
"__typename": "CommentToCommentConnection"
}
},
"__typename": "PostToCommentConnectionEdge"
}, {
"node": {
"date": "2019-12-05 15:15:21",
"content": "<p>dsgssdg<\/p>\n",
"commentId": 20,
"mate": {
"name": "mashiro\u4e2d\u6587",
"url": "",
"avatar": "https:\/\/secure.gravatar.com\/avatar\/cd2b3a164c977539712929f66cad335c?s=96&d=mm&r=g",
"ua": "Chrome 70 Windows 10",
"location": "Shanghai, China",
"level": 6,
"role": 9,
"like": 100,
"dislike": 10,
"__typename": "CommentMate"
},
"__typename": "Comment",
"children": {
"nodes": [{
"date": "2019-12-05 15:30:27",
"content": "<p>re:fsadgfbad<\/p>\n",
"commentId": 24,
"mate": {
"name": "mashiro\u4e2d\u6587",
"url": "",
"avatar": "https:\/\/secure.gravatar.com\/avatar\/cd2b3a164c977539712929f66cad335c?s=96&d=mm&r=g",
"ua": "Chrome 70 Windows 10",
"location": "Shanghai, China",
"level": 6,
"role": 9,
"like": 100,
"dislike": 10,
"__typename": "CommentMate"
},
"__typename": "Comment",
"children": {
"nodes": [],
"__typename": "CommentToCommentConnection"
}
}, {
"date": "2019-12-05 15:30:19",
"content": "<p>re:24325<\/p>\n",
"commentId": 23,
"mate": {
"name": "mashiro",
"url": "",
"avatar": "https:\/\/secure.gravatar.com\/avatar\/cd2b3a164c977539712929f66cad335c?s=96&d=mm&r=g",
"ua": "Chrome 70 Windows 10",
"location": "Shanghai, China",
"level": 6,
"role": 9,
"like": 100,
"dislike": 10,
"__typename": "CommentMate"
},
"__typename": "Comment",
"children": {
"nodes": [],
"__typename": "CommentToCommentConnection"
}
}, {
"date": "2019-12-05 15:29:56",
"content": "<p>reply233<\/p>\n",
"commentId": 21,
"mate": {
"name": "mashiro",
"url": "",
"avatar": "https:\/\/secure.gravatar.com\/avatar\/cd2b3a164c977539712929f66cad335c?s=96&d=mm&r=g",
"ua": "Chrome 70 Windows 10",
"location": "Shanghai, China",
"level": 6,
"role": 9,
"like": 100,
"dislike": 10,
"__typename": "CommentMate"
},
"__typename": "Comment",
"children": {
"nodes": [{
"date": "2019-12-05 15:30:09",
"content": "<p>re:re:2333<\/p>\n",
"commentId": 22,
"mate": {
"name": "mashiro",
"url": "",
"avatar": "https:\/\/secure.gravatar.com\/avatar\/cd2b3a164c977539712929f66cad335c?s=96&d=mm&r=g",
"ua": "Chrome 70 Windows 10",
"location": "Shanghai, China",
"level": 6,
"role": 9,
"like": 100,
"dislike": 10,
"__typename": "CommentMate"
},
"__typename": "Comment",
"children": {
"nodes": [],
"__typename": "CommentToCommentConnection"
}
}],
"__typename": "CommentToCommentConnection"
}
}],
"__typename": "CommentToCommentConnection"
}
},
"__typename": "PostToCommentConnectionEdge"
}, {
"node": {
"date": "2019-12-05 15:15:18",
"content": "<p>asfadsfgasg<\/p>\n",
"commentId": 19,
"mate": {
"name": "mashiro",
"url": "",
"avatar": "https:\/\/secure.gravatar.com\/avatar\/cd2b3a164c977539712929f66cad335c?s=96&d=mm&r=g",
"ua": "Chrome 70 Windows 10",
"location": "Shanghai, China",
"level": 6,
"role": 9,
"like": 100,
"dislike": 10,
"__typename": "CommentMate"
},
"__typename": "Comment",
"children": {
"nodes": [],
"__typename": "CommentToCommentConnection"
}
},
"__typename": "PostToCommentConnectionEdge"
}, {
"node": {
"date": "2019-12-05 15:15:15",
"content": "<p>asfasfas<\/p>\n",
"commentId": 18,
"mate": {
"name": "mashiro",
"url": "",
"avatar": "https:\/\/secure.gravatar.com\/avatar\/cd2b3a164c977539712929f66cad335c?s=96&d=mm&r=g",
"ua": "Chrome 70 Windows 10",
"location": "Shanghai, China",
"level": 6,
"role": 9,
"like": 100,
"dislike": 10,
"__typename": "CommentMate"
},
"__typename": "Comment",
"children": {
"nodes": [],
"__typename": "CommentToCommentConnection"
}
},
"__typename": "PostToCommentConnectionEdge"
}, {
"node": {
"date": "2019-12-05 15:15:12",
"content": "<p>safassfs<\/p>\n",
"commentId": 17,
"mate": {
"name": "mashiro",
"url": "",
"avatar": "https:\/\/secure.gravatar.com\/avatar\/cd2b3a164c977539712929f66cad335c?s=96&d=mm&r=g",
"ua": "Chrome 70 Windows 10",
"location": "Shanghai, China",
"level": 6,
"role": 9,
"like": 100,
"dislike": 10,
"__typename": "CommentMate"
},
"__typename": "Comment",
"children": {
"nodes": [],
"__typename": "CommentToCommentConnection"
}
},
"__typename": "PostToCommentConnectionEdge"
}],
"pageInfo": {
"endCursor": "YXJyYXljb25uZWN0aW9uOjE3",
"hasNextPage": true,
"hasPreviousPage": false,
"startCursor": "YXJyYXljb25uZWN0aW9uOjI2",
"__typename": "WPPageInfo"
},
"__typename": "PostToCommentConnection"
},
"__typename": "Post"
}
}
}
callback(data)
}
export default main

@ -1,96 +1,192 @@
import ApolloClient from 'apollo-boost'
import gql from 'graphql-tag'
class ApoloQuery {
private query: object
private callback: Function
/**
* Do an ApoloQuery
* @author Mashiro
* @since 4.0
* @param {any} query gql query object
* @param {Function} callback the callback function
*/
public constructor(
query: object,
callback: Function = function (data: any) {
console.log(data)
}
) {
this.query = query
this.callback = callback
}
public do(): void {
const client: ApolloClient = new ApolloClient()
client.query(this.query)
.then(data => this.callback(data))
.catch(error => console.log(error))
}
}
class getPostCommentByPostId {
private postId: number
private MaxChildrenLevel: number
private first: number
private last: number
private before: string
private after: string
public query: object
/**
* Get post comment bay wp post id through GraphQL
* @author Mashiro
* @license MIT
* @since 4.0
* @param {number} postId wordpress post id
* @param {number} MaxChildrenLevel post threaded (nested) comments levels deep (/wp-admin/options-discussion.php)
* @param {number} postId wordpress post id
* @param {number} first first n contents to show
* @param {number} last last n contents to show
* @param {string} before startCursor
* @param {string} after endCursor
*/
public constructor(postId: number, MaxChildrenLevel) {
public constructor(
postId: number,
first: number = null,
last: number = null,
before: string = null,
after: string = null
) {
this.postId = postId
this.MaxChildrenLevel = MaxChildrenLevel
this.first = first
this.last = last
this.before = before
this.after = after
this.gqlstring()
}
private queryChildren() {
let queryHeader: string = ``
let queryFooter: string = ``
const childrenHeader: string = `
children {
nodes {
...CommentFields`
const childrenFooter: string = `
}
}`
let addTabs = function (str: string, n: number) {
return str.replace(/^/gm, ' '.repeat(n))
}
for (let i = 0; i < this.MaxChildrenLevel; i++) {
queryHeader = addTabs(childrenHeader + queryHeader, 2)
queryFooter = addTabs(queryFooter + childrenFooter, 2)
}
return addTabs(queryHeader + queryFooter, 3)
}
// TODO: GraphQL Schema to Typescript interface?
private gqlstring(): void {
this.query = {
query: gql`
query GET_POST($postId: Int, $first: Int, $after: String) {
postBy(postId: $postId) {
id
postId
comments(first: $first, after: $after) {
edges {
node {
...CommentFields${this.queryChildren()}
query GET_POST($postId: Int, $first: Int, $after: String) {
postBy(postId: $postId) {
id
postId
comments(first: $first, after: $after) {
edges {
node {
...CommentFields
}
}
pageInfo {
endCursor
hasNextPage
hasPreviousPage
startCursor
}
}
}
}
}
pageInfo {
endCursor
hasNextPage
hasPreviousPage
startCursor
}
}
}
}
fragment CommentFields on Comment {
date
content(format: RENDERED)
commentId
mate {
name
url
avatar
ua
location
level
role
like
dislike
}
}
fragment CommentFields on Comment {
date
content(format: RENDERED)
commentId
mate {
name
url
avatar
ua
location
level
role
like
dislike
child
childPre
}
}
`,
variables: {
"postId": 1,
"first": 5,
"after": null
"postId": this.postId,
"first": this.first,
"last": this.last,
"after": this.after,
"before": this.before
},
}
}
// private queryChildren() {
// let queryHeader: string = ``
// let queryFooter: string = ``
// const childrenHeader: string = `
// children {
// nodes {
// ...CommentFields`
// const childrenFooter: string = `
// }
// }`
// let addTabs = function (str: string, n: number) {
// return str.replace(/^/gm, ' '.repeat(n))
// }
// for (let i = 0; i < this.MaxChildrenLevel; i++) {
// queryHeader = addTabs(childrenHeader + queryHeader, 2)
// queryFooter = addTabs(queryFooter + childrenFooter, 2)
// }
// return addTabs(queryHeader + queryFooter, 3)
// }
// private gqlstring_withchild(): void {
// this.query = {
// query: gql`
// query GET_POST($postId: Int, $first: Int, $after: String) {
// postBy(postId: $postId) {
// id
// postId
// comments(first: $first, after: $after) {
// edges {
// node {
// ...CommentFields${this.queryChildren()}
// }
// }
// pageInfo {
// endCursor
// hasNextPage
// hasPreviousPage
// startCursor
// }
// }
// }
// }
// fragment CommentFields on Comment {
// date
// content(format: RENDERED)
// commentId
// mate {
// name
// url
// avatar
// ua
// location
// level
// role
// like
// dislike
// }
// }
// `,
// variables: {
// "postId": this.postId,
// "first": this.first,
// "after": this.after,
// "before":this.before
// },
// }
// }
}
export { getPostCommentByPostId }
export { ApoloQuery, getPostCommentByPostId }

@ -15,7 +15,7 @@ module.exports = [{
},
output: {
path: path.resolve(__dirname, './dist'),
filename: './js/bundle_[hash].js'
filename: './js/[hash].js'
},
devtool: 'inline-source-map',
devServer: {
@ -129,7 +129,7 @@ module.exports = [{
}
}),
new MiniCssExtractPlugin({
filename: "./css/bundle_[hash].css",
filename: "./css/[hash].css",
}),
new Chunks2JsonPlugin({
outputDir: 'dist/',

Loading…
Cancel
Save