Refactor and organize new framework modules

Author: eliot-akira

admin/index.php

@@ -0,0 +1,2 @@
+<?php
+namespace Tangible\Admin;

admin/notice/admin-notice.js

@@ -0,0 +1,26 @@
+jQuery(document).ready(function($) {
+
+  $('.notice.is-dismissible').each(function() {
+
+    var $el = $(this)
+    var key = $el.data('tangibleAdminNotice')
+    if (!key) return
+
+    // Event handler on notice itself, not button
+    $el.on('click', '.notice-dismiss', function(e) {
+
+      e.preventDefault()
+
+      // See admin-notices/enqueue
+
+      var data = {
+        action: 'tangible_dismiss_admin_notice',
+        admin_notice_key: key,
+        nonce: window.tangibleAdminNotice.nonce
+      }
+
+      $.post(window.ajaxurl, data)
+
+    })
+  })
+})

admin/notice/enqueue.php

@@ -0,0 +1,32 @@
+<?php
+
+add_action('admin_enqueue_scripts', function () use ($framework) {
+
+  if (!$framework->is_latest_version()) return;
+
+  $url = $framework->url;
+  $version = $framework->version;
+
+  $js = $url.'/assets/admin-notices.js';
+
+  wp_enqueue_script('tangible-admin-notices-js', $js, ['jquery'], $version);
+
+  wp_localize_script(
+  	'tangible-admin-notices-js',
+  	'tangibleAdminNotice',
+  	[
+      'nonce' => wp_create_nonce('tangible-dismiss-admin-notice')
+    ]
+	);
+
+});
+
+add_action('wp_ajax_tangible_dismiss_admin_notice', function() use ($framework) {
+
+  if (!$framework->is_latest_version()) return;
+
+  check_ajax_referer('tangible-dismiss-admin-notice', 'nonce');
+  $name = sanitize_text_field($_POST['admin_notice_key']);
+  $framework->dismiss_admin_notice($name);
+  exit;
+});

admin/notice/fields.php

@@ -0,0 +1,28 @@
+<?php
+
+$framework->get_admin_notice_setting_key = function($name) use ($framework) {
+  return "tangible_admin_notice_dismissed__{$name}";
+};
+
+$framework->is_admin_notice_dismissed = function($name) use ($framework) {
+
+  $key = $framework->get_admin_notice_setting_key($name);
+  $value = \is_multisite()
+    ? get_network_option(null, $key, false)
+    : get_option($key, false);
+
+  return !empty($value) && $value==='true';
+};
+
+$framework->dismiss_admin_notice = function($name, $value = 'true') use ($framework) {
+
+  $key = $framework->get_admin_notice_setting_key($name);
+
+  return \is_multisite()
+    ? update_network_option(null, $key, $value)
+    : update_option($key, $value);
+};
+
+$framework->reset_admin_notice = function($name) use ($framework) {
+  return $framework->dismiss_admin_notice($name, 'false');
+};

admin/notice/index.php

@@ -0,0 +1,17 @@
+<?php
+
+include __DIR__.'/enqueue.php';
+include __DIR__.'/fields.php';
+
+$framework->register_admin_notices = function($plugin) use ($framework) {
+
+  if (!isset($plugin['admin_notice'])) return;
+
+  $action = $framework->is_multisite($plugin)
+    ? 'network_admin_notices'
+    : 'admin_notices';
+
+  add_action($action, function() use ($plugin) {
+    $plugin['admin_notice']($plugin);
+  });
+};

api/action.php

@@ -0,0 +1,31 @@
+<?php
+
+namespace Tangible\API;
+
+use Tangible\API as api;
+
+api::$state->actions = [];
+api::$state->action_key = 'tangible_api';
+
+// Action
+
+function add_action($name, $callback) {
+  api::$state->actions[ $name ] = $callback;
+}
+
+function remove_action($name) {
+  unset(api::$state->actions[ $name ]);
+}
+
+function action($name, $data = []) {
+
+  if (!isset(api::$state->actions[ $name ])) {
+    throw new Exception("Action not found: {$action}");    
+  }
+
+  return call_user_func(api::$state->actions[ $name ], $data);
+}
+
+function get_action_key() {
+  return api::$state->action_key;
+}

api/ajax.php

@@ -0,0 +1,55 @@
+<?php
+
+namespace Tangible\API;
+
+use Tangible\API as api;
+
+// AJAX
+
+function ajax_callback() {
+
+  try {
+
+    if (!api\verify_nonce()) return api\error('Not allowed');
+
+    $request = isset($_POST['request']) ? json_decode(
+      stripslashes_deep($_POST['request']),
+      JSON_OBJECT_AS_ARRAY
+    ) : [];
+
+    if ( !is_array($request) ) $request = [];
+
+    $name = $request['action'];
+    $data = $request['data'];
+
+    /**
+     * Action callback can:
+     * 
+     * - Call api\send() or api\error(), which outputs JSON
+     * response and exits
+     * - Return a result to be sent
+     * - Throw an error
+     * 
+     * All are standardized to response as { data } or { error }.
+     */
+    $result = api\action( $name, $data );
+
+    return api\send( $result );
+
+  } catch (\Throwable $th) {
+
+    return api\error( $th->getMessage() );
+  }  
+}
+
+// Logged-in users
+add_action(
+  'wp_ajax_' . api::$state->action_key,
+  __NAMESPACE__ . '\\ajax_callback'
+);
+
+// Public
+add_action(
+  'wp_ajax_nopriv_' . api::$state->action_key,
+  __NAMESPACE__ . '\\ajax_callback'
+);

api/build/api.min.js

@@ -0,0 +1,27 @@
+<?php
+
+namespace Tangible\API;
+
+use Tangible\API as api;
+
+// Client
+
+function enqueue() {
+
+  $url = api::$state->url;
+  $version = api::$state->version;
+
+  wp_enqueue_script(
+    'tangible-api',
+    $url . '/build/api.min.js',
+    [],
+    $version,
+    true
+  );
+
+  wp_localize_script( 'tangible-api', 'Tangible.API', [
+    'ajaxUrl' => admin_url( 'admin-ajax.php' ),
+    'nonce' => api\create_nonce(),
+    'ajaxAction' => api\get_action_key()
+  ]);
+}

api/build/api.min.js.map

@@ -0,0 +1,13 @@
+<?php
+namespace Tangible;
+use Tangible\API as api;
+
+class API {
+  static $state;
+}
+
+api::$state = (object) [];
+
+require_once __DIR__.'/action.php';
+require_once __DIR__.'/ajax.php';
+require_once __DIR__.'/response.php';

api/enqueue.php

@@ -0,0 +1,17 @@
+<?php
+namespace Tangible\API;
+use Tangible\API as api;
+
+// Nonce
+
+function create_nonce() {
+  return wp_create_nonce(
+    api\get_action_key()
+  );
+};
+
+function verify_nonce() {
+  return isset($_POST['nonce'])
+    && wp_verify_nonce($_POST['nonce'], api\get_action_key())
+  ;
+};

api/index.php

@@ -0,0 +1,6 @@
+# API module
+
+The API module replaces the AJAX module in the plugin framework with a new
+interface using browser-native `fetch()` instead of `jQuery.ajax()`.
+
+First used in admin settings form, but designed to work with the Form module.

api/nonce.php

@@ -0,0 +1,28 @@
+<?php
+namespace Tangible\API;
+use Tangible\API as api;
+
+const ok = 200;
+const bad_request = 400;
+const not_found = 404;
+const forbidden = 403;
+
+// Response
+
+function send($data = []) {
+
+  status_header( api\ok ); 
+
+  echo json_encode([ 'data' => $data ]);
+  exit;
+};
+
+function error($data = []) {
+
+  $error = is_string($data) ? [ 'message' => $data ] : $data;
+
+  status_header( $error['code'] ?? api\bad_request ); 
+
+  echo json_encode([ 'error' => $error ]);
+  exit;
+};

api/readme.md

@@ -0,0 +1,48 @@
+
+export function createAction(options) {
+
+  const {
+    ajaxUrl,
+    nonce,
+    ajaxAction
+  } = options
+
+  return async function action(name, data) {
+
+    const formData = new FormData()
+  
+    formData.append('action', ajaxAction)
+    formData.append('nonce', nonce)
+    formData.append('request', JSON.stringify({
+      action: name,
+      data
+    }))
+  
+    // TODO: Support file upload
+  
+    try {
+  
+      const response = await fetch(ajaxUrl, {
+        method: 'POST',
+        credentials: 'same-origin',
+        body: formData
+      })
+  
+      if ( !(response.status >= 200 && response.status < 300) ) {
+        const error = {
+          code: response.status,
+          message: response.statusText
+        }
+        return { error }
+      }
+  
+      // Action response can be: { data } or { error }
+      return await response.json()
+  
+    } catch(error) {
+      // Convert into error response
+      return { error }
+    }
+  
+  }
+}

api/response.php

@@ -0,0 +1,35 @@
+
+// Form
+
+const inputFields = {
+  input: true,
+  select: true,
+  textarea: true
+}
+
+export function getFormData(formElement) {
+
+  // TODO: Use utility method from Form module
+
+  const data = {}
+
+  // https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements
+  const $inputs = formElement.elements
+
+  for (let index = 0; index < $inputs.length; index++) {
+
+    const $input = $inputs[index]
+    const { nodeName, type, name } = $input
+
+    // Filter out fieldset, button, etc.
+    if (!inputFields[ nodeName.toLowerCase() ]) continue
+
+    const value = type==='checkbox'
+      ? $input.checked // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox
+      : $input.value
+
+    data[name] = value
+  }
+
+  return data
+}

api/src/action.ts

@@ -0,0 +1,11 @@
+import { createAction } from './action'
+import { getFormData } from './form'
+
+// From server side
+const api = window.Tangible.API
+const action = createAction(api)
+
+Object.assign(api, {
+  action,
+  getFormData
+})