Merge branch 'develop' into develop

Author: bmuenzenmeyer

.gitignore

@@ -2,3 +2,4 @@ node_modules/*
 src/bower_components/*
 .sass-cache/*
 .DS_Store
+/.eslintignore

dist/index.html

@@ -37,7 +37,7 @@
 
     <div class="pl-c-viewport__iframe-wrapper pl-js-vp-iframe-container">
 
-        <iframe class="pl-c-viewport__iframe pl-js-iframe" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
+        <iframe class="pl-c-viewport__iframe pl-js-iframe" sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-modals"></iframe>
 
         <div class="pl-c-viewport__resizer pl-js-resize-container">
 
@@ -49,14 +49,17 @@
 
 </div><!--end pl-c-viewport--> 
 
-	<div class="pl-c-modal pl-js-modal">
-    
-    <button class="pl-c-modal__close-btn pl-js-modal-close-btn" title="Hide pattern info">
-        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" viewBox="0 0 12 12" class="pl-c-modal__close-btn-icon">
-            <title>Close</title>
-            <path fill="currentColor" d="M11.8905,9.6405 L11.8905,9.6405 L8.25,6 L11.8905,2.3595 L11.8905,2.3595 C11.9295,2.3205 11.958,2.27475 11.976,2.226 C12.0255,2.0925 11.997,1.9365 11.8905,1.82925 L10.17075,0.1095 C10.0635,0.00225 9.9075,-0.02625 9.774,0.024 C9.72525,0.042 9.6795,0.0705 9.6405,0.1095 L9.6405,0.1095 L6,3.75 L2.3595,0.1095 L2.3595,0.1095 C2.3205,0.0705 2.27475,0.042 2.226,0.024 C2.0925,-0.0255 1.9365,0.00225 1.82925,0.1095 L0.1095,1.82925 C0.00225,1.9365 -0.02625,2.0925 0.024,2.226 C0.042,2.27475 0.0705,2.3205 0.1095,2.3595 L0.1095,2.3595 L3.75,6 L0.1095,9.6405 L0.1095,9.6405 C0.0705,9.6795 0.042,9.72525 0.024,9.774 C-0.0255,9.9075 0.00225,10.0635 0.1095,10.17075 L1.82925,11.8905 C1.9365,11.99775 2.0925,12.02625 2.226,11.976 C2.27475,11.958 2.3205,11.9295 2.3595,11.8905 L2.3595,11.8905 L6,8.25 L9.6405,11.8905 L9.6405,11.8905 C9.6795,11.9295 9.72525,11.958 9.774,11.976 C9.9075,12.0255 10.0635,11.99775 10.17075,11.8905 L11.8905,10.17075 C11.99775,10.0635 12.02625,9.9075 11.976,9.774 C11.958,9.72525 11.9295,9.6795 11.8905,9.6405 L11.8905,9.6405 Z"></path>
-        </svg>
-    </button><!--end pl-c-modal__close-btn-->
+	<div class="pl-c-modal__cover pl-js-modal-cover"></div>
+<div class="pl-c-modal pl-js-modal">
+    <div class="pl-c-modal__toolbar">
+        <div class="pl-c-modal__resizer pl-js-modal-resizer"></div>
+        <button class="pl-c-modal__close-btn pl-js-modal-close-btn" title="Hide pattern info">
+            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" viewBox="0 0 12 12" class="pl-c-modal__close-btn-icon">
+                <title>Close</title>
+                <path fill="currentColor" d="M11.8905,9.6405 L11.8905,9.6405 L8.25,6 L11.8905,2.3595 L11.8905,2.3595 C11.9295,2.3205 11.958,2.27475 11.976,2.226 C12.0255,2.0925 11.997,1.9365 11.8905,1.82925 L10.17075,0.1095 C10.0635,0.00225 9.9075,-0.02625 9.774,0.024 C9.72525,0.042 9.6795,0.0705 9.6405,0.1095 L9.6405,0.1095 L6,3.75 L2.3595,0.1095 L2.3595,0.1095 C2.3205,0.0705 2.27475,0.042 2.226,0.024 C2.0925,-0.0255 1.9365,0.00225 1.82925,0.1095 L0.1095,1.82925 C0.00225,1.9365 -0.02625,2.0925 0.024,2.226 C0.042,2.27475 0.0705,2.3205 0.1095,2.3595 L0.1095,2.3595 L3.75,6 L0.1095,9.6405 L0.1095,9.6405 C0.0705,9.6795 0.042,9.72525 0.024,9.774 C-0.0255,9.9075 0.00225,10.0635 0.1095,10.17075 L1.82925,11.8905 C1.9365,11.99775 2.0925,12.02625 2.226,11.976 C2.27475,11.958 2.3205,11.9295 2.3595,11.8905 L2.3595,11.8905 L6,8.25 L9.6405,11.8905 L9.6405,11.8905 C9.6795,11.9295 9.72525,11.958 9.774,11.976 C9.9075,12.0255 10.0635,11.99775 10.17075,11.8905 L11.8905,10.17075 C11.99775,10.0635 12.02625,9.9075 11.976,9.774 C11.958,9.72525 11.9295,9.6795 11.8905,9.6405 L11.8905,9.6405 Z"></path>
+            </svg>
+        </button><!--end pl-c-modal__close-btn-->
+    </div>
 
     <div class="pl-c-modal__content pl-js-modal-content" />
 
@@ -222,68 +225,68 @@
 	<div class="pl-c-pattern-info__header">
 
 		<ul class="pl-c-breadcrumb">
-			
+
 			{{# patternBreadcrumb }}
 
 			<li class="pl-c-breadcrumb__item">{{ patternType }}</li>
 
 			{{# patternSubtype }}
 			<li class="pl-c-breadcrumb__item">{{ patternSubtype }}</li>
-			{{/ patternSubtype }} 
-			
+			{{/ patternSubtype }}
+
 			{{/ patternBreadcrumb }}
 
 		</ul><!--end pl-c-breadcrumb-->
 
 		<h2 class="pl-c-pattern-info__title">
-			{{ patternName }} 
-			
+			{{ patternName }}
+
 			{{# patternState }}
 			<span class="pl-c-pattern-state pl-c-pattern-state--{{ patternState }}" title="{{ patternState }}"></span>
 			{{/ patternState }}
 		</h2><!--end pl-c-pattern-info__title-->
 
 	</div><!--end pl-c-pattern-info__header-->
-	{{/ isPatternView }} 
-	
+	{{/ isPatternView }}
+
 	{{# patternDescExists }}
 	<div class="pl-c-pattern-info__description pl-c-text-passage">
 		{{{ patternDesc }}} {{# patternDescAdditions }} {{{ patternDescAdditions }}} {{/ patternDescAdditions }}
 	</div><!--end pl-c-pattern-info__description-->
-	{{/ patternDescExists }} 
-	
+	{{/ patternDescExists }}
+
 	{{# lineageExists }}
 	<p class="pl-c-lineage pl-js-lineage">
-		The <em>{{ patternName }}</em> pattern contains the following patterns: 
+		The <em>{{ patternName }}</em> pattern contains the following patterns:
 		{{# lineage }}
 		<a href='{{ lineagePath }}' class='pl-c-lineage__link pl-js-lineage-link' data-patternPartial='{{ lineagePattern }}'>
-			{{ lineagePattern }} 
+			{{ lineagePattern }}
 			{{# lineageState }}<span class="pl-c-pattern-state pl-c-pattern-state--{{ lineageState }}" title="{{ lineageState }}" />{{/ lineageState }}
 		</a><!--end pl-c-lineage__link-->
-		{{# hasComma }}, {{/ hasComma }} 
+		{{# hasComma }}, {{/ hasComma }}
 		{{/ lineage }}
 
 	</p><!--end pl-c-lineage-->
-	{{/ lineageExists }} 
-	
+	{{/ lineageExists }}
+
 	{{# lineageRExists }}
 	<p class="pl-c-lineage">
-		The <em>{{ patternName }}</em> pattern is included in the following patterns: 
+		The <em>{{ patternName }}</em> pattern is included in the following patterns:
 		{{# lineageR }}
 		<a href='{{ lineagePath }}' class='pl-c-lineage__link pl-js-lineage-link' data-patternPartial='{{ lineagePattern }}'>
-			{{ lineagePattern }} 
+			{{ lineagePattern }}
 			{{# lineageState }}<span class="pl-c-pattern-state pl-c-pattern-state--{{ lineageState }}" title="{{ lineageState }}" />{{/ lineageState }}
 		</a><!--end pl-c-lineage__link-->
 		{{# hasComma }}, {{/ hasComma }}
 		{{/ lineageR }}
 	</p><!--end pl-c-lineage-->
-	{{/ lineageRExists }} 
-	
+	{{/ lineageRExists }}
+
 	{{# annotationExists }}
 	<div class="pl-c-annotations pl-c-text-passage pl-js-annotations">
 		<h2 class="pl-c-annotations__title">Annotations</h2>
 		<ol class="pl-c-annotations__list">
-			
+
 			{{# annotations }}
 			<li class="pl-c-annotations__item">
 
@@ -322,6 +325,8 @@ <h3 class="pl-c-annotations__item-title">{{ title }}</h3>
 
 			{{# panels }}
 			<div id="pl-{{ patternPartial }}-{{ id }}-panel" class="pl-c-tabs__panel pl-js-tab-panel">
+				<button class="pl-c-code-copy-btn pl-js-code-copy-btn" data-clipboard-target="#pl-{{ patternPartial }}-{{ id }}-panel code">Copy</button>
+
 				{{{ content }}}
 			</div><!--end pl-c-tabs__panel-->
 			{{/ panels }}
@@ -331,13 +336,15 @@ <h3 class="pl-c-annotations__item-title">{{ title }}</h3>
 	</div><!--end pl-c-tabs-->
 
 </div><!--end pl-c-pattern-info__panel-->
+
 	</script>
 
 	<!-- the template for code-related tabs in the code view slider -->
 	<script type="text/mustache" id="pl-panel-template-code">
 		<pre class="language-markup">
 	<code id="pl-code-fill-{{ language }}" class="language-{{ language }}">{{{ code }}}</code>
 </pre>
+
 	</script>
 
 	<!-- load Pattern Lab data -->