mattlevine/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Super Simple CaaS Example

This is just an example to build upon and in no way represents best practice. You most like would use a web component framework like React.js or Vue.js with Mura.js rather than vanilla js.
For this to work:


You must be on Mura 7.1.137 or greater


set your site's contentRenderer.cfc's this.hashURLs=true;


In your site's settings, set the following attributes

Domain= The domain of the remote site that the the content will be served on.
Is Remote = true
Remote Context = The directory structure off of the remote site's web root that the site lives
Remote Port = The port of the remote site
Resource Domain = The domain that Mura will use the access resource like css and js scripts that are dynamically loaded.


Reload Mura and test.


Also:


Since Mura calendars uses fullcalendar.js you'll need to also include jQuery if needed.


If you run into CORS errors including from from the resource domain you will need to add Access-Control-Allow-Origin header to your Mura instances web server


## index.html
<!DOCTYPE html>
<html>
<head>
  <!-- This is the config to be used -->
	<style>
	 body {
		 margin: 40px;
	 }

	 .sidebar {
		 grid-area: sidebar;
	 }

	 .content {
		 grid-area: content;
		 position: relative;
	 }

	 .header {
		 grid-area: header;
	 }

	 .footer {
		 grid-area: footer;
	 }


	 .wrapper {
		 display: grid;
		 grid-gap: 10px;
		 grid-template-columns: 200px 200px 200px;
		 grid-template-areas:
		 "header  header  header"
		 "sidebar content content"
		 "footer  footer  footer";

	 }

	 .box {
		 border: 1px solid black;
		 border-radius: 5px;
		 padding: 50px;
		 font-size: 150%;

	 }

	 .header, .footer {

	 }
	</style>

  <script>
    MuraCaaSConfig={
      siteid:'caas',
      endpoint:'http://caas.mura.local:8080',
      CaaSContainerSelector:'body'
    };
  </script>

  <!-- This is include the main Mura.js lib -->
  <script src="http://caas.mura.local:8080/core/modules/v1/core_assets/js/mura.js"></script>

  <!-- This is a simple template for Mura to use for it's content. This could be another file -->
  <script id="mura-template-default" type="text/x-mura-template">
		<div class="wrapper">
		 	<div class="box header">
				<h1>CaaS Example Site</h1>
				<h3>Primary Nav</h3>
	      <ul class="mura-primary-nav"></ul>
			</div>
			<div class="box sidebar">
				<h3>Child Nav</h3>
				<ul class="mura-child-nav"></ul>
				<div class="mura-region-container" data-region="leftcolumn"></div>
			</div>
			<div class="box content">
				<h3>Crumb Nav</h3>
				<ul class="mura-crumb-nav"></ul>
				<div class="mura-content"></div>
				<div class="mura-region-container" data-region="maincontent"></div>
			</div>
		</div>
		 <div class="mura-html-queues"></div>
  </script>

  <!-- This init's Mura.js and renders the content.  This could be another file -->
  <script>
  Mura.init(MuraCaaSConfig);

  Mura(function(){
    Mura.loader()
      .loadcss(Mura.endpoint + '/core/modules/v1/core_assets/css/mura.7.1.min.css')
      .loadcss(Mura.endpoint + '/core/modules/v1/core_assets/css/mura.7.1.skin.css');

    function buildNav(container,parentid){

	container.html('');

	if(parentid=='00000000000000000000000000000000001'){
	container.html('<li><a href="./#">Home</a></li>');
	}

	Mura.getFeed('content')
	.where()
	.prop('parentid').isEQ(parentid)
	.getQuery()
	.then(function(collection){
	collection.forEach(function(item){
	    container.append('<li><a href="' + item.get('url') + '">' + item.get('menutitle') + '</a></li>');
	});
	})
	}

	function renderNav(container,collection){
	container.html('');
	collection.forEach(function(item){
	  container.append('<li><a href="' + item.get('url') + '">' + item.get('menutitle') + '</a></li>');
	});
	}

	function buildCrumbs(content){
	content.get('crumbs').then(function(collection){
	collection.get('items').reverse()
	renderNav( Mura('.mura-crumb-nav'),collection);
	})
	}

	function renderTemplate(template){
		var t=Mura('#mura-template-' + template);

		Mura(Mura.CaaSContainerSelector).html('');

		if(t.length){
			Mura(Mura.CaaSContainerSelector).append(t.html());
		} else {
			Mura(Mura.CaaSContainerSelector).append(Mura('#mura-template-default'));

		}

	    buildNav(
	      Mura('.mura-primary-nav'),
	      '00000000000000000000000000000000001'
	    );

	}
    function render(){
      let hash= location.hash || '#';

      Mura.renderFilename(
        hash.split('#')[1],
        Mura.getQueryStringParams()
      ).then(function(content){

	renderTemplate(content.get('template'))

        Mura('.mura-content').html(content.get('body'));
        Mura('.mura-html-queues').html(content.get('htmlheadqueue') + content.get('htmlfootqueue'));

        Mura.extend(Mura,content.get('config'));

        Mura('.mura-region-container').each(function(){
          var item=Mura(this);
          item.html(
            content.renderDisplayRegion(
              item.data('region')
            )
          );
        })

        if(content.hasParent()
          && content.get('type') != 'Folder'
          && content.get('type') != 'Calendar'){
          buildNav(
            Mura('.mura-child-nav'),
            content.get('contentid')
          );
        } else {
          Mura('.mura-child-nav').html('');
        }

        buildCrumbs(content);

        Mura(document).processMarkup();

      });
    }

    render();

    Mura(window).on('hashchange', render);

  });
  </script>
</head>
<body>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<!-- This is the config to be used -->
	<style>
	body {
	margin: 40px;
	}

	.sidebar {
	grid-area: sidebar;
	}

	.content {
	grid-area: content;
	position: relative;
	}

	.header {
	grid-area: header;
	}

	.footer {
	grid-area: footer;
	}


	.wrapper {
	display: grid;
	grid-gap: 10px;
	grid-template-columns: 200px 200px 200px;
	grid-template-areas:
	"header header header"
	"sidebar content content"
	"footer footer footer";

	}

	.box {
	border: 1px solid black;
	border-radius: 5px;
	padding: 50px;
	font-size: 150%;

	}

	.header, .footer {

	}
	</style>

	<script>
	MuraCaaSConfig={
	siteid:'caas',
	endpoint:'http://caas.mura.local:8080',
	CaaSContainerSelector:'body'
	};
	</script>

	<!-- This is include the main Mura.js lib -->
	<script src="http://caas.mura.local:8080/core/modules/v1/core_assets/js/mura.js"></script>

	<!-- This is a simple template for Mura to use for it's content. This could be another file -->
	<script id="mura-template-default" type="text/x-mura-template">
	<div class="wrapper">
	<div class="box header">
	<h1>CaaS Example Site</h1>
	<h3>Primary Nav</h3>
	<ul class="mura-primary-nav"></ul>
	</div>
	<div class="box sidebar">
	<h3>Child Nav</h3>
	<ul class="mura-child-nav"></ul>
	<div class="mura-region-container" data-region="leftcolumn"></div>
	</div>
	<div class="box content">
	<h3>Crumb Nav</h3>
	<ul class="mura-crumb-nav"></ul>
	<div class="mura-content"></div>
	<div class="mura-region-container" data-region="maincontent"></div>
	</div>
	</div>
	<div class="mura-html-queues"></div>
	</script>

	<!-- This init's Mura.js and renders the content. This could be another file -->
	<script>
	Mura.init(MuraCaaSConfig);

	Mura(function(){
	Mura.loader()
	.loadcss(Mura.endpoint + '/core/modules/v1/core_assets/css/mura.7.1.min.css')
	.loadcss(Mura.endpoint + '/core/modules/v1/core_assets/css/mura.7.1.skin.css');

	function buildNav(container,parentid){

	container.html('');

	if(parentid=='00000000000000000000000000000000001'){
	container.html('<li><a href="./#">Home</a></li>');
	}

	Mura.getFeed('content')
	.where()
	.prop('parentid').isEQ(parentid)
	.getQuery()
	.then(function(collection){
	collection.forEach(function(item){
	container.append('<li><a href="' + item.get('url') + '">' + item.get('menutitle') + '</a></li>');
	});
	})
	}

	function renderNav(container,collection){
	container.html('');
	collection.forEach(function(item){
	container.append('<li><a href="' + item.get('url') + '">' + item.get('menutitle') + '</a></li>');
	});
	}

	function buildCrumbs(content){
	content.get('crumbs').then(function(collection){
	collection.get('items').reverse()
	renderNav( Mura('.mura-crumb-nav'),collection);
	})
	}

	function renderTemplate(template){
	var t=Mura('#mura-template-' + template);

	Mura(Mura.CaaSContainerSelector).html('');

	if(t.length){
	Mura(Mura.CaaSContainerSelector).append(t.html());
	} else {
	Mura(Mura.CaaSContainerSelector).append(Mura('#mura-template-default'));

	}

	buildNav(
	Mura('.mura-primary-nav'),
	'00000000000000000000000000000000001'
	);

	}
	function render(){
	let hash= location.hash \|\| '#';

	Mura.renderFilename(
	hash.split('#')[1],
	Mura.getQueryStringParams()
	).then(function(content){

	renderTemplate(content.get('template'))

	Mura('.mura-content').html(content.get('body'));
	Mura('.mura-html-queues').html(content.get('htmlheadqueue') + content.get('htmlfootqueue'));

	Mura.extend(Mura,content.get('config'));

	Mura('.mura-region-container').each(function(){
	var item=Mura(this);
	item.html(
	content.renderDisplayRegion(
	item.data('region')
	)
	);
	})

	if(content.hasParent()
	&& content.get('type') != 'Folder'
	&& content.get('type') != 'Calendar'){
	buildNav(
	Mura('.mura-child-nav'),
	content.get('contentid')
	);
	} else {
	Mura('.mura-child-nav').html('');
	}

	buildCrumbs(content);

	Mura(document).processMarkup();

	});
	}

	render();

	Mura(window).on('hashchange', render);

	});
	</script>
	</head>
	<body>
	</body>
	</html>