July 2022 Snapshot

js/cwd_card_slider.js

@@ -1,4 +1,4 @@
-/* CWD Card Slider (ama39, last update: 10/8/20)
+/* CWD Card Slider (ama39, last update: 4/19/22)
    - 
    
    - Accessibility Notes:
@@ -44,15 +44,28 @@ jQuery(document).ready(function($) {
 		var viewer_width = $(viewer_band).width();
 		var viewer_scroll_limit = $(viewer_band)[0].scrollWidth - viewer_width;
 		var cards_per_screen = Math.round(viewer_width / card_width);
+		var full_card_sets = Math.floor(card_count / cards_per_screen);
+		var even_sets = true;
+		if (full_card_sets * cards_per_screen < card_count) {
+			even_sets = false;
+		}
 
 		var scroll_target = 0;
 		var active_pip = 0;
+		var active_pip_raw = 0;
+		var previous_pip = 0;
+		var previous_pip_raw = 0;
 
 		$(window).resize(function() {
 			viewer_width = $(viewer_band).width();
 			viewer_scroll_limit = $(viewer_band)[0].scrollWidth - viewer_width;
 			card_width = $(viewer_band).find('.card').first().outerWidth();
 			cards_per_screen = Math.round(viewer_width / card_width);
+			full_card_sets = card_count % cards_per_screen;
+			even_sets = true;
+			if (full_card_sets * cards_per_screen < card_count) {
+				even_sets = false;
+			}
 
 			// recalibrate
 			var current_first_card = Math.round($(viewer_band).scrollLeft() / card_width);
@@ -134,15 +147,36 @@ jQuery(document).ready(function($) {
 			}
 			$(viewer).find('.pips').html(pips_html);
 
+
+			previous_pip_raw = active_pip_raw;
+			previous_pip = active_pip;
 			active_pip = 0;
 			if (scroll_target > 0) {
+
+				/* previous version of pip calculation ---
 				active_pip = ((scroll_target / viewer_scroll_limit) * pip_count).toFixed(1);
 				if (pip_count - active_pip <= 1 ) {
 					active_pip = Math.floor(active_pip) - 1;
 				}
 				else {
 					active_pip = Math.ceil(active_pip) - 1;
 				}
+				--- */
+
+				/* new, more reliable pip calculation (Apr 2022) */
+				var new_first_card = Math.round(scroll_target / card_width);
+				if (cards_per_screen != 1) {
+					new_first_card = new_first_card + 1;
+				}
+				active_pip_raw = new_first_card / cards_per_screen;
+				if ( !even_sets && active_pip_raw > previous_pip_raw && pip_count - (Math.floor(previous_pip_raw)+1) == 1 ) {
+					active_pip = Math.ceil(active_pip_raw);
+				} 
+				else {
+					active_pip = Math.floor(active_pip_raw);
+				}
+				/* --- */
+
 			}
 			$(viewer).find('.pip').eq(active_pip).addClass('active');
 

js/cwd_experimental.js

@@ -1,6 +1,7 @@
-/* CWD Experimental Functionality (ama39, last update: 8/24/18)
+/* CWD Experimental Functionality (ama39, last update: 6/10/22)
 	Experimental/non-production scripting to help with demonstration and documentation. Some of this may eventually graduate to CWD Utilities.
    - 1. Automated Table of Contents
+   - 2. Code Copy
    ------------------------------------------------------------------------- */
 
 
@@ -106,6 +107,36 @@ function autoTOC(origin_target,toc_target) {
 
 }
 
+// 2. Code Copy -----------------------------------------------------------
+
+function codeCopySetup(selectors) {
+
+	jQuery(document).ready(function($) {
+
+		$(selectors).addClass('code-copy');
+		$('.code-copy').before('<button class="button-copy enabled"><span class="sr-only">Copy Code</span></button>');
+
+		// button code here
+		$('.button-copy.enabled').each(function() {
+			var copy_target = $(this).next('.code-copy');
+			if ( $(copy_target).hasClass('align-right') || $(copy_target).hasClass('column') || $(copy_target).hasClass('sidebar') ) {
+				$(this).addClass('right');
+			}
+			$(this).click(function() {
+				$(copy_target).removeClass('code-copy');
+				var markup = $(copy_target).prop('outerHTML').toString();
+				try {
+					navigator.clipboard.writeText(markup);
+				}
+				catch (err) {
+					console.log('Error while copying to clipboard: ' + err);
+				}
+				$(copy_target).addClass('code-copy');
+			});
+		});
+	});
+}
+
 
 // Window Load ------------------------------------------------------------
 $(window).on('load', function(e) {

js/cwd_utilities.js

@@ -1,4 +1,4 @@
-/* CWD Utilities (ama39, last update: 7/12/21)
+/* CWD Utilities (ama39, last update: 5/12/22)
    - 1. Main Navigation (script support for dropdown menus and mobile)
    - 2. Empty Sidebar Helper (clears whitespace from empty sidebar regions to allow use of the :empty pseudo class in CSS)
    - 3. Mobile Table Helper (allows tables or other block elements to scroll horizontally on small devices, apply via .mobile-scroll class)
@@ -10,6 +10,7 @@
    - 9. Responsive Table (table.table-responsive: generates headings for use in a mobile-friendly table design)
    
    Change Log
+   - 5/12/22 Mobile nav timing adjustment to avoid focus conflicts when transitioning back and forth to desktop design
    - 7/12/21 Responsive Table option added
    - 3/5/21 Mobile main navigation now auto-closes on loss of focus
    - 2/15/21 Small adjustment to code for detecting empty sidebar menus in Drupal
@@ -332,7 +333,7 @@ var msie = document.documentMode;
 		if ( $('body').hasClass('mobile') ) {
 			focus_timeout = setTimeout(function(){
 				$('#mobile-close').trigger('click');
-			}, 100);
+			}, 50);
 		}
 	});
 

sass/_normalize.scss

@@ -1,4 +1,5 @@
 /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
+//  -- modified by Custom Development (last update: 5/9/22)
 
 // Document
 // ==========================================================================
@@ -244,7 +245,7 @@ select,
 textarea {
   font-family: sans-serif; // 1
   font-size: 100%; // 1
-  line-height: 1.15; // 1
+  line-height: 1.2; // 1 // increased from normalize's 1.15, to correct text being cut off in Windows browsers (ama39, 5/9/22) 
   margin: 0; // 2
 }
 

sass/base.scss

@@ -1806,6 +1806,13 @@ ul.list-menu.links.vertical ul, .list-menu.links.vertical ul ul {
 	background: rgba(0,0,0,0.3);
 	/* outline-color: #fff; */
 }
+#main-navigation abbr {
+	font-family: $cwd-font-family-monospace;
+	color: #de604c;
+	background: rgba(0,0,0,0.8);
+	font-size: 86.6666666666667%;
+	padding: 2px 4px;
+}
 
 /* Dropdown Navigation
    ************************************ */

sass/cwd_utilities.scss

@@ -1168,16 +1168,16 @@ button.button-copy {
 	appearance: none;
 	background: #f3f3f3;
 	color: #444;
-	border: 2px solid #aaa;
-	border-radius: 3px;
+	border: 1px solid #666;
+	border-radius: 2px;
 	padding: 0;
-	margin: -0.2em 0.1em;
-	width: 29px;
-	height: 26px;
+	margin: -0.1em 0.1em;
+	width: 24px;
+	height: 22px;
 	font-family: $cwd-font-family-sans-ui;
 	cursor: pointer;
 	transition: background .1s;
-	font-size: 16px;
+	font-size: 14px;
 	line-height: 1;
 
 	@extend .icon-zmdi;
@@ -1187,13 +1187,44 @@ button.button-copy {
 	}
 	&:hover, &:focus {
 		background: #f7f7f7;
-		border-color: #777;
+		border-color: #000;
 		color: #000;
 	}
 	&:active {
-		background: #ccc;
-		border-color: #999;
+		background: #ddd;
+		border-color: #888;
 		color: #666;
 	}
 
+	&.enabled {
+		position: absolute;
+		transform: translate(-20px, -9px);
+		box-shadow: 0 1px 2px rgba(0,0,0,0.5);
+
+		@media (max-width: 767px) {
+			display: none;
+		}
+
+		& + .code-copy {
+			outline: 3px double rgba(0,0,0,0);
+			outline-offset: 5px;
+			transition: outline-color 0.15s;
+		}
+		&:hover + .code-copy, &:focus + .code-copy {
+			outline: 3px double rgba(0,0,0,0.35);
+			outline-offset: 5px
+		}
+		&:active + .code-copy {
+			outline: 3px double rgba(0,0,0,0.9);
+			outline-offset: 5px
+		}
+
+		&.right {
+			position: relative;
+			float: right;
+			transform: translate(-10px, -9px);
+			margin-right: -24px;
+		}
+	}
+
 }