Adds Profile shortcode

utdal · Jan 30, 2018 · fa15fb1 · fa15fb1
1 parent 464e713
commit fa15fb1
Show file tree

Hide file tree

Showing 5 changed files with 198 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -18,6 +18,8 @@ Just add the shortcode to a page:
 
 `[publications person="user.slug" api="https://url.example/api"]`
 
+`[profile person="user.slug" name="true" image="true" url="true" publications="true" support="true" api="https://url.example/api"]`
+
 ## Development
 
 ### CSS / Sass

diff --git a/Shortcodes/Profile.php b/Shortcodes/Profile.php
@@ -0,0 +1,58 @@
+<?php
+
+namespace Profiles\Shortcodes;
+
+class Profile extends Shortcode
+{
+    /** @var string Shortcode name. */
+    public $name = 'profile';
+
+    /** @var array Default shortcode attributes. */
+    public $default_attributes = [
+        'person' => 'gnade',
+        'with_data' => 1,
+        'name' => true,
+        'image' => true,
+        'url' => true,
+        'publications' => true,
+        'support' => true,
+        'api' => 'https://ordev.utdallas.edu/profiles/api',
+    ];
+
+    /** @var array Filters to apply to the shortcode attributes. */
+    public $attribute_filters = [
+        'person' => FILTER_SANITIZE_FULL_SPECIAL_CHARS,
+        'with_data' => FILTER_VALIDATE_INT,
+        'name' => FILTER_VALIDATE_BOOLEAN,
+        'image' => FILTER_VALIDATE_BOOLEAN,
+        'url' => FILTER_VALIDATE_BOOLEAN,
+        'publications' => FILTER_VALIDATE_BOOLEAN,
+        'support' => FILTER_VALIDATE_BOOLEAN,
+        'api' => FILTER_VALIDATE_URL,
+    ];
+
+    /**
+     * Renders the org chart shortcode.
+     * 
+     * @return string
+     */
+    public function render()
+    {
+        // CSS
+        // wp_enqueue_style('profiles_publications_css', $this->public_url . '/css/profiles-profile.css', [], $this->version);
+
+        // JS
+        wp_register_script('profiles_profile_js', $this->public_url . '/js/profile.js', ['jquery'], $this->version);
+        wp_localize_script('profiles_profile_js', 'profiles_profile_options', $this->attributes);
+        wp_enqueue_script('profiles_profile_js');
+
+        $person = $this->person;
+
+        ob_start();
+
+        include($this->views_dir . '/profiles-profile.php');
+
+        return ob_get_clean();
+    }
+
+}
diff --git a/Views/profiles-profile.php b/Views/profiles-profile.php
@@ -0,0 +1,17 @@
+<!-- Profile Template -->
+<div id="<?= $person ?>_profile">
+    <a class="profile-url">
+        <h3 class="profile-name"></h3>
+    </a>
+    <div class="profile-image"></div>
+
+    <h4>Support</h4>
+    <div class="profile-support" data-item-text="title">
+        <span class="template">
+            <strong>$<span data-item-text="amount"></span></strong> - <i><span data-item-text="sponsor"></span></i> (<span data-item-text="start_date"></span> - <span data-item-text="end_date"></span>)
+        </span>
+    </div>
+
+    <h4>Publications</h4>
+    <div class="profile-publications" data-item-text="name"></div>
+</div>
diff --git a/profiles.php b/profiles.php
@@ -51,4 +51,5 @@
 });
 
 // Define WordPress hooks
-add_action('init', [(new Profiles\Shortcodes\Publications(Profiles\VERSION)), 'register']);
+add_action('init', [(new Profiles\Shortcodes\Publications(Profiles\VERSION)), 'register']);
+add_action('init', [(new Profiles\Shortcodes\Profile(Profiles\VERSION)), 'register']);
diff --git a/public/js/profile.js b/public/js/profile.js
@@ -0,0 +1,119 @@
+// Profile Reader Module
+var profile_reader = (function($, options, undefined) {
+
+  var person = options.person;
+  var api_url = options.api;
+  var with_data = options.with_data;
+
+  var $profile_section = $('#' + person + '_profile');
+  var $name_section = $profile_section.find('.profile-name');
+  var $image_section = $profile_section.find('.profile-image');
+  var $url_element = $profile_section.find('.profile-url');
+  var $publication_section = $profile_section.find('.profile-publications');
+  var $support_section = $profile_section.find('.profile-support');
+
+  var makeDataList = function (data, type, $target) {
+    var $data_list = $('<ul class="list-group list-group-flush"></ul>');
+    var $template = $target.find('.template');
+
+    for (var i = 0; i < data.length; i++) {
+      if (data[i].type === type) {
+        var $list_item = $('<li class="list-group-item"></li>');
+        var data_content = data[i].data;
+
+        if (typeof data_content === "object") {
+          // Set the main list item text
+          if ($target.data('item-text')) {
+            $list_item.text(data_content[$target.data('item-text')]);
+          }
+
+          // Set any additional content based on the template
+          if ($template.length > 0) {
+            var $list_item_template = $template.clone();
+            $list_item_template.find('[data-item-text]').each(function() {
+              var $template_item = $(this);
+              $template_item.text(data_content[$template_item.data('item-text')])
+            });
+            $list_item_template.appendTo($list_item);
+          }
+        }
+
+        $list_item.appendTo($data_list);
+      }
+    }
+
+    $template.css('display', 'none');
+    $data_list.appendTo($target);
+  }
+
+  var setName = function(profile) {
+    if (options.name && profile.name && $name_section.length > 0) {
+      $name_section.text(profile.name);
+    }
+  }
+
+  var setImage = function(profile) {
+    if (options.image && profile.image_url && $image_section.length > 0) {
+      $('<img src="' + profile.image_url + '" alt="profile image">').appendTo($image_section);
+    }
+  }
+
+  var setLink = function(profile) {
+    if (options.url && profile.url && $url_element.length > 0) {
+      $url_element.attr('href', profile.url);
+    }
+  }
+
+  var setPublications = function(profile) {
+    makeDataList(profile.data, 'publications', $publication_section);
+  }
+
+  var setSupport = function(profile) {
+    makeDataList(profile.data, 'support', $support_section);
+  }
+
+  // Handle the returned API results
+  var handleResults = function(results) {
+    if (typeof results === 'object' && results.hasOwnProperty('profile')) {
+      for (var k = 0; k < results.profile.length; k++) {
+        setName(results.profile[k]);
+        setImage(results.profile[k]);
+        setLink(results.profile[k]);
+        setPublications(results.profile[k]);
+        setSupport(results.profile[k]);
+      }
+    }
+  };
+
+  // If there was an error retrieving the data, show it
+  var showAjaxError = function(jqxhr, textStatus, errorThrown) {
+    $publication_section.html(errorThrown);
+  }
+
+  // GET the profile data from the API
+  var get = function() {
+    $.ajax({
+      url: api_url,
+      type: 'GET',
+      data: {
+        person: person,
+        with_data: with_data,
+      },
+      dataType: 'json',
+      success: handleResults,
+      error: showAjaxError,
+    });
+  };
+
+  return {
+    get: get,
+  };
+
+})(jQuery, profiles_profile_options);
+
+// On Page Load, get the specified profiles
+jQuery(document).ready(function($) {
+
+  profile_reader.get();
+
+});