Code Cleanup

- added ability to click enter in the field
MilkshakeStudio · Apr 20, 2020 · 09c295d · 09c295d
1 parent 491ef55
commit 09c295d
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 55 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,9 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## 1.0.5 - 2020-04-15
+### Cleanup
+- Code Clean-up
 
 ## 1.0.4 - 2020-04-15
 ### Fixed

diff --git a/composer.json b/composer.json
@@ -2,7 +2,7 @@
     "name": "milkshakestudio/craft-brandfetch",
     "description": "Craft CMS Plugin that allows you quickly get the logo of a website via the Brandfetch API.",
     "type": "craft-plugin",
-    "version": "1.0.3",
+    "version": "1.0.5",
     "keywords": [
         "craft",
         "cms",

diff --git a/src/Brandfetch.php b/src/Brandfetch.php
@@ -184,7 +184,7 @@ protected function createSettingsModel()
      */
     protected function settingsHtml(): string
     {   
-        // TODO: add erroro if no volumes
+        // TODO: add error if no volumes
         // Render the settings template
         $destinationOptions = [];
         $volumes = Craft::$app->getVolumes();

diff --git a/src/assetbundles/brandfetcherfield/dist/js/Brandfetcher.js b/src/assetbundles/brandfetcherfield/dist/js/Brandfetcher.js
@@ -16,11 +16,11 @@
 		defaults = {
 			actionUrl: "brandfetch/bfcontroller/fetch-logo",
 			getLogoBtn: ".js-get-brandfetch",
-			removeLogoBtn: ".js-remove-brandfetch",
 			logo: "#fields-brandfetch-logo img",
 			emptyView: "#fields-brandfetch-empty",
 			filledView: "#fields-brandfetch-filled",
 			imageIdField: "#fields-brandfetcher-img-id",
+			urlInput : '#fields-brandfetch-url'
 		};
 
 	// Plugin constructor
@@ -37,24 +37,29 @@
 
 	Plugin.prototype = {
 		init: function(id) {
-			console.log(this.options);
 			// Initial Callers
-			$(this.options.removeLogoBtn).on("click", this.removeLogo);
 			$(this.options.getLogoBtn).on("click", this.getLogo);
+
+			// watch for enter
+			$(this.options.urlInput).on('focus', ()=>{
+				$(document).keypress(function(e) {
+					if(e.which == 13) {
+						e.preventDefault();
+						self.getLogo();
+					}
+				});
+			})
+			// remove action
+			$(this.options.urlInput).on('blur', ()=>{
+				$(this.options.urlInput).off('focus')
+			});
 
 		},
-		removeLogo: function() {
-			$(self.options.imageIdField).val("");
-
-			$(self.options.logo).remove();
-			$(self.options.filledView).hide();
-
-			$(self.options.emptyView).show();
-		},
-
+
+		// API Call to get the logo
 		getLogo: function() {
 			self.removeErrors();
-			var fetchUrl = $("#fields-brandfetch-url").val();
+			var fetchUrl = $(this.options.urlInput).val();
 			if (
 				fetchUrl == null ||
 				fetchUrl == "" ||
@@ -74,16 +79,11 @@
 					if (textStatus === "success") {
 						if (response.success) {
 							//reset value
-							$("#fields-brandfetch-url").val("");
-
+							$(self.options.urlInput).val("");
 
 							$(self.options.imageIdField).html(response.brandfetch.html)
 
-							// var thumbLoader = new Craft.ElementThumbLoader();
-							// var $existing = $(self.options.imageIdField)
-							// thumbLoader.load($existing);
-
-							var tests = new Craft.BaseElementSelectInput({
+							new Craft.BaseElementSelectInput({
 								id: 'brandfetcher-img-id',
 								fieldId:'brandfetcher-img-upload',
 								name: 'fields[logo]',
@@ -92,7 +92,6 @@
 								limit: 1,
 								fieldId:  self.options.id,
 								elements:([response.brandfetch.result.id]),
-								// defaultFieldLayoutId: 'brandfetcher-img-id',
 								modalSettings: {hideSidebar: true}
 							});
 
@@ -105,17 +104,18 @@
 				}, this)
 			);
 		},
+		// Basic URL validation
 		validateUrl: function(url) {
 			return /^(https?|s?ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(
 				url
 			);
 		},
 		setFieldErrors: function() {
-			$("#fields-brandfetch-url").addClass("error");
+			$(this.options.urlInput).addClass("error");
 			$("#fields-brandfetch-url-label").addClass("error");
 		},
 		removeErrors() {
-			$("#fields-brandfetch-url").removeClass("error");
+			$(this.options.urlInput).removeClass("error");
 			$("#fields-brandfetch-url-label").removeClass("error");
 		},
 

diff --git a/src/fields/Brandfetcher.php b/src/fields/Brandfetcher.php
@@ -13,10 +13,6 @@
 use milkshakestudio\brandfetch\Brandfetch;
 use milkshakestudio\brandfetch\assetbundles\brandfetcherfield\BrandfetcherFieldAsset;
 
-
-// use craft\fields\Assets as AssetField;
-
-
 use Craft;
 use craft\base\ElementInterface;
 use craft\base\Field;
@@ -101,7 +97,6 @@ public function normalizeValue($value, ElementInterface $element = null)
     {
         // get the logo if available
         if($value){
-
             $asset = Asset::find()->id($value)->one();
             return parent::normalizeValue($asset, $element);
         }else{
@@ -125,11 +120,11 @@ public function normalizeValue($value, ElementInterface $element = null)
      */
     public function serializeValue($value, ElementInterface $element = null)
     {
-        if( gettype($value) === 'object' )
-        { 
-            return parent::serializeValue($value->id, $element);
+        if(!empty($value)){
+            // $asset = Asset::find()->id($value)->one();
+            return parent::normalizeValue($value->id, $element);
         }else{
-            return parent::serializeValue($value, $element);
+            return parent::normalizeValue($value, $element);
         }
 
         // return $value->id;
@@ -173,6 +168,7 @@ public function getInputHtml($value, ElementInterface $element = null): string
         }
 
 
+        // TODO: this should be the same as the varriabls that go to the field template
         // Variables to pass down to our field JavaScript to let it namespace properly
         $jsonVars = [
             'id' => $id,
@@ -183,6 +179,8 @@ public function getInputHtml($value, ElementInterface $element = null): string
             ];
         $jsonVars = Json::encode($jsonVars);
         Craft::$app->getView()->registerJs("$('#{$namespacedId}-field').BrandfetchBrandfetcher(" . $jsonVars . ");");
+
+        // Is API SET?
         $apiSet = !empty(Brandfetch::$plugin->getSettings()->brandfetch_api_key);
 
         // Render the input template

diff --git a/src/templates/_components/fields/Brandfetcher_input.twig b/src/templates/_components/fields/Brandfetcher_input.twig
@@ -1,4 +1,3 @@
-{# @var craft \craft\web\twig\variables\CraftVariable #}
 {#
 /**
 * Brandfetch plugin for Craft CMS 3.x
@@ -14,10 +13,6 @@
 #}
 
 {% import "_includes/forms" as forms %}
-{# {% do view.registerAssetBundle("craft\\web\\assets\\fields\\FieldsAsset") %} #}
-
-
-{# {% include "_components/fieldtypes/assets/input" %} #}
 
 {% if not apiSet %}
 	<div class="input">
@@ -29,21 +24,22 @@
 {% else %}
 
 	<div id="brandfetch-logo">		
-
+		{# Asset Field #}
 		{{forms.elementSelectField({
-				id: 'brandfetcher-img-id',
-				fieldId:'brandfetcher-img-upload',
-				name: name,
-				elementType: elementType,
-				selectionLabel: "Add Logo",
-				limit: 1,
-				viewMode:'large',
-				elements:(test is defined and test ? [test]),
-				modalSettings: {
-					hideSidebar: true
-				}
-			})}}
-
+			id: 'brandfetcher-img-id',
+			fieldId:'brandfetcher-img-upload',
+			name: name,
+			elementType: elementType,
+			selectionLabel: "Add Logo",
+			limit: 1,
+			viewMode:'large',
+			elements:(test is defined and test ? [test]),
+			modalSettings: {
+				hideSidebar: true
+			}
+		})}}
+
+		{# Brandfetch Custom Input #}
 		<div class="flex" id="brandfetch-empty">
 			<div class="flex-grow">
 				{{ forms.textField({
@@ -55,8 +51,8 @@
 					})
 				}}
 			</div>
-
-			<div class="btn add icon  js-get-brandfetch ">Get Logo</div>
+			<input type="submit" form="brandfetch-url" class="btn submit js-get-brandfetch" value="Fetch Logo">
+			{# <div class="btn add icon  js-get-brandfetch">Get Logo</div> #}
 		</div>
 	</div>