Javascript

Check out the Styleguide page for everything on the site including grids and responsive tables.

Yo Dependency Script

Quick intro about Yo

The newely implemented Javascript uses a library called Yo version 1.0

what it does

Yo allows you to write scripts and pull dependencies from anywhere in the page while making you think in a modular way as you write your scripts

How to write a basic script

The are examples on the github repo but this will soon be changing to version 2. So here are some v1.0 examples:

Let's create a basic script with no dependencies which wraps all of your code in a scope away from the Body of the site, as in not Global.

<script>

Yo.add('hello', function () {
var world = "Hello World";
console.log(world);
return {};

});

</script>

What does this do?

copy and paste the yo block without the script tags into the console and you'll see Hello World outputted. One thing to pay attention to is the var world which is scoped only to the function it's within. This means the Global scope cannot access it!

But if I want all of this scoped code to be accessible without conflicting with other variables globally by accident, what do I do?

Let's see

<script>

// Script hello
Yo.add('hello', ['world'], function (cabbages) {
console.log(cabbages);
return {};

});

// Script world
Yo.add('world', function () {
var sayHello = "Hello World";
return sayHello;

});

</script>

Note: Hello loads and is dependent on world. World returns a string "Hello World" and when World has finished "Hello" then runs and console logs the result.

Also Note: The argument Cabbages in the hello script I could have named this world, but I wanted you to know you could call it anything you want.

So another example with a little extra returned just to get the full picture.

<script>

// Script cms.hello
Yo.add('cms.hello', ['cms.long.namespace.hello', 'cms.component.stuff'], function (hello, stuff) {
console.log(hello.sayHello('Active Motif'));
console.log(stuff.add(100, 100));
console.log(stuff.subtract(100, 25));
console.log(stuff.addMonkeys('Send out the flying'));
console.log(stuff.addMonkeys('My kids are a load of little'));
return {};

});

// Script cms.long.namespace.hello
Yo.add('cms.long.namespace.hello', function () {
function sayHello(name) {
console.log('Hello there ' + name);

}

return {
sayHello: sayHello
};

});

// Script cms.component.stuff
Yo.add('cms.component.stuff', function () {
function add(a, b) {
return a + b;

}

function subtract(a, b) {
return a - b;

}

function addMonkeys(str) {
return str + ' Monkeys';

}

return {
add: add,
subtract: subtract,
addMonkeys: addMonkeys
};

});

</script>

So whats going on here?

  • 3 scripts are loading with their own namespace
  • All 3 scripts have a namespace starting with cms, because if the scripts are in the CMS then it's good practice.
  • 1 of the scripts has a longer namespace which ends as the same name of hello as the 1st script. With no conflict.
  • cms.hello is dependent on the other 2 scripts so it waits before it runs.
  • cms.long.namespace.hello returns a function for saying hello
  • cms.component.stuff returns functions for:
  • -- add - adds a and b
  • -- subract - subtracts b from a
  • -- addMonkeys - adds monkeys to the end of a string

The final output in the console when run should be:

Hello there Active Motif
200
75
Send out the flying Monkeys
My kids are a load of little Monkeys

You will also see some undefined output but there is no need to worry about that.

Public Scripts

What scripts are available for you to use

  • Functions
  • Modal
  • Overlay

Functions

Dependency name: "functions.all"

Description: Gives you access to all available functions shared

  • debounce
  • breakPoints
  • isMobile

<script>

// new script using functions.all

Yo.add('cms.scripty', ['functions.all'], function (funcAll) {

// DEBOUNCE

/* The debounce function is provided 2 parameters – a function and a Number. Declared a variable debounceTimer, which as the name suggests, is used to actually call the function, received as a parameter after an interval of 'delay' milliseconds. */

// The smaller the number the quicker the response but the more actions are run.
$(window).on('resize', funcAll.debounce(function () {
console.log('Page resized to: ' + window.innerWidth);

}, 50));

// BREAKPOINTS

// All breakpoint names and sizes in an object

console.log(funcAll.breakPoints.breakPoints);

// Check if greater or equal to size name
if (funcAll.breakPoints.greaterOrEqual('tablet')) {
console.log('Hey the page width is greater or equal to tablet size of' + funcAll.breakPoints.breakPoints.tablet);

}

// Check if less than size name
if (funcAll.breakPoints.lessThan('mobile')) {
console.log('Hey the page width is less than size of ' + funcAll.breakPoints.breakPoints.mobile);

}

// ISMOBILE

// Simple Boolean

alert('isMobile: ' + funcAll.isMobile);

});

</script>

Modal

Dependency name: "components.modal"

Description: Allows access to the modal component and it's public methods

<script>

Yo.add('cms.scripty', ['components.modal'], function (modal) {
modal.open({})

});

</script>
9

modal.show parameters

content Can be a jQuery object or a Dom Element
extraClass For overriding the styles of the modal for that particular activation. Try to prefix it with "modal-" so things aren't confusing
type 2 options, undefined for centered Modal & 'full' for full screen modal. Type comes into play when you have a consistent modal type. So maybe you find your making a small modal asking a question with 2 buttons. We would then need to add that type to the SASS styling so you only have to reference the class name rather than repeatedly add the style to CMS pages.

So lets see a working example

Lets create 2 button examples

  1. Will just copy the purple menu browse nav to a modal
  2. Will copy the purple menu browse nav to a modal and add a class to override it.

Let us duplicate the left purple menu browse navigation block into a modal and give it a class to override the modal.

Modal Test 1
Modal Test 2

<style>

.modal-something-fancy {
background: #fc0;
width: 90%;
height: 90%;
box-shadow: 0 0 200px rgba(0, 0, 0, 0.6);

}

</style>

<script>

/* Modal show options and defaults
modal.show({
content: $('<div/>'),
extraClass: '',
type: undefined
});
*/

Yo.add('cms.modalscripty1', ['components.modal'], function (modal) {

// Simple Exmample 1, using vanilla Javascript
document.getElementById('openModalTest1').addEventListener('click', function () {
modal.show({
content: document.getElementById('menu-browse')
});

});

// Simple Example 2, using jQuery
$('#openModalTest2').on('click', function () {
modal.show({
content: $('#menu-browse'),
extraClass: 'modal-something-fancy'
});
});

});

</script>

Test 1 simple opens a default modal and sends it an Element which is cloned

Test 2 opens a modal and sends a classname which overrides the styling. by default the width is 80% and height 50%. But if you need to make a small modal with options then construct it in the CMS with an ID and just point to it. All very simple.

Example modal styled with content

Modal Test 3

Would you like to continue where you left off?

Cancel
Okay
<div style="display: none;">
<div id="notificationBlock">
<h1>Would you like to continue where you left off?</h1>
<div class="modal-nav fg fg2">
<div class="center">
<a href="#" class="bttn-main" id="NotificationCancel">Cancel</a>
</div>
<div class="center">
<a href="#" class="bttn-main" id="NotificationContinue">Okay</a>
</div>
</div>
</div>

</div>

<style>

.modal-something-fancy {
background: #fc0;
width: 90%;
height: 90%;
box-shadow: 0 0 200px rgba(0, 0, 0, 0.6);

}

</style>

<script>

Yo.add('cms.modalscripty2', ['components.modal'], function (modal) {

$('#NotificationCancel').on('click', function () {
modal.hide();
console.log('Cancelled');

});

$('#NotificationContinue').on('click', function () {
modal.hide();
console.log('Continued, then run other scripts here');

});

$('#openModalTest3').on('click', function () {
modal.show({
content: $('#notificationBlock'),
extraClass: 'modal-notification'
});

});

});

</script>

Overlay

Dependency name: "components.overlay"

Description: Overlay element with public methods for show and hide

Z Index: 90

Copy and paste the script below and paste it into the console of your Chrome browser.

<script>

Yo.add('cms.anotherScripty', ['components.overlay'], function (overlay) {

overlay.show();

var $tempButton = $('<a href="#">CLOSE THE OVERLAY</a>')
.css({
zIndex: 100,
padding: 20,
position: 'fixed',
left: '50%',
top: '50%',
transform: 'translate(-50%, -50%)',
background: '#ffcc00',
display: 'inline-block',
cursor: 'pointer'
})
.appendTo($('body'))
.on('click', function () {
overlay.hide();
$(this).remove();
});

});

</script>

Basically you show and hide the Overlay using the 2 functions, the above script mostly creates a fake button to be clicked on to hide the overlay.

Language

Dependency Name: "utils.language"

Description: For adding your own languages into the CMS via the global/languages template. In any new Modal you create in the CMS you may want to show the correct text for the chosen language. (ja, en, zh).

<script>

// So lets look at an example
Yo.add('cms.languagetest', ['utils.language'], function (lang) {
var hello = lang._('hello.world');
console.log(hello);

});

</script>

Overriding the language

If you want to show a specific language regardless of what the user has the language on, you can do the following

<script>

// Example Overriding
Yo.add('cms.languagetest', ['utils.language'], function (lang) {
var hello = lang._('hello.world', 'ja');
console.log(hello); // displays Japanese verion

});

</script>