Seperate anchor as element that can be offset, #14

Fixes #14
DekodeInteraktiv · Nov 4, 2019 · bc26abb · bc26abb
1 parent a7dc654
commit bc26abb
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 1 deletion.
diff --git a/assets/styles.css b/assets/styles.css
@@ -1,9 +1,19 @@
+.hogan-module-expandable_list .hogan-expandable-list-item {
+	position: relative;
+}
+
 .hogan-module-expandable_list .hogan-expandable-list-item > a {
 	display: block;
 	position: relative;
 	padding-right: 30px;
 }
 
+.hogan-module-expandable_list .hogan-expandable-list-item > .anchor {
+	position: absolute;
+	width: 0;
+	padding: 0;
+}
+
 .hogan-module-expandable_list .hogan-expandable-list-item > a span {
 	display: block;
 	position: absolute;

diff --git a/assets/template.php b/assets/template.php
@@ -28,8 +28,9 @@
 	$list_item_id      = ! empty( $item['item_id'] ) ? $item['item_id'] : 'panel-' . $this->counter . '-' . $key;
 	?>
 	<div class="<?php echo esc_attr( $list_item_classes ); ?>">
+		<div class="anchor" id="<?php echo esc_attr( $list_item_id ); ?>">&nbsp;</div>
 		<a href="#<?php echo esc_attr( $list_item_id ); ?>"><?php echo esc_html( $item['item_title'] ); ?><span></span></a>
-		<div id="<?php echo esc_attr( $list_item_id ); ?>" aria-expanded="false">
+		<div aria-expanded="false">
 			<?php echo $item['item_content']; // WPCS: XSS OK. ?>
 		</div>
 	</div>

diff --git a/hogan-expandable-list.php b/hogan-expandable-list.php
@@ -46,6 +46,14 @@ function register_module( \Dekode\Hogan\Core $core ) {
 	$core->register_module( new \Dekode\Hogan\Expandable_List() );
 }
 
+/**
+ * Sanitize item id name to URL friendly string.
+ *
+ * @param string  $value Item name.
+ * @param integer $id Item id.
+ * @param array   $field Sanitized item name.
+ * @return string
+ */
 function sanitize_item_id_on_save( string $value, int $id, array $field ) : string {
 	return sanitize_title( $value );
 }