Skip to content

Instantly share code, notes, and snippets.

View benald's full-sized avatar

Benald benald

0 followers · 1 following
  • Perth, Australia
View GitHub Profile
@benald
benald / Cross-browser viewport height and width JS variables
Created September 20, 2019 01:27
An accurate cross browser / device viewport measurement
// Set cross-browser viewport height and width variable
viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
viewWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
@benald
benald / orientation detection
Created September 19, 2019 02:12
// Viewport detection
//
//
//
define([
"jquery"
],
function ($) {
var module = {
@benald
benald / Angular 7: Add class on toggle
Last active September 19, 2019 02:13
HTML:
<button type="button" class="uk-button" (click)="toggleControls()" [class.active]="show">toggle Controls</button>
TS:
// Define property in Component Class
public show = false;
// Define Toggle Function
toggleControls() {
this.show = !this.show;
@benald
benald / Angular 7: Add class to body
Last active May 3, 2019 06:59
TS:
// OnInit
ngOnInit() {
this.addBodyClass();
}
// Function: Add class to body
addBodyClass() {
const bodyTag = document.body;
@benald
benald / nunjucks-multilevel-navigation
Created November 29, 2018 00:45
Nunjucks Multi Level Navigation Template
// JSON Structure
[{
"title": "Home",
"name": "index"
},
{
"title": "Find a service",
"name": "find a service"
},
{
@benald
benald / liferay-image-slider.xml
Created October 12, 2018 05:22
<root available-locales="en_AU" default-locale="en_AU">
<dynamic-element fieldNamespace="ddm" indexType="keyword" localizable="true" name="Article" readOnly="false" repeatable="false" required="false" showLabel="true" type="ddm-separator" width="">
<dynamic-element fieldNamespace="ddm" indexType="keyword" localizable="true" name="openingGroupSection" readOnly="false" repeatable="false" required="false" showLabel="true" type="ddm-separator" width="">
<dynamic-element dataType="string" indexType="keyword" localizable="true" name="openingSectionLead" readOnly="false" repeatable="false" required="false" showLabel="true" type="textarea" width="small">
<meta-data locale="en_AU">
<entry name="label">
<![CDATA[openingSectionLead]]>
</entry>
<entry name="predefinedValue">
<![CDATA[]]>
@benald
benald / liferay-image-slider.ftl
Last active October 12, 2018 05:19
<#assign imageManagerService = serviceLocator.findService('IMAGE_MANAGER','helper') />
<div class="eds-c-panel">
<div class="inner-wrapper eds-c-content-view">
<#if Article.getSiblings()?has_content>
<#list Article.openingGroupSection.getSiblings() as cur_openingGroupSection>
<div class="row">
<div class="col-md-10 col-md-offset-1 eds-u-flush">
<#if cur_openingGroupSection.openingSectionLead.getData()?has_content && cur_openingGroupSection.openingSectionLead.getData() != '<p>&nbsp;</p>'>
<p class="eds-c-feature-paragraph">${cur_openingGroupSection.openingSectionLead.getData()}</p>
</#if>
@benald
benald / gulpfile.js
Last active September 20, 2019 01:46
/*
SET UP:
Open Terminal / CMD, run the following
1. npm i -g gulp (install GULP globally!)
2. install the gulp dependancies:
a. NPM: npm install --save-dev gulp gulp-concat gulp-uglify gulp-autoprefixer gulp-rename gulp-minify-css gulp-cssnano gulp-sass gulp-sourcemaps del gulp-imagemin gulp-plumber gulp-cache gulp-bootlint gulp-notify browser-sync
a. YARN: yarn add gulp gulp-concat gulp-uglify gulp-autoprefixer gulp-rename gulp-minify-css gulp-cssnano gulp-sass gulp-sourcemaps del gulp-imagemin gulp-plumber gulp-cache gulp-bootlint gulp-notify browser-sync --dev
3. Configure the location variables in the gulpfile.js to point to your CSS/SCSS/SASS directories that you are using.
4. run gulp to start
*/
@benald
benald / sticky footer with flex
Last active September 7, 2018 01:37
@benald
benald / FiltersPage.php
Created December 1, 2017 04:40
SIlverstripe 3.5 filters page
<?php
class FiltersPage extends Page {
private static $has_many = array (
'Types' => 'Type',
'Services' => 'Service',
'Industries' => 'Industry',
'Approaches' => 'Approach',