gigya · piggito · Jan 26, 2021 · May 12, 2021 · May 12, 2021
diff --git a/gigya/gigya.module b/gigya/gigya.module
@@ -36,8 +36,5 @@ function gigya_page_attachments(array &$attachments) {
 
     \Drupal::moduleHandler()->alter('gigya_lang', $lang);
     $attachments['#attached']['drupalSettings']['gigya']['lang'] = $lang;
-
-    // Add Library.
-    $attachments['#attached']['library'][] = 'gigya/drupalGigya';
   }
-}
+}
diff --git a/gigya_raas/gigya_raas.libraries.yml b/gigya_raas/gigya_raas.libraries.yml
@@ -8,4 +8,12 @@ gigyaRaas:
     - core/jquery.cookie
     - core/drupal
     - core/drupalSettings
-    - core/drupal.ajax
+    - core/drupal.ajax
+    - gigya/drupalGigya
+
+customScreenSets:
+  version: VERSION
+  js:
+    js/customScreenSets.js: {}
+  dependencies:
+    - gigya_raas/gigyaRaas
diff --git a/gigya_raas/gigya_raas.module b/gigya_raas/gigya_raas.module
@@ -83,37 +83,6 @@ function gigya_raas_page_attachments(array &$attachments) {
 				Drupal::moduleHandler()->alter('gigya_raas_profile_settings', $raas_profile);
         $attachments['#attached']['drupalSettings']['gigya']['raas']['profile'] = $raas_profile;
       }
-
-      /* Load screen-set config into front-end for custom screen-set in UI blocks functionality */
-      $custom_screensets = array();
-			/** @var BlockInterface[] $blocks; */
-			$blocks = Block::loadMultiple();
-			foreach ($blocks as $key => $block) {
-				$settings = $block->get('settings');
-				if ($settings['id'] == 'gigya_raas_custom_screenset') {
-					$custom_screensets[] = $settings;
-				}
-			}
-			$screenset_config = (array)json_decode(Drupal::config('gigya_raas.screensets')->get('gigya.custom_screensets'));
-			foreach ($screenset_config as $key => $screenset) {
-				if (isset($screenset->remove))
-					unset($screenset->remove);
-				$screenset = (array)$screenset;
-				$screenset_config[$screenset['desktop']] = $screenset;
-				unset($screenset_config[$key]);
-			}
-			foreach ($custom_screensets as $key => $screenset) {
-				if (!empty($screenset_config[$screenset['desktop_screenset']])) {
-					$custom_screensets[$key]['sync_data'] = $screenset_config[$screenset['desktop_screenset']]['sync'];
-					if (!empty($screenset_config[$screenset['desktop_screenset']]['mobile']))
-						$custom_screensets[$key]['mobile_screenset'] = $screenset_config[$screenset['desktop_screenset']]['mobile'];
-					else
-						$custom_screensets[$key]['mobile_screenset'] = $screenset_config[$screenset['desktop_screenset']]['desktop'];
-				}
-			}
-			$attachments['#attached']['drupalSettings']['gigya']['raas']['customScreenSets'] = $custom_screensets;
-
-      $attachments['#attached']['library'][] = 'gigya_raas/gigyaRaas';
     }
   }
 }
@@ -272,4 +241,4 @@ function gigya_raas_mail($key, &$message, $params) {
 
 	$message['subject'] = t($params['subject'], array(), $options);
 	$message['body'][] = $params['message'];
-}
+}
diff --git a/gigya_raas/js/customScreenSets.js b/gigya_raas/js/customScreenSets.js
@@ -0,0 +1,62 @@
+/**
+ * @file
+ * Handles custom screen sets.
+ */
+
+(function ($, Drupal, drupalSettings) {
+
+  Drupal.behaviors.gigyaRaasCustomScreenSets = {
+    attach: function (context, settings) {
+      window.onGigyaServiceReady = function () {
+        for (var id in drupalSettings.gigya.raas.customScreenSets) {
+          var custom_screenset = drupalSettings.gigya.raas.customScreenSets[id];
+          if (typeof custom_screenset.display_type !== 'undefined') {
+            var screenset_params = {
+              screenSet: custom_screenset.desktop_screenset,
+              mobileScreenSet: custom_screenset.mobile_screenset
+            };
+            if (parseInt(custom_screenset.sync_data) === 1)
+              screenset_params['onAfterSubmit'] = processFieldMapping;
+
+            if (custom_screenset.display_type === 'popup') {
+              $('#' + custom_screenset.link_id)
+                .once('gigya-raas')
+                .click(popupClickListener);
+            }
+            else if (custom_screenset.display_type === 'embed') {
+              screenset_params['containerID'] = custom_screenset.container_id;
+              gigya.accounts.showScreenSet(screenset_params);
+            }
+          }
+        }
+      };
+
+      var popupClickListener = function (e) {
+        var id = $(this).closest('.gigya-custom-screenset').attr('id');
+        var custom_screenset = drupalSettings.gigya.raas.customScreenSets[id];
+        var screenset_params = {
+          screenSet: custom_screenset.desktop_screenset,
+          mobileScreenSet: custom_screenset.mobile_screenset
+        };
+        e.preventDefault();
+        gigya.accounts.showScreenSet(screenset_params);
+        drupalSettings.gigya.raas.linkId = $(this).attr('id');
+      };
+
+      var processFieldMapping = function (data) {
+        var gigyaData = {
+          UID: data.response.UID,
+          UIDSignature: data.response.UIDSignature,
+          signatureTimestamp: data.response.signatureTimestamp
+        };
+        var ajaxSettings = {
+          url: drupalSettings.path.baseUrl + 'gigya/raas-process-fieldmapping',
+          submit: { gigyaData: gigyaData }
+        };
+        var myAjaxObject = Drupal.ajax(ajaxSettings);
+        myAjaxObject.execute();
+      };
+    }
+  };
+
+})(jQuery, Drupal, drupalSettings);
diff --git a/gigya_raas/js/gigyaRaas.js b/gigya_raas/js/gigyaRaas.js
@@ -220,60 +220,6 @@ var getUrlPrefix = function () {
         }
     };
 
-	/**
-	 * @property gigya.accounts.showScreenSet
-	 * @property drupalSettings.gigya.raas.customScreenSets
-	 */
-	var initCustomScreenSet = function () {
-		if (drupalSettings.gigya.enableRaaS) {
-			var customScreenSets = drupalSettings.gigya.raas.customScreenSets;
-
-			/**
-			 * @property custom_screenset.display_type
-			 * @property custom_screenset.link_id
-			 * @property custom_screenset.container_id
-			 * @property custom_screenset.desktop_screenset
-			 * @property custom_screenset.mobile_screenset
-			 * @property custom_screenset.sync_data
-			 */
-			customScreenSets.forEach(function (custom_screenset) {
-				if (typeof custom_screenset.display_type !== 'undefined') {
-					var screenset_params = {
-						screenSet: custom_screenset.desktop_screenset,
-						mobileScreenSet: custom_screenset.mobile_screenset
-					};
-					if (parseInt(custom_screenset.sync_data) === 1)
-						screenset_params['onAfterSubmit'] = processFieldMapping;
-
-					if (custom_screenset.display_type === 'popup') {
-						$('#' + custom_screenset.link_id).once('gigya-raas').click(function (e) {
-							e.preventDefault();
-							gigya.accounts.showScreenSet(screenset_params);
-							drupalSettings.gigya.raas.linkId = $(this).attr('id');
-						});
-					} else if (custom_screenset.display_type === 'embed') {
-						screenset_params['containerID'] = custom_screenset.container_id;
-						gigya.accounts.showScreenSet(screenset_params);
-					}
-				}
-			});
-		}
-	};
-
-	var processFieldMapping = function (data) {
-		var gigyaData = {
-			UID: data.response.UID,
-			UIDSignature: data.response.UIDSignature,
-			signatureTimestamp: data.response.signatureTimestamp
-		};
-		var ajaxSettings = {
-			url: getUrlPrefix() + 'gigya/raas-process-fieldmapping',
-			submit: {gigyaData: gigyaData}
-		};
-		var myAjaxObject = Drupal.ajax(ajaxSettings);
-		myAjaxObject.execute();
-	};
-
 	var init = function() {
 		if (drupalSettings.gigya.enableRaaS) {
 			gigyaHelper.addGigyaFunctionCall('accounts.addEventHandlers', {
@@ -304,7 +250,6 @@ var getUrlPrefix = function () {
 					gigyaHelper.runGigyaCmsInit();
 					initLoginUI();
 					initRaaS();
-					initCustomScreenSet();
 				};
 				init();
 			}

diff --git a/gigya_raas/src/Plugin/Block/GigyaRaasCustomScreenset.php b/gigya_raas/src/Plugin/Block/GigyaRaasCustomScreenset.php
@@ -63,6 +63,16 @@ public function build() {
 			'#display_type' => $config['display_type'],
 			'#container_id' => $config['container_id'],
 			'#screenset' => $screenset_params,
+			'#attached' => [
+				'library' => ['gigya_raas/customScreenSets'],
+				'drupalSettings' => [
+					'gigya' => [
+						'raas' => [
+							'customScreenSets' => [$config['container_id'] => $config],
+						],
+					],
+				],
+			],
 		];
 		return $build;
 	}

diff --git a/gigya_raas/src/Plugin/Block/GigyaRaasLogin.php b/gigya_raas/src/Plugin/Block/GigyaRaasLogin.php
@@ -21,7 +21,10 @@ class GigyaRaasLogin extends BlockBase {
   public function build() {
     $build['block'] = array(
       '#theme' => 'gigya_raas_login_block',
-      '#showDiv' => \Drupal::currentUser()->isAnonymous()
+      '#showDiv' => \Drupal::currentUser()->isAnonymous(),
+      '#attached' => [
+        'library' => ['gigya_raas/gigyaRaas'],
+      ],
     );
     $this->setConfigurationValue('label_display', 'hidden');
 

diff --git a/gigya_raas/src/Plugin/Block/GigyaRaasProfile.php b/gigya_raas/src/Plugin/Block/GigyaRaasProfile.php
@@ -21,7 +21,10 @@ class GigyaRaasProfile extends BlockBase {
   public function build() {
     $build['block'] = array(
       '#theme' => 'gigya_raas_profile_block',
-      '#showDiv' => \Drupal::currentUser()->isAuthenticated()
+      '#showDiv' => \Drupal::currentUser()->isAuthenticated(),
+      '#attached' => [
+        'library' => ['gigya_raas/gigyaRaas'],
+      ],
     );
     return $build;
   }

diff --git a/gigya_raas/src/Plugin/Block/GigyaRaasRegister.php b/gigya_raas/src/Plugin/Block/GigyaRaasRegister.php
@@ -21,7 +21,10 @@ class GigyaRaasRegister extends BlockBase {
   public function build() {
     $build['block'] = array(
       '#theme' => 'gigya_raas_register_block',
-      '#showDiv' => \Drupal::currentUser()->isAnonymous()
+      '#showDiv' => \Drupal::currentUser()->isAnonymous(),
+      '#attached' => [
+        'library' => ['gigya_raas/gigyaRaas'],
+      ],
     );
     return $build;
   }

diff --git a/gigya_raas/templates/gigya-raas-custom-screenset-block.html.twig b/gigya_raas/templates/gigya-raas-custom-screenset-block.html.twig
@@ -6,7 +6,7 @@
  * @ingroup themeable
  */
 #}
-<div id="{% if container_id %}{{ container_id }}{% endif %}">
+<div class="gigya-custom-screenset" id="{% if container_id %}{{ container_id }}{% endif %}">
 	{% if display_type == 'popup' %}
 		<span class="gigya-raas">
             {% if link['popup'] %}
@@ -17,4 +17,4 @@
 		{{ container_id }}
 	{% else %}
 	{% endif %}
-</div>
+</div>