Base loader for pure JS app

* defines a bas class and hooks an ajax action in press-this.php * press-this.html: base HTML file/loader * load.js: loaded by press-this.html after hosted jQuery * config-*.js: contextual app config files loaded by load.js based on if bookmarklet or extension * app.js: loaded by load.js once configs are primed, app logic goes here. You can test the base work by activating the Press This plugin in WP, then going directly to http://your_site/wp-content/plugins/press-this/press-this.html
MichaelArestad · May 8, 2014 · d2fd832 · d2fd832
1 parent 306fffa
commit d2fd832
Show file tree

Hide file tree

Showing 6 changed files with 134 additions and 1 deletion.
diff --git a/js/app.js b/js/app.js
@@ -0,0 +1,23 @@
+( function( $ ) {
+	$( document ).ready(function( $ ) {
+		var WpPressThis_App = function() {
+			var app_config  = window.wp_pressthis_config.app_config || {},
+				site_config = window.wp_pressthis_config.site_config || {}
+
+			function initialize(){
+				if ( ! app_config.ajax_url || ! site_config.nonce ) {
+					// @TODO Fail gracefully, we're kinda stuck
+					return;
+				}
+
+				// We're on!
+				$("head title").text(site_config.i18n['Welcome to Press This!']);
+				$("body").add("p").text(site_config.i18n['Welcome to Press This!']);
+			}
+
+			initialize();
+		};
+
+		window.wp_pressthis_app = new WpPressThis_App();
+	});
+}( jQuery ));
diff --git a/js/config-bookmarklet.js b/js/config-bookmarklet.js
@@ -0,0 +1,4 @@
+var WpPressThis_AppConfig = {
+	is_extension:  false,
+	ajax_url:      '../../../wp-admin/admin-ajax.php' // Local site from which the bookmarklet is accessed
+};
diff --git a/js/config-extensions.js b/js/config-extensions.js
@@ -0,0 +1,4 @@
+var WpPressThis_AppConfig = {
+	is_extension:  true,
+	ajax_url:      false // Needs site specs
+};
diff --git a/js/load.js b/js/load.js
@@ -0,0 +1,72 @@
+( function( $ ) {
+	$( document ).ready(function( $ ) {
+		var WpPressThis_Loader = function() {
+			// Defines base variables
+			var local_file_base_path = './js/',
+				app_config_file = 'config-bookmarklet.js', // default to bookmarklet context
+				app_logic_file = 'app.js',
+				app_config = {},
+				site_config_callback = 'press_this_site_settings',
+				site_config = {};
+
+			function initialize() {
+
+				if (!app_config.ajax_url) {
+					// @TODO define if extension, load appropriate file if so
+					if (false === true) {
+						app_config_file = 'config-extensions.js';
+					}
+
+					// Now make the file a file path
+					app_config_file = local_file_base_path + app_config_file;
+
+					// Load the approriate config file/script
+					$.getScript(app_config_file)
+						.done(function (script, textStatus) {
+							app_config = WpPressThis_AppConfig || {};
+							load_site_config();
+						})
+						.fail(function (jqxhr, settings, exception) {
+							// Booooh, fail... @TODO: Do so gracefully.
+							console.log("Triggered ajaxError handler. ");
+						});
+				} else {
+					load_site_config();
+				}
+			}
+
+			function load_site_config() {
+				// Still no app config?
+				if (!app_config) {
+					// @TODO Fail gracefully, we're kinda stuck
+					return;
+				} else if (!app_config.ajax_url) {
+					// @TODO Usually extension context, likely need to load the multi-blog contextual UX/UI,
+					// define app_config.ajax_url (target site) and set it in localStorage for the future
+				}
+
+				// We now have a good idea what context we're dealing with, let's get some site specific config/data
+				$.post(app_config.ajax_url, { action: site_config_callback}, function (response) {
+					site_config = $.parseJSON(response) || {};
+
+					if (!site_config.nonce) {
+						// @TODO Fail gracefully, we're kinda stuck
+						return;
+					}
+
+					window.wp_pressthis_config = {
+						'app_config':  app_config,
+						'site_config': site_config
+					};
+
+					// That's it for the loader, now load the real app.js and let it take over.
+					$.getScript(local_file_base_path + app_logic_file);
+				});
+			}
+
+			initialize();
+		};
+
+		window.wp_pressthis_loader = new WpPressThis_Loader();
+	});
+}( jQuery ));
diff --git a/press-this.html b/press-this.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title></title>
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+    <script src="./js/load.js" language="JavaScript"></script>
+</head>
+<body>
+</body>
+</html>
diff --git a/press-this.php b/press-this.php
@@ -10,4 +10,23 @@
 Domain Path: /languages
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
-*/
+*/
+
+class WpPressThis {
+	public function __construct() {
+		add_action( 'wp_ajax_press_this_site_settings', array( $this, 'press_this_site_settings' ) );
+		add_action( 'wp_ajax_nopriv_press_this_site_settings', array( $this, 'press_this_site_settings' ) );
+	}
+
+	public function press_this_site_settings() {
+		echo json_encode(array(
+			'nonce' => wp_create_nonce( 'press_this_site_settings' ),
+			'i18n'  => array(
+				'Welcome to Press This!' => __('Welcome to Press This!', 'press-this'),
+			),
+		));
+		die();
+	}
+}
+
+new WpPressThis;