See CHANGELOG.md v0.4 for changes

CHANGELOG.html

@@ -1,4 +1,18 @@
 <h1 id="changelog">CHANGELOG</h1>
+<h2 id="0-4">0.4</h2>
+<ul>
+<li>Updated Medium Editor to 5.6.0</li>
+<li>Refactored <code>wa-fronted.php</code> and <code>scripts.js</code>, separating ACF functions into a core extension</li>
+<li>Added extendability to the javascript object, curtesy of ACF, (mimics wp hooks in PHP like <code>add_action</code> and <code>add_filter</code>)</li>
+<li>Added editor option <code>native</code></li>
+<li>Changed how acf_form() would save since it stopped submitting through Ajax</li>
+<li>Fixed issue where editor toolbar would not respect options since Medium Editor changed disableToolbar</li>
+<li>Fixed issue where specific output_to would not search within the container element</li>
+</ul>
+<h2 id="0-3-1">0.3.1</h2>
+<ul>
+<li>Updated Medium Editor to 5.5.3</li>
+</ul>
 <h2 id="0-3">0.3</h2>
 <ul>
 <li>Updated Plugin Update Checker to 2.2</li>

CHANGELOG.md

@@ -1,5 +1,14 @@
 CHANGELOG
 =========
+## 0.4
+* Updated Medium Editor to 5.6.0
+* Refactored `wa-fronted.php` and `scripts.js`, separating ACF functions into a core extension
+* Added extendability to the javascript object, curtesy of ACF, (mimics wp hooks in PHP like `add_action` and `add_filter`)
+* Added editor option `native`
+* Changed how acf_form() would save since it stopped submitting through Ajax
+* Fixed issue where editor toolbar would not respect options since Medium Editor changed disableToolbar
+* Fixed issue where specific output_to would not search within the container element
+
 ## 0.3.1
 * Updated Medium Editor to 5.5.3
 

README.html

@@ -49,6 +49,7 @@ <h2 id="configuration">Configuration</h2>
 </code></pre>
 <h2 id="options">Options</h2>
 <ul>
+<li><strong>native</strong> (optional, bool): <code>true</code> (default, setup the native editor), <code>false</code> (utilize the do_action function instead)</li>
 <li><strong>container</strong> (required, string): selector of wrapping element of what you want to edit. Can be any valid jQuery selector string</li>
 <li><strong>field_type</strong> (required, string): <code>post_content</code>, <code>post_title</code>, <code>post_thumbnail</code> (note that if you don&#39;t use the<em>post_thumbnail() function, the image has to have the class &#39;attachment-post-thumbnail&#39;), `acf</em>{FIELD ID}<code>/</code>acf<em>sub</em>{SUBFIELD ID}` (if set and <strong>toolbar</strong> is not specified, <strong>toolbar</strong> will set itself based on what field it is)</li>
 <li><strong>permission</strong> (optional, string): <code>logged-in</code> (enable to all logged in users), <code>default</code> (default, enabled if user has capability <em>edit_posts</em>), <code>{USER ROLE}</code> (enable to specific user role)</li>
@@ -65,8 +66,9 @@ <h2 id="options">Options</h2>
 </li>
 </ul>
 <h2 id="action-hooks">Action hooks</h2>
+<h1 id="php">PHP</h1>
 <ul>
-<li><strong>wa_fronted_init</strong> runs upon plugin initialization, before the options array has been set</li>
+<li><strong>wa_fronted_inited</strong> runs upon plugin initialization, before the options array has been set</li>
 <li><strong>wa_fronted_after_init</strong> runs after the options array has been set (passes complete JSON encoded options as argument)</li>
 <li><strong>wa_fronted_before_scripts</strong> runs before plugin has registered all its scripts and styles (passes complete JSON encoded options as argument)</li>
 <li><strong>wa_fronted_after_scripts</strong> runs after plugin has registered all its scripts and styles (passes complete JSON encoded options as argument)</li>
@@ -77,14 +79,32 @@ <h2 id="action-hooks">Action hooks</h2>
 <li><strong>wa_fronted_settings_modal_footer</strong> runs when settings modal footer renders (the container where the update button is, still inside the settings form element) (passes complete options array as argument)</li>
 <li><strong>wa_fronted_settings_form_save</strong> runs after the post has been updated with the new values but before user has been redirected to the new permalink</li>
 </ul>
+<h1 id="javascript">Javascript</h1>
+<blockquote>
+<p>The javascript action hooks functions very similarly to their native PHP counterparts. Only difference is that these functions resides within the <code>wa_fronted</code> object, so to call the <code>add_action</code> function, you type like so: <code>wa_fronted.add_action(&#39;action_name&#39;, function);</code></p>
+</blockquote>
+<ul>
+<li><strong>on_init</strong> runs within the wa_fronted.initialize function</li>
+<li><strong>on_bind</strong> runs within the wa_fronted.bind function</li>
+<li><strong>on_setup_editor</strong> if the option <code>native</code> is true, this action will run instead of the regular editor setup, passes 3 arguments, jQuery object of editor container, current editor options and full options object</li>
+</ul>
 <p><em>I&#39;ll try to add hooks where I see it could be useful, but if you are missing one, please post an issue requesting it</em></p>
 <h2 id="filters">Filters</h2>
+<h1 id="php">PHP</h1>
 <ul>
 <li><strong>supported_acf_fields</strong> modify supported ACF fields array (1 argument)</li>
-<li><strong>compile_options</strong> modify the partially compiled options array (1 argument, called multiple times)</li>
+<li><strong>compile_options</strong> modify the partially compiled options array (3 arguments, $compiled_options, $default_options, $new_options, called multiple times)</li>
 <li><strong>wa_fronted_options</strong> modify options array, use this to set your options (1 argument)</li>
 <li><strong>wa_fronted_settings_values</strong> modify values before they&#39;re sent to the <code>wp_update_post</code> function array, use this to set your options (1 argument)</li>
 </ul>
+<h1 id="javascript">Javascript</h1>
+<blockquote>
+<p>The javascript filters functions very similarly to their native PHP counterparts. Only difference is that these functions resides within the <code>wa_fronted</code> object, so to call the <code>add_filter</code> function, you type like so: <code>wa_fronted.add_filter(&#39;filter_name&#39;, function(value){ return value; });</code></p>
+</blockquote>
+<ul>
+<li><strong>toolbar_buttons</strong> modify the buttons available to the editor toolbar, passes an array of strings as the first argument <em>(which should be returned)</em> and current editor options as second</li>
+<li><strong>medium_extensions</strong> modify extensions of the Medium Editor, passes an object with active extensions as the first argument <em>(which should be returned)</em>, and current editor options as second. Want to make a toolbar extension? <a href="https://github.com/yabwe/medium-editor/tree/master/src/js/extensions">Look here</a></li>
+</ul>
 <p><em>I&#39;ll try to add filters where I see it could be useful, but if you are missing one, please post an issue requesting it</em></p>
 <h2 id="supported-acf-field-types">Supported ACF field types</h2>
 <ul>
@@ -113,13 +133,13 @@ <h2 id="features">Features</h2>
 <li>[x] Ability to edit featured image</li>
 <li>[x] Show unsaved changes warning if leaving page</li>
 <li>[x] Ability to edit other columns from the posts table (<code>post_name</code>, <code>post_date</code> and <code>post_status</code>)</li>
+<li>[x] Extend pluggability further and support for extensions (enable to hook onto and modify js editor)</li>
+<li>[ ] WooCommerce support (other than standard WP fields)</li>
 <li>[ ] Native custom fields support</li>
 <li>[ ] Shortcodes support (other than gallery)</li>
 <li>[ ] Autosave (need some discussion on how to best implement this)</li>
-<li>[ ] WooCommerce support (other than standard WP fields)</li>
 <li>[ ] Image upload by dropping an image into the editable area</li>
 <li>[ ] Drag image to move it within the editable area</li>
-<li>[ ] Extend pluggability further and support for extensions (enable to hook onto and modify js editor)</li>
 <li>[ ] Multiple <code>output_to</code> selectors and attrs</li>
 <li>[ ] Choice-based fields like dropdown-select (click on content to show dropdown and select option to insert)</li>
 <li>[ ] More ACF fields support</li>
@@ -144,6 +164,8 @@ <h2 id="proposed-features">Proposed features</h2>
 <li>[ ] Markdown parser</li>
 <li>[ ] Column-maker (made as an add-on?)</li>
 </ul>
+<h2 id="extending">Extending</h2>
+<p>There will be a proper how-to guide here, but for now, you can look in the <code>extensions</code> folder on how to create an extension</p>
 <h2 id="collaboration-notes">Collaboration notes</h2>
 <ul>
 <li>I&#39;m using sass for styling and <a href="https://prepros.io/">PrePros</a> for compiling (there&#39;s a free version if you wanna check it out)</li>

README.md

@@ -12,7 +12,7 @@ Frontend editor for WordPress, an experiment with a goal to enhance usability an
 ![](https://github.com/jesperbjerke/wa-fronted/blob/master/screenshots/screenshot-2.jpg)
 ![](https://github.com/jesperbjerke/wa-fronted/blob/master/screenshots/screenshot-3.jpg)
 
-##Configuration
+## Configuration
 To enable an editable area, simply add a filter function to `wa_fronted_options` that passes and returns a multidimensional array. Note that both themes and plugins can call this filter before or after eachother and build upon or replace options.
 
 The first level of the array consists of the key `defaults` (optional) and `post_types`. In `defaults`, specify whatever you want to be set as default when you have not set anything else in that specific area. In `post_types` you create an array for each post type you want to enable frontend editing for (you can also use `front_page` if you just want to target your static front page). Inside, you set `editable_areas` with an array with options for each editable area on this post type.
@@ -57,6 +57,7 @@ add_filter('wa_fronted_options', 'my_editor_options');
 ```
 
 ## Options
+* **native** (optional, bool): `true` (default, setup the native editor), `false` (utilize the do_action function instead)
 * **container** (required, string): selector of wrapping element of what you want to edit. Can be any valid jQuery selector string
 * **field_type** (required, string): `post_content`, `post_title`, `post_thumbnail` (note that if you don't use the_post_thumbnail() function, the image has to have the class 'attachment-post-thumbnail'), `acf_{FIELD ID}` / `acf_sub_{SUBFIELD ID}` (if set and **toolbar** is not specified, **toolbar** will set itself based on what field it is)
 * **permission** (optional, string): `logged-in` (enable to all logged in users), `default` (default, enabled if user has capability *edit_posts*), `{USER ROLE}` (enable to specific user role)
@@ -74,7 +75,9 @@ array(
 ```
 
 ## Action hooks
-* **wa_fronted_init** runs upon plugin initialization, before the options array has been set
+
+# PHP
+* **wa_fronted_inited** runs upon plugin initialization, before the options array has been set
 * **wa_fronted_after_init** runs after the options array has been set (passes complete JSON encoded options as argument)
 * **wa_fronted_before_scripts** runs before plugin has registered all its scripts and styles (passes complete JSON encoded options as argument)
 * **wa_fronted_after_scripts** runs after plugin has registered all its scripts and styles (passes complete JSON encoded options as argument)
@@ -85,17 +88,33 @@ array(
 * **wa_fronted_settings_modal_footer** runs when settings modal footer renders (the container where the update button is, still inside the settings form element) (passes complete options array as argument)
 * **wa_fronted_settings_form_save** runs after the post has been updated with the new values but before user has been redirected to the new permalink
 
+# Javascript
+> The javascript action hooks functions very similarly to their native PHP counterparts. Only difference is that these functions resides within the `wa_fronted` object, so to call the `add_action` function, you type like so: `wa_fronted.add_action('action_name', function);`
+
+* **on_init** runs within the wa_fronted.initialize function
+* **on_bind** runs within the wa_fronted.bind function
+* **on_setup_editor** if the option `native` is true, this action will run instead of the regular editor setup, passes 3 arguments, jQuery object of editor container, current editor options and full options object
+
 *I'll try to add hooks where I see it could be useful, but if you are missing one, please post an issue requesting it*
 
 ## Filters
+
+# PHP
 * **supported_acf_fields** modify supported ACF fields array (1 argument)
-* **compile_options** modify the partially compiled options array (1 argument, called multiple times)
+* **compile_options** modify the partially compiled options array (3 arguments, $compiled_options, $default_options, $new_options, called multiple times)
 * **wa_fronted_options** modify options array, use this to set your options (1 argument)
 * **wa_fronted_settings_values** modify values before they're sent to the `wp_update_post` function array, use this to set your options (1 argument)
 
+
+# Javascript
+> The javascript filters functions very similarly to their native PHP counterparts. Only difference is that these functions resides within the `wa_fronted` object, so to call the `add_filter` function, you type like so: `wa_fronted.add_filter('filter_name', function(value){ return value; });`
+
+* **toolbar_buttons** modify the buttons available to the editor toolbar, passes an array of strings as the first argument *(which should be returned)* and current editor options as second
+* **medium_extensions** modify extensions of the Medium Editor, passes an object with active extensions as the first argument *(which should be returned)*, and current editor options as second. Want to make a toolbar extension? [Look here](https://github.com/yabwe/medium-editor/tree/master/src/js/extensions)
+
 *I'll try to add filters where I see it could be useful, but if you are missing one, please post an issue requesting it*
 
-##Supported ACF field types
+## Supported ACF field types
 * Text
 * Text Area
 * Number
@@ -107,7 +126,7 @@ array(
 * Image
 * File
 
-##Features
+## Features
 > Unchecked boxes are features that are planned to be implemented in the near future (in no particular order)
 
 * [x] Automatic changing of image size to load when changing size of image in content
@@ -119,13 +138,13 @@ array(
 * [x] Ability to edit featured image
 * [x] Show unsaved changes warning if leaving page
 * [x] Ability to edit other columns from the posts table (`post_name`, `post_date` and `post_status`)
+* [x] Extend pluggability further and support for extensions (enable to hook onto and modify js editor)
+* [ ] WooCommerce support (other than standard WP fields)
 * [ ] Native custom fields support
 * [ ] Shortcodes support (other than gallery)
 * [ ] Autosave (need some discussion on how to best implement this)
-* [ ] WooCommerce support (other than standard WP fields)
 * [ ] Image upload by dropping an image into the editable area
 * [ ] Drag image to move it within the editable area
-* [ ] Extend pluggability further and support for extensions (enable to hook onto and modify js editor)
 * [ ] Multiple `output_to` selectors and attrs
 * [ ] Choice-based fields like dropdown-select (click on content to show dropdown and select option to insert)
 * [ ] More ACF fields support
@@ -136,7 +155,7 @@ array(
 * [ ] Translation
 * [ ] Mirror style of current WP admin theme
 
-##Proposed features
+## Proposed features
 > These features requires further discussion, not yet set to be implemented
 
 * [ ] Enhance UX by visualizing which area you are editing
@@ -148,12 +167,15 @@ array(
 * [ ] Markdown parser
 * [ ] Column-maker (made as an add-on?)
 
-##Collaboration notes
+## Extending
+There will be a proper how-to guide here, but for now, you can look in the `extensions` folder on how to create an extension
+
+## Collaboration notes
 * I'm using sass for styling and [PrePros](https://prepros.io/) for compiling (there's a free version if you wanna check it out)
 * JS files are minified and concatenated with [PrePros](https://prepros.io/), so without it you'll have to load the other js files individually (see prepros-prepend comments in the beginning of scripts.js)
 * I'm using [Bower](http://bower.io/) for keeping [Medium Editor](https://github.com/yabwe/medium-editor) and [jQuery Timepicker Addon](https://github.com/trentrichardson/jQuery-Timepicker-Addon) up to date, right now there are no other dependancies other than jQuery but that comes with WP
 * Core features should be free and open source
 * Comment your code
 
-##License
+## License
 See the [LICENSE](LICENSE.md) file for license rights (GPLv2)

bower_components/medium-editor/.bower.json

@@ -36,15 +36,15 @@
     "README.md",
     "CHANGES.md"
   ],
-  "version": "5.5.3",
-  "_release": "5.5.3",
+  "version": "5.6.0",
+  "_release": "5.6.0",
   "_resolution": {
     "type": "version",
-    "tag": "5.5.3",
-    "commit": "24fc2ecf07eebeba41c1ca424ab87badaec30f12"
+    "tag": "5.6.0",
+    "commit": "cfbf6c27599c5e423a0fde1965040b76c665fea9"
   },
   "_source": "git://github.com/daviferreira/medium-editor.git",
-  "_target": "~5.5.3",
+  "_target": "~5.6.0",
   "_originalSource": "medium-editor",
   "_direct": true
 }

bower_components/medium-editor/dist/css/themes/tim.css

@@ -0,0 +1,67 @@
+.medium-toolbar-arrow-under:after {
+  border-color: #2f1e07 transparent transparent transparent;
+  top: 60px; }
+
+.medium-toolbar-arrow-over:before {
+  border-color: transparent transparent #2f1e07 transparent; }
+
+.medium-editor-toolbar {
+  background-color: #2f1e07;
+  border: 1px solid #5b3a0e;
+  border-radius: 4px; }
+  .medium-editor-toolbar li button {
+    background-color: transparent;
+    border: none;
+    border-right: 1px solid #5b3a0e;
+    box-sizing: border-box;
+    color: #fff;
+    height: 60px;
+    min-width: 60px;
+    -webkit-transition: background-color 0.2s ease-in, color 0.2s ease-in;
+            transition: background-color 0.2s ease-in, color 0.2s ease-in; }
+    .medium-editor-toolbar li button:hover {
+      background-color: #030200;
+      color: #fff; }
+  .medium-editor-toolbar li .medium-editor-button-first {
+    border-bottom-left-radius: 4px;
+    border-top-left-radius: 4px; }
+  .medium-editor-toolbar li .medium-editor-button-last {
+    border-bottom-right-radius: 4px;
+    border-right: none;
+    border-top-right-radius: 4px; }
+  .medium-editor-toolbar li .medium-editor-button-active {
+    background-color: #030200;
+    color: #fff; }
+
+.medium-editor-toolbar-form {
+  background: #2f1e07;
+  border-radius: 4px;
+  color: #fff; }
+  .medium-editor-toolbar-form .medium-editor-toolbar-input {
+    background: #2f1e07;
+    color: #fff;
+    height: 60px; }
+    .medium-editor-toolbar-form .medium-editor-toolbar-input::-webkit-input-placeholder {
+      color: #fff;
+      color: rgba(255, 255, 255, 0.8); }
+    .medium-editor-toolbar-form .medium-editor-toolbar-input:-moz-placeholder {
+      /* Firefox 18- */
+      color: #fff;
+      color: rgba(255, 255, 255, 0.8); }
+    .medium-editor-toolbar-form .medium-editor-toolbar-input::-moz-placeholder {
+      /* Firefox 19+ */
+      color: #fff;
+      color: rgba(255, 255, 255, 0.8); }
+    .medium-editor-toolbar-form .medium-editor-toolbar-input:-ms-input-placeholder {
+      color: #fff;
+      color: rgba(255, 255, 255, 0.8); }
+  .medium-editor-toolbar-form a {
+    color: #fff; }
+
+.medium-editor-toolbar-anchor-preview {
+  background: #2f1e07;
+  border-radius: 4px;
+  color: #fff; }
+
+.medium-editor-placeholder:after {
+  color: #5b3a0e; }