For a consistent navigation and branding, this script loads content, styles and dependencies from one website and injects them into a 3rd party service platform.

Taleo Injector

// Taleo brandfile external JS 

class Injector {

	site_url;
	style_paths;
	script_paths;
	script_paths_loaded;
	scripts_inited;
  
	constructor() {

		var _self = this;

		_self.site_url = "https://example.com";
		
		if ( document.querySelector('input#site_url') ) {
		 	_self.site_url = document.querySelector('input#site_url').value;
		}

		_self.style_paths = [
			'/themes/custom/alnylam/css/taleo.css'
		];
		_self.dependancy_paths = [];
		_self.script_paths = [
			'/modules/custom/alnylam_search/js/alnylam_search.js',
			'/themes/custom/alnylam/js/nav.js',
      '/themes/custom/alnylam/js/select.js',
			'/libraries/superfish/jquery.hoverIntent.minified.js',
			'/libraries/superfish/superfish.js',
			'/libraries/superfish/sfsmallscreen.js',
			'/libraries/superfish/supposition.js',
			'/libraries/superfish/supersubs.js',
      
		];
		_self.script_paths_loaded = [];
		_self.scripts_inited = false;
		

		_self.style_paths.forEach( function(style_path, i) {
			var domain = ''; 
			if (style_path.startsWith('/')){
				domain = _self.site_url;
			}
			_self.style_paths[i] = domain + style_path;
		});

		_self.script_paths.forEach( function(dependancy_path, i) {
      
			var domain = ''; 
			if (dependancy_path.startsWith('/')){
				domain = _self.site_url;
			}
			_self.dependancy_paths[i] = domain + dependancy_path;
		});

		_self.script_paths.forEach( function(script_path, i) {
			var domain = ''; 
			if (script_path.startsWith('/')){
				domain = _self.site_url;
			}
			_self.script_paths[i] = domain + script_path;
			_self.script_paths_loaded[domain + script_path] = false;
		});

		_self.init();
	}
	
	init() {
		var _self = this;

		fetch(_self.site_url, { method: 'POST' })
		.then(res => res.text())
		.then(html => {

			// parse response as html
			const parser = new DOMParser();
			const htmlDoc = parser.parseFromString(html, "text/html");

			// Get markup
			var header_mkup = htmlDoc.querySelector("header");
			var footer_mkup = htmlDoc.querySelector("footer");
			var modal_mkup = htmlDoc.querySelector("#inter-modal");

			// Get elements
			var header_elem = document.querySelector(".wrapper_inner > #header");
			var footer_elem = document.querySelector(".wrapper_inner > #footer");
			var modal_elem = document.querySelector(".wrapper_inner > #footer").parentElement;

			// adjust URLS 
			if ( header_mkup ) {
				var header = _self.urlsToABS(header_mkup);
			}
			if ( footer_mkup ) {
				var footer = _self.urlsToABS(footer_mkup);
			}
			if ( modal_mkup ) {
				var modal = _self.urlsToABS(modal_mkup);
			}

			// inject content
			if ( header && header_elem ) {
				header_elem.append(header);
			}
			if ( footer && footer_elem ) {
				footer_elem.append(footer);
			}
			if ( modal && modal_elem ) {
				modal_elem.append(modal);
			}

			// load styles
			for (var style_path of _self.style_paths) {
				_self.loadStyles(style_path);
        
			}

			// load dependancies
			for (var dependancy_path of _self.dependancy_paths) {
				_self.loadDependancy(dependancy_path);
			}

		}).catch(error => {

			// Handle error
			console.error(error);
		});
	}


	urlsToABS(html) {
		var _self = this;

		// links
		html.querySelectorAll('[href^="/"]').forEach(function(link){
			link.setAttribute('href', _self.site_url + link.getAttribute('href'));
		});
		// images
		html.querySelectorAll('[src^="/"]').forEach(function(img){
			img.setAttribute('src', _self.site_url + img.getAttribute('src'));
		});
		// forms, for search
		html.querySelectorAll('[action^="/"]').forEach(function(form){
			form.setAttribute('action', _self.site_url + form.getAttribute('action'));
		});

		return html;
	}

	loadDependancy(url) {
		var _self = this;
		// if we have any dependancies. load 'em
	
			const dependancy = document.createElement('script')
			dependancy.src = url;
			dependancy.async = false;
			document.head.appendChild(dependancy);
			dependancy.onload = function(){

				// if all dependancies loaded, then load scripts
				if ( url == _self.dependancy_paths[_self.dependancy_paths.length - 1] ) {
					for (var script_path in _self.script_paths_loaded) {
						_self.loadScript(script_path);
					}
				}
			}
	

	}

	loadStyles(url) {
		const style = document.createElement('link')
		style.rel   = 'stylesheet';
		style.type  = 'text/css';
    	style.media = 'all';
		style.href  = url;
		
		document.head.appendChild(style);
	}

	loadScript(url) {
		var _self = this; 
		const script = document.createElement('script')
		script.src = url;
		script.async = false;
		document.head.appendChild(script);
		script.onload = function(){
			_self.script_paths_loaded[url] = true;
			_self.scriptLoaded();
		}
	}

	scriptLoaded() {
		var _self = this; 
		var all_loaded = true;
		for (var script_path of _self.script_paths) {
			if ( ! _self.script_paths_loaded[script_path] ) {
				all_loaded = false;
				break;
			}
		}

		if ( all_loaded ) {
			// initialize superfish
			var $menus = jQuery('#superfish-main, #superfish-top-navigation, #superfish-mobile-main-menu');
			$menus.superfish({
				animation: {opacity:'show',height:'show'}, 
				speed: 'fast'
			});
			$menus.sfsmallscreen({
				mode: 'window_width',
				breakpoint: 1006,
				accordionButton: 2,
				title: 'Mobile Main navigation',
			});
       jQuery('body').addClass('taleo-header');
      setTimeout(function() {
        jQuery('#block-language').click(function (e) {
				$("#block-languageswitcher").toggle();
			$('#block-language .language').toggleClass("open-lang");
			  });
      jQuery('#superfish-mobile-main-menu-toggle').on('click',function(){
        $('body').toggleClass('search-language-block');
         setTimeout(function() {
        if (jQuery('.search-language-block').length > 0) {
          jQuery('.navbar-btn img').attr('src','https://www.alnylam.com/themes/custom/alnylam/images/dark-mobile-photo.svg')
          
        } else {
          jQuery('.navbar-btn img').attr('src','https://www.alnylam.com/themes/custom/alnylam/images/mob-logo.svg?v5')
          
        }
           }, 100);
      })
}, 2000);
		}
	}
}


var injector = new Injector();