Skip to content

Commit bc08dda

Browse files
ChristianLundgrenChristianLundgren
authored
Merge pull request #21 from unlimitDesign/develop
Develop
2 parents 6955c68 + d80ae37 commit bc08dda

File tree

86 files changed

+2674
-2585
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

86 files changed

+2674
-2585
lines changed

‎dist/css/timber.css‎

Lines changed: 1786 additions & 1338 deletions
Large diffs are not rendered by default.

‎dist/css/timber.min.css‎

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
<body>
3131
<div class="wrapper reveal-side-navigation">
3232
<div class="wrapper-inner">
33+
3334
<!-- Content -->
3435
<div class="content clearfix">
3536
<div class="section-block p-0 bg-black">

‎dist/js/tm.core.js‎

Lines changed: 29 additions & 29 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/tm.core.min.js‎

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎npm-scripts/lib/timber.env.default.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,8 @@ module.exports = {
8989
'tml-zoom',
9090
'tml-thumbnails',
9191
'tml-exit',
92-
'tml-toolbar'
92+
'tml-toolbar',
93+
'preloader'
9394
],
9495
purgeCSS_whitelistPatterns: [/\bw-\b/]
9596
}

‎package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "timbercss",
3-
"version": "0.1.12",
3+
"version": "0.1.68",
44
"author": "UnlimitDesign",
55
"description": "A CSS Framework for Rapid Website Prototyping",
66
"keywords": [],
@@ -15,7 +15,7 @@
1515
},
1616
"main": "src/js/index.js",
1717
"style": "src/scss/timber.scss",
18-
"copyright": "Copyright © UnlimitDesign 2019",
18+
"copyright": "Copyright © UnlimitDesign 2020",
1919
"authorCredits": "UnlimitDesign, Christian Lundgren, Shu Miyao",
2020
"scripts": {
2121
"start": "webpack-dev-server --mode development",
@@ -36,9 +36,9 @@
3636
"purgecss-webpack-plugin": "^1.6.0",
3737
"sass-loader": "^7.3.1",
3838
"terser-webpack-plugin": "^1.4.1",
39-
"webpack": "^4.41.2",
40-
"webpack-cli": "^3.3.10",
41-
"webpack-dev-server": "^3.9.0",
39+
"webpack": "^4.41.6",
40+
"webpack-cli": "^3.3.11",
41+
"webpack-dev-server": "^3.10.3",
4242
"write-file-webpack-plugin": "^4.5.1"
4343
}
4444
}

‎src/js/_tm.core.js‎

Lines changed: 47 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,34 @@
11
// Copyright © UnlimitDesign 2019
22
// Plugin: Timber core
3-
// Version: 1.0.0
3+
// Version: 1.0.3
44
// URL: @UnlimitDesign
55
// Author: UnlimitDesign, Christian Lundgren, Shu Miyao
66
// Description: Creates instances of timber plugins
77
// License: MIT
88

99
// Utilities
1010
import tmInView from './utilities/_tm.inview.js';
11+
import tmLoadMedia from './utilities/_tm.loadmedia.js';
1112

1213
// Components
1314
import tmAccordion from './components/_tm.accordion.js';
14-
import tmTabs from './components/_tm.tabs.js';
1515
import tmCollapsable from './components/_tm.collapsable.js';
16-
import tmRollover from './components/_tm.rollover.js';
1716
import tmDismissable from './components/_tm.dismissable.js';
1817
import tmDropdown from './components/_tm.dropdown.js';
18+
import tmOverlayNavigation from './components/_tm.overlaynavigation.js';
19+
import tmRollover from './components/_tm.rollover.js';
1920
import tmScrollTo from './components/_tm.scrollto.js';
2021
import tmSideNavigation from './components/_tm.sidenavigation.js';
21-
import tmOverlayNavigation from './components/_tm.overlaynavigation.js';
2222
import tmToggleSubMenu from './components/_tm.togglesubmenu.js';
23+
import tmTabs from './components/_tm.tabs.js';
2324

2425
// Plugins
25-
import tmMasonryGrid from './plugins/_tm.masonrygrid.js';
26-
import tmFreeze from './plugins/_tm.freeze.js';
27-
import tmStickyHeader from './plugins/_tm.stickyheader.js';
28-
import tmLightbox from './plugins/_tm.lightbox.js';
2926
import tmHorizon from './plugins/_tm.horizon.js';
27+
import tmLightbox from './plugins/_tm.lightbox.js';
28+
import tmMasonryGrid from './plugins/_tm.masonrygrid.js';
3029
import tmParallax from './plugins/_tm.parallax.js';
3130
import tmResponsiveVideo from './plugins/_tm.responsivevideo.js';
31+
import tmStickyHeader from './plugins/_tm.stickyheader.js';
3232

3333
const timberCore = (function () {
3434

@@ -45,20 +45,20 @@ const timberCore = (function () {
4545
collapsable: '.collapsable',
4646
dismissable: '.dismissable',
4747
dropdown: '.dropdown',
48-
freeze: '.freeze',
49-
horizon: '.horizon',
5048
lightbox: '.lightbox',
51-
grid: '.grid.preload',
49+
horizon: '.horizon',
5250
inview: '.observe',
53-
overlaynav: '.overlay-nav-show',
51+
loadmedia: '.preload-media',
52+
masonrygrid: '.masonry',
53+
overlaynavigation: '.overlay-nav-show',
54+
parallax: '.parallax',
5455
rollover: '.thumbnail',
5556
scrollto: '.scroll-to',
56-
sidenav: '.side-nav-show',
57+
sidenavigation: '.side-nav-show',
5758
stickyheader: '.header',
59+
togglesubmenu: '.toggle-sub-menus',
5860
tabs: '.tabs',
59-
subMenus: '.toggle-sub-menus',
60-
parallax: '.parallax',
61-
responsiveVideo: '.video'
61+
responsivevideo: '.video'
6262
};
6363

6464
// Create an empty plugin object
@@ -71,37 +71,56 @@ const timberCore = (function () {
7171
plugin.defaults = defaults;
7272
plugin.options = options;
7373
plugin.settings = Object.assign({}, defaults, options);
74-
plugin.module = { accordion: null, collapsable: null, dismissable: null, dropdown: null, freeze: null, horizon: null, grid: null, inview: null, overlaynavigation: null, rollover: null, scrollto: null, sidenavigation: null, stickyheader: null, tabs: null, togglesubmenu: null };
75-
74+
plugin.module = {
75+
accordion: null,
76+
collapsable: null,
77+
dismissable: null,
78+
dropdown: null,
79+
lightbox: null,
80+
horizon: null,
81+
inview: null,
82+
loadmedia: null,
83+
masonrygrid: null,
84+
overlaynavigation: null,
85+
parallax: null,
86+
rollover: null,
87+
scrollto: null,
88+
sidenavigation: null,
89+
stickyheader: null,
90+
tabs: null,
91+
togglesubmenu: null,
92+
responsivevideo: null,
93+
};
94+
7695
// Create instances if module exists
7796
if (typeof tmAccordion != 'undefined') plugin.module.accordion = new tmAccordion(plugin.settings.accordion);
7897
if (typeof tmCollapsable != 'undefined') plugin.module.collapsable = new tmCollapsable(plugin.settings.collapsable);
7998
if (typeof tmDismissable != 'undefined') plugin.module.dismissable = new tmDismissable(plugin.settings.dismissable);
8099
if (typeof tmDropdown != 'undefined') plugin.module.dropdown = new tmDropdown(plugin.settings.dropdown);
81-
if (typeof tmFreeze != 'undefined') plugin.module.freeze = new tmFreeze(plugin.settings.freeze);
82100
if (typeof tmLightbox != 'undefined') plugin.module.lightbox = new tmLightbox(plugin.settings.lightbox);
83101
if (typeof tmHorizon != 'undefined') plugin.module.horizon = new tmHorizon(plugin.settings.horizon);
84-
if (typeof tmMasonryGrid != 'undefined') plugin.module.grid = new tmMasonryGrid(plugin.settings.grid);
85102
if (typeof tmInView != 'undefined') plugin.module.inview = new tmInView(plugin.settings.inview);
86-
if (typeof tmOverlayNavigation != 'undefined') plugin.module.overlaynavigation = new tmOverlayNavigation(plugin.settings.overlaynav);
103+
if (typeof tmLoadMedia != 'undefined') plugin.module.loadmedia = new tmLoadMedia(plugin.settings.loadmedia);
104+
if (typeof tmMasonryGrid != 'undefined') plugin.module.masonrygrid = new tmMasonryGrid(plugin.settings.masonrygrid);
105+
if (typeof tmOverlayNavigation != 'undefined') plugin.module.overlaynavigation = new tmOverlayNavigation(plugin.settings.overlaynavigation);
87106
if (typeof tmParallax != 'undefined') plugin.module.parallax = new tmParallax(plugin.settings.parallax);
88107
if (typeof tmRollover != 'undefined') plugin.module.rollover = new tmRollover(plugin.settings.rollover);
89108
if (typeof tmScrollTo != 'undefined') plugin.module.scrollto = new tmScrollTo(plugin.settings.scrollto);
90-
if (typeof tmSideNavigation != 'undefined') plugin.module.sidenavigation = new tmSideNavigation(plugin.settings.sidenav);
109+
if (typeof tmSideNavigation != 'undefined') plugin.module.sidenavigation = new tmSideNavigation(plugin.settings.sidenavigation);
91110
if (typeof tmStickyHeader != 'undefined') plugin.module.stickyheader = new tmStickyHeader(plugin.settings.stickyheader);
92111
if (typeof tmTabs != 'undefined') plugin.module.tabs = new tmTabs(plugin.settings.tabs);
93-
if (typeof tmToggleSubMenu != 'undefined') plugin.module.togglesubmenu = new tmToggleSubMenu(plugin.settings.subMenus);
94-
if (typeof tmResponsiveVideo != 'undefined') plugin.module.responsivevideo = new tmResponsiveVideo(plugin.settings.responsiveVideo);
112+
if (typeof tmToggleSubMenu != 'undefined') plugin.module.togglesubmenu = new tmToggleSubMenu(plugin.settings.togglesubmenu);
113+
if (typeof tmResponsiveVideo != 'undefined') plugin.module.responsivevideo = new tmResponsiveVideo(plugin.settings.responsivevideo);
95114
} catch (error) {
96115
console.log(`${error} - ensure module is imported or instantiate specific plugin instead of core, for example: plugin.module.moduleName.initialize();`);
97116
}
98-
117+
99118
/**
100119
* Initialize the plugin.
101120
*/
102121
plugin.initialize = () => {
103122
for (let module in plugin.module) {
104-
if (plugin.module[module] != null && document.querySelector(plugin.module[module].elements)) plugin.module[module].initialize();
123+
if (plugin.module[module] != null && document.querySelector(plugin.settings[module])) plugin.module[module].initialize();
105124
}
106125
};
107126

@@ -110,7 +129,7 @@ const timberCore = (function () {
110129
*/
111130
plugin.refresh = () => {
112131
for (let module in plugin.module) {
113-
if (plugin.module[module] != null && document.querySelector(plugin.module[module].elements)) plugin.module[module].refresh();
132+
if (plugin.module[module] != null && document.querySelector(plugin.settings[module])) plugin.module[module].refresh();
114133
}
115134
};
116135

@@ -119,7 +138,7 @@ const timberCore = (function () {
119138
*/
120139
plugin.destroy = () => {
121140
for (let module in plugin.module) {
122-
if (plugin.module[module] != null && document.querySelector(plugin.module[module].elements)) plugin.module[module].destroy();
141+
if (plugin.module[module] != null && document.querySelector(plugin.settings[module])) plugin.module[module].destroy();
123142
}
124143
};
125144

‎src/js/components/_tm.accordion.js‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Copyright © UnlimitDesign 2019
22
// Plugin: Accordion
3-
// Version: 1.0.0
3+
// Version: 1.0.3
44
// URL: @UnlimitDesign
55
// Author: UnlimitDesign, Christian Lundgren, Shu Miyao
66
// Description: Detect when elements enter and/or leave viewport
@@ -9,6 +9,7 @@
99
// Import utilities
1010
import classList from '../utilities/_chaining.js';
1111
import locationHash from '../utilities/_locationHash.js';
12+
import passiveSupported from '../utilities/_passivesupported.js';
1213

1314
const tmAccordion = (function () {
1415

@@ -38,7 +39,7 @@ const tmAccordion = (function () {
3839
* @param {object} options The plugin options.
3940
*/
4041
function Accordion(element, options) {
41-
42+
4243
// Create an empty plugin object
4344
const plugin = {};
4445

@@ -57,7 +58,8 @@ const tmAccordion = (function () {
5758
* @param {accLink} element The accordion tab link(s).
5859
*/
5960
const addLinkEvents = (acclink) =>{
60-
acclink.addEventListener(eventType, updateAccordionState, false);
61+
let eventOptions = eventType == 'click' ? false : passiveSupported() && acclink.tagName != 'A' ? {passive: true} : {passive: false};
62+
acclink.addEventListener(eventType, updateAccordionState, eventOptions);
6163
};
6264

6365
/**
@@ -72,13 +74,13 @@ const tmAccordion = (function () {
7274
* Update accordion
7375
*/
7476
const updateAccordionState = () =>{
75-
event.preventDefault();
77+
if(event.target.tagName === 'A') event.preventDefault();
7678
event.stopPropagation();
7779

7880
let linkClicked = event.target;
79-
let linkClickedTarget = linkClicked.getAttribute('href');
81+
let linkClickedTarget = linkClicked.getAttribute('href') ? linkClicked.getAttribute('href') : linkClicked.dataset.target;
8082
let linkActive = linkClicked.closest('.accordion').querySelector('.accordion-nav.active');
81-
let allPanes = linkClicked.parentNode.querySelectorAll('.accordion-pane');
83+
let allPanes = linkClicked.closest('.accordion').querySelectorAll('.accordion-pane');
8284
let targetPane = linkClicked.parentNode.querySelector(linkClickedTarget);
8385
let multiplePane = linkClicked.closest('.accordion').hasAttribute('data-toggle-multiple');
8486
let toggleTimer = null;
@@ -123,6 +125,7 @@ const tmAccordion = (function () {
123125
plugin.settings.paneVisible();
124126
}, 50 );
125127
}
128+
return false;
126129
};
127130

128131
/**
@@ -152,7 +155,8 @@ const tmAccordion = (function () {
152155
let hashExists = location[0];
153156
let itemID = location[1];
154157
if(hashExists){
155-
plugin.triggerLinkClick('a[href="' + itemID + '"]');
158+
let target = document.getElementsByTagName('a[href="' + itemID + '"]').length === 0 ? 'a[href="' + itemID + '"]' : 'button[data-target="' + itemID + '"]';
159+
plugin.triggerLinkClick(target);
156160
}
157161

158162
// Add window resize event
@@ -169,12 +173,14 @@ const tmAccordion = (function () {
169173
plugin.triggerLinkClick = (link) => {
170174
try{
171175
link = document.querySelector(link);
172-
let event = new MouseEvent('click', {
176+
let newEvent;
177+
let event = !mobile ? MouseEvent : TouchEvent;
178+
newEvent = new event(eventType, {
173179
bubbles: true,
174180
cancelable: true,
175181
view: window
176182
});
177-
let canceled = !link.dispatchEvent(event);
183+
let canceled = !link.dispatchEvent(newEvent);
178184
}catch(error) {
179185
console.log(`${error} - selector not entered or does not exist`);
180186
}

‎src/js/components/_tm.collapsable.js‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Copyright © UnlimitDesign 2019
22
// Plugin: Collapsable
3-
// Version: 1.0.0
3+
// Version: 1.0.3
44
// URL: @UnlimitDesign
55
// Author: UnlimitDesign, Christian Lundgren, Shu Miyao
66
// Description: Detect when elements enter and/or leave viewport
@@ -10,6 +10,7 @@
1010
import classList from '../utilities/_chaining.js';
1111
import locationHash from '../utilities/_locationHash.js';
1212
import getParents from '../utilities/_getparents.js';
13+
import passiveSupported from '../utilities/_passivesupported.js';
1314

1415
const tmCollapsable = (function () {
1516

@@ -60,7 +61,8 @@ const tmCollapsable = (function () {
6061
* @param {element} The collapsable link(s).
6162
*/
6263
const addLinkEvents = (collapsableLink, eventType) => {
63-
collapsableLink.addEventListener(eventType, toggleTimeout, false);
64+
let eventOptions = eventType == 'click' ? false : passiveSupported() && collapsableLink.tagName != 'A' ? {passive: true} : {passive: false};
65+
collapsableLink.addEventListener(eventType, toggleTimeout, eventOptions);
6466
};
6567

6668
/**
@@ -78,7 +80,8 @@ const tmCollapsable = (function () {
7880
const getCollapsableTarget = (element) =>{
7981
let radio = element.type == 'radio';
8082
let checkbox = element.type == 'checkbox';
81-
let collapsableTarget = radio || checkbox ? document.querySelector(element.dataset.targetContent) : document.querySelector(element.getAttribute('href'));
83+
let button = element.tagName == 'BUTTON';
84+
let collapsableTarget = radio || checkbox || button ? document.querySelector(element.dataset.target) : document.querySelector(element.getAttribute('href'));
8285
return collapsableTarget;
8386
};
8487

@@ -87,7 +90,7 @@ const tmCollapsable = (function () {
8790
* @param {event} click event.
8891
*/
8992
const toggleTimeout = (event) => {
90-
event.preventDefault();
93+
if(event.target.tagName === 'A') event.preventDefault();
9194
event.stopPropagation();
9295

9396
// Clear height of any collapsable parents in the event that the
@@ -179,9 +182,9 @@ const tmCollapsable = (function () {
179182

180183
// Set active based on hash
181184
if(hashExists){
182-
if(radio && element.dataset.targetContent == itemID) getCollapsableTarget(element).style.height = '0px';
183-
if(element.dataset.targetContent == itemID){
184-
plugin.triggerClick('[data-target-content="' + itemID + '"]');
185+
if(radio && element.dataset.target == itemID) getCollapsableTarget(element).style.height = '0px';
186+
if(element.dataset.target == itemID){
187+
plugin.triggerClick('[data-target="' + itemID + '"]');
185188
}else if(element.href && element.href.substring(element.href.indexOf('#')) == itemID){
186189
getCollapsableTarget(element).style.height = '0px';
187190
plugin.triggerClick('a[href="' + itemID + '"]');
@@ -204,12 +207,14 @@ const tmCollapsable = (function () {
204207
plugin.triggerClick = (element) => {
205208
try{
206209
element = document.querySelector(element);
207-
let event = new MouseEvent('click', {
210+
let newEvent;
211+
let event = !mobile ? MouseEvent : TouchEvent;
212+
newEvent = new event(eventType, {
208213
bubbles: true,
209214
cancelable: true,
210215
view: window
211216
});
212-
let canceled = !element.dispatchEvent(event);
217+
let canceled = !element.dispatchEvent(newEvent);
213218
}catch(error) {
214219
console.log(`${error} - selector not entered or does not exist`);
215220
}

0 commit comments

Comments
 (0)