Merge pull request #10 from 10up/feature/add-code-mirror

Add CodeMirror with line numbers and basic highlighting. Linting yet to come.

inc/admin.php

@@ -14,7 +14,8 @@ function admin_enqueue_scripts( $hook ) {
 		return;
 	}
 
-	wp_enqueue_script( 'adstxt', plugins_url( '/js/admin.js', dirname( __FILE__ ) ), array( 'jquery', 'wp-backbone' ), false, true );
+	wp_enqueue_script( 'adstxt', plugins_url( '/js/admin.js', dirname( __FILE__ ) ), array( 'jquery', 'wp-backbone', 'wp-codemirror' ), false, true );
+	wp_enqueue_style( 'code-editor' );
 
 	$strings = array(
 		'saved'         => __( 'Ads.txt saved', 'ads-txt' ),
@@ -26,6 +27,28 @@ function admin_enqueue_scripts( $hook ) {
 }
 add_action( 'admin_enqueue_scripts', __NAMESPACE__ . '\admin_enqueue_scripts' );
 
+/**
+ * Output some CSS directly in the head of the document.
+ *
+ * Should there ever be more than ~25 lines of CSS, this should become a separate file.
+ *
+ * @return void
+ */
+function admin_head_css() {
+?>
+<style>
+.CodeMirror {
+	width: 100%;
+	min-height: 60vh;
+	height: calc( 100vh - 295px );
+	border: 1px solid #ddd;
+	box-sizing: border-box;
+}
+</style>
+<?php
+}
+add_action( 'admin_head-settings_page_adstxt-settings', __NAMESPACE__ . '\admin_head_css' );
+
 /**
  * Add admin menu page.
  *

js/admin.js

@@ -1,7 +1,11 @@
 ( function( $, _ ) {
 	var submit               = $( document.getElementById( 'submit' ) ),
-		notificationArea = $( document.getElementById( 'adstxt-notification-area' ) ),
-		notificationTemplate = wp.template( 'adstext-notice' );
+		notificationArea     = $( document.getElementById( 'adstxt-notification-area' ) ),
+		notificationTemplate = wp.template( 'adstext-notice' ),
+		editor               = wp.CodeMirror.fromTextArea( document.getElementById( 'adstxt_content' ), {
+			lineNumbers: true,
+			mode: 'shell'
+		} );
 
 	submit.on( 'click', function( e ){
 		e.preventDefault();
@@ -17,6 +21,9 @@
 		// clear any existing messages
 		notices.remove();
 
+		// Copy the code mirror contents into for for submission.
+		textarea.val( editor.getValue() );
+
 		$.ajax({
 			type: 'POST',
 			dataType: 'json',
@@ -53,5 +60,6 @@
 		} else {
 			submit.attr( 'disabled', 'disabled' );
 		}
-	})
+	} );
+
 } )( jQuery, _ );

readme.txt

@@ -3,7 +3,7 @@ Contributors: helen, adamsilverstein, 10up
 Author URI: http://10up.com
 Plugin URI: https://github.com/10up/ads-txt
 Tags: ads.txt, ads, ad manager, advertising, publishing, publishers
-Requires at least: 4.6
+Requires at least: 4.9
 Tested up to: 4.9.1
 Requires PHP: 5.3
 Stable tag: trunk