Add SRI modal for CDN

Closes gh-391
Ref jquery/codeorigin.jquery.com#22

Author: jmervine

themes/codeorigin.jquery.com/page.php

@@ -1,7 +1,39 @@
+<?php
+wp_enqueue_style('jquery-ui', 'https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css');
+wp_enqueue_style('sri-modal', get_template_directory_uri() . '/css/sri-modal.css');
+
+wp_enqueue_script('jquery-ui', 'https://code.jquery.com/ui/1.11.4/jquery-ui.min.js');
+wp_enqueue_script('clipboard', get_template_directory_uri() . '/js/clipboard.1.5.5.min.js');
+wp_enqueue_script('sri-modal', get_template_directory_uri() . '/js/sri-modal.js');
+?>
+
 <?php get_header(); ?>
 
 <?php the_post(); ?>
 
+<div id="sri-modal-template" title="Code Integration">
+	<div class="sri-modal-link">
+		<code>&lt;script
+			&nbsp;&nbsp;<span>src="{{link}}"</span>
+			&nbsp;&nbsp;<span>integrity="{{hash}}"</span>
+			&nbsp;&nbsp;<span>crossorigin="anonymous"&gt;&lt;/script&gt;</span>
+		</code>
+
+		<button class="sri-modal-copy-btn" title="Copy to clipboard!"
+			data-clipboard-text='&lt;script src="{{link}}" integrity="{{hash}}" crossorigin="anonymous"&gt;&lt;/script&gt;'>
+			<i class="sri-modal-icon-copy icon-copy"></i>
+		</button>
+	</div>
+
+	<div class="sri-modal-info">
+		The <code>integrity</code> and <code>crossorigin</code> attributes are used for
+		<a href="https://www.w3.org/TR/SRI/" target="_blank">Subresource Integrity (SRI) checking</a>.
+		This allows browsers to ensure that resources hosted on third-party servers have
+		not been tampered with. Use of SRI is recommended as a best-practice, whenever
+		libraries are loaded from a third-party source. Read more at <a href="https://www.srihash.org/" target="_blank">srihash.org</a>
+	</div>
+</div>
+
 <div class="content-full twelve columns">
 	<div id="content">
 		<?php if ( !count( get_post_meta( $post->ID, "hide_title" ) ) ) : ?>

themes/jquery/css/sri-modal.css

@@ -0,0 +1,88 @@
+/*
+ * Added for SRI Modal
+ */
+.sri-modal {
+	padding: 0;
+	border: none;
+	background: #fff;
+	border-radius: 0;
+}
+
+.sri-modal .ui-dialog-titlebar {
+	padding: 0;
+	border: none;
+	background: #fff;
+	color: #000;
+	cursor: auto;
+}
+
+.sri-modal .ui-dialog-title {
+	padding-top: 20px;
+	text-align: center;
+	font-family: "klavika-web", "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
+	font-weight: 400;
+	width: 100%;
+}
+
+.sri-modal .ui-dialog-titlebar-close {
+	background: none;
+	border: none;
+	right: 28px;
+}
+
+.sri-modal .ui-icon-closethick {
+	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAclBMVEUAAADMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMxg1ZvWAAAAJXRSTlMAAQIDBAUGCQsNDhQWGSg4g4uUoKOoq62vsLW8wMrO2tzk5ujxm/5xbwAAAGxJREFUGBmNwVcWgkAQRcFHg4FgzjomZu7+t+hpRv6p0iS7byPJTs+5BluIjewML5O7A3F1AdJMrgpkqVVWBVxqNVriNhrZDRdrZXYl62sNjkBaB6Cv5PaQOpUB3iZXHFInqXx8FvozDQpN8gNoXAtiMhPWmQAAAABJRU5ErkJggg==) 0 0;
+}
+
+.sri-modal .ui-widget-content {
+	padding: 30px 0 0 0;
+}
+
+.sri-modal .ui-widget-content a {
+	color: #b24926;
+}
+
+.sri-modal-link {
+	width: 810px;
+	word-wrap: break-word;
+	word-break: break-all;
+	display: inline-block;
+	background-color: #f8fbfb;
+	padding: 0 10px;
+	position: relative;
+}
+
+.sri-modal-link code {
+	width: 765px;
+	display: inline-block;
+	white-space: pre-line;
+	background-color: transparent;
+	padding: 0;
+	font-size: 13px;
+	line-height: 16px;
+}
+
+.sri-modal-copy-btn {
+	background-color: #1c6db3;
+	border: none;
+	font-size: 1rem;
+	width: 35px;
+	height: 35px;
+	cursor: pointer;
+	position: absolute;
+	top: 5px;
+}
+
+.sri-modal-copy-btn > i {
+	color: #fff;
+}
+
+.sri-modal-info {
+	padding: 15px;
+	font: 15px/22px "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
+}
+
+#sri-modal-template {
+	display: none;
+}
+

themes/jquery/js/clipboard.1.5.5.min.js

@@ -0,0 +1,54 @@
+$(document).ready(function() {
+	// Store modal templates
+	var modalTemplate = $( "#sri-modal-template" )[ 0 ].outerHTML,
+		clipboard;
+
+	// Show modal on click
+	$( "body" ).on( "click", ".open-sri-modal", function( event ) {
+		if ( event.ctrlKey || event.metaKey ) {
+			return;
+		}
+
+		$( replace( modalTemplate, {
+			link: document.location.origin + $( this ).attr( "href" ),
+			hash: $( this ).attr( "data-hash" )
+		} ) ).removeAttr( "id" ).appendTo( "body" ).dialog( {
+			modal: true,
+			resizable: false,
+			width: 830,
+			dialogClass: "sri-modal",
+			draggable: false,
+			close: function() {
+				$( this ).remove();
+			}
+		} );
+
+		$('.sri-modal-copy-btn').tooltip();
+		event.preventDefault();
+	} );
+
+	// Helper functions
+	function replace ( string, values ) {
+		return string.replace( /\{\{([^}]+)}}/g, function( _, key ) {
+			return values[key];
+		});
+	}
+
+	clipboard = new Clipboard( "[data-clipboard-text]" );
+
+	clipboard.on( "success", function( e ) {
+		$( e.trigger )
+			.tooltip( "option", "content", "Copied!" )
+			.one( "mouseout", function() {
+				$( this ).tooltip( "option", "content", "Copy to clipboard!" );
+			} );
+	} );
+
+	clipboard.on( "error", function( e ) {
+		$( e.trigger )
+			.tooltip( "option", "content", "Press Ctrl+C to copy!" )
+			.one( "mouseout", function() {
+				$( this ).tooltip( "option", "content", "Copy to clipboard!" );
+			} );
+	} );
+});