[FEATURE] Add Filter for icon types

TYPO3-CMS · Sep 2, 2016 · 19dbef1 · 19dbef1
1 parent 55c3b61
commit 19dbef1
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 6 deletions.
diff --git a/Resources/Private/Templates/Styleguide/Icons.html b/Resources/Private/Templates/Styleguide/Icons.html
@@ -88,6 +88,16 @@ <h1><f:translate key="icons" /></h1>
 			<div role="tabpanel" class="tab-pane" id="all">
 				<div class="row">
 					<form style="margin-top: 20px;">
+						<div class="form-group col-md-12">
+							<div class="input-group">
+								<label>Filter: </label><br/>
+								<div class="btn-group t3js-filter-buttons">
+									<button class="btn btn-default" data-filter="type:bitmap">Bitmap</button>
+									<button class="btn btn-default" data-filter="type:font">Font</button>
+									<button class="btn btn-default" data-filter="type:vector">Vector</button>
+								</div>
+							</div>
+						</div>
 						<div class="form-group col-md-12">
 							<div class="input-group">
 								<div class="input-group-addon"><i class="fa fa-search"></i></div>
@@ -315,4 +325,4 @@ <h3>Register FontAwesome</h3>
 			</div>
 		</div>
 	</div>
-</f:section>
+</f:section>
diff --git a/Resources/Public/JavaScript/FindIcons.js b/Resources/Public/JavaScript/FindIcons.js
@@ -15,13 +15,36 @@
  * Javascript functions regarding the FindIcons module
  */
 define('TYPO3/CMS/Styleguide/FindIcons', ['jquery'], function($) {
+	$('.t3js-filter-buttons button').click(function(e) {
+		e.preventDefault();
+		$('#search-field').val($(this).data('filter')).trigger('keyup');
+	});
 	$('#search-field').keyup(function() {
-		var $typedQuery = TYPO3.jQuery(this).val();
-		if ($typedQuery === '') {
+		var typedQuery = TYPO3.jQuery(this).val();
+		if (typedQuery === '') {
 			TYPO3.jQuery('#t3js-filter-container [data-icon-identifier]').show();
 		} else {
-			TYPO3.jQuery('#t3js-filter-container [data-icon-identifier]').hide();
-			TYPO3.jQuery('#t3js-filter-container [data-icon-identifier*="' + $typedQuery + '"]').show();
+			if (typedQuery.indexOf('type:') !== -1) {
+				var parts = typedQuery.split(':');
+				var type = parts[1];
+				switch (type.toLowerCase()) {
+					case 'bitmap':
+						TYPO3.jQuery('#t3js-filter-container [data-icon-identifier]').hide();
+						TYPO3.jQuery('#t3js-filter-container img:not([src$=".svg"])').closest('[data-icon-identifier]').show();
+						break;
+					case 'font':
+						TYPO3.jQuery('#t3js-filter-container [data-icon-identifier]').hide();
+						TYPO3.jQuery('#t3js-filter-container i.fa').closest('[data-icon-identifier]').show();
+						break;
+					case 'vector':
+						TYPO3.jQuery('#t3js-filter-container [data-icon-identifier]').hide();
+						TYPO3.jQuery('#t3js-filter-container img[src$=".svg"]').closest('[data-icon-identifier]').show();
+						break;
+				}
+			} else {
+				TYPO3.jQuery('#t3js-filter-container [data-icon-identifier]').hide();
+				TYPO3.jQuery('#t3js-filter-container [data-icon-identifier*="' + typedQuery + '"]').show();
+			}
 		}
 	});
-});
+});