qbank_dam-8.x-1.4/js/qbank_dam.eb.js

(function ($, Drupal, drupalSettings) {
  "use strict";
  var initialized = false;

  Drupal.behaviors.qbankdamSetup = {
    attach: function (context, setting) {						
      if (!initialized) {
        initialized = true;
        jQuery(".is-entity-browser-submit").hide();	
		
        var setupWindowSize = function () {
          jQuery("#" + drupalSettings.qbank_dam.html_id).css({
            height: "85vh"
          });		  
        };

        var mediaSelected = function (media, image) {
          jQuery("input[name='qbank_url']").val(image[0].url);
          jQuery("input[name='qbank_extension']").val(image[0].extension);
          jQuery("input[name='qbank_title']").val(media.name);
          jQuery("input[name='qbank_media_id']").val(media.mediaId);
          jQuery("input#edit-submit").click();
          jQuery(
            '<div role="contentinfo" aria-label="Status message" class="messages messages--status"><div role="alert"><h2 class="visually-hidden">Status message</h2>Downloading media from QBank DAM</div></div>'
          ).insertAfter("input#edit-submit");
        };

        var protocol =
          drupalSettings.qbank_dam.protocol === "HTTPS" ? "https" : "http";
        var qbcConfig = {
          deploymentSite: drupalSettings.qbank_dam.deployment_site,
          api: {
            host: drupalSettings.qbank_dam.url,
            access_token: drupalSettings.qbank_dam.token,
            protocol: protocol, 
          },
          gui: {
            basehref:
              protocol + "://" + drupalSettings.qbank_dam.url + "/connector/",
          },
        };

        var QBC = new QBankConnector(qbcConfig);

        var mediaPicker = new QBC.mediaPicker({
          container: "#" + drupalSettings.qbank_dam.html_id,
          onSelect: mediaSelected,
          onReady: setupWindowSize,
          modules: {
            folders: true,
            categories: true,
            moodboards: true,
            settings: true,
            content: {
              header: true,
              toolbar: true,
              details: true,
            },
            imageTool: {
              crop: true,
            },
            detail: {
              showUseButton: true,
            },
            searchResult: {
              showUseButton: false,
            },
          },
        });
		
		//Method to Adjusting the modal box height
		var adjustWindowSize = () => {			
			var matchingElements = window?.parent?.document?.getElementsByClassName('entity-browser-modal');
			var mediaDialogs = window?.parent?.document?.getElementsByClassName('ui-dialog-content');
			var iframe = window?.parent?.document?.getElementById('entity_browser_iframe_media_qbank');					
			
			var container = matchingElements[0];
			var dialog = mediaDialogs[0]
			container.setAttribute(
				'style', 
				'height: 98vh; width: 97%; top: 1vh; left: 2%; position: fixed; background:#fff'
			);		
			dialog.setAttribute(
				'style', 
				'height: 95vh; margin-bottom:200px'
			);		
			iframe.setAttribute(
				'height', 
				(window.outerHeight - 30)
			);
			iframe.setAttribute(
				'style', 
				'padding: 0px; position: relative; z-index: 10002; height: '+(window.outerHeight - 30)+'px'
			);
			
			
			window?.document?.addEventListener('DOMContentLoaded', function() {		
				for(let i=0; i<50; i++){
					setTimeout(()=>{
						var mediaPickerFrame = window?.document?.getElementById(drupalSettings.qbank_dam.html_id).getElementsByTagName('iframe');
						//mediaPickerFrame[0]?.contentWindow?.document?.getElementById('nav-wrapper')?.setAttribute('style','top:-12px');
						if(mediaPickerFrame?.length > 0){
							i = 50;
						}
						var closeBtn = mediaPickerFrame[0]?.contentWindow?.document?.getElementById('btn-close-connector');
						closeBtn.setAttribute(
							'style',
							'display:none'
						);
					}, 500);
				}
			});
		}
		
		adjustWindowSize();
		
		//Adjust window size when resize
		window?.parent?.addEventListener('resize', function() {
			adjustWindowSize();
		});
      }

    },
  };
})(jQuery, Drupal, drupalSettings);