arman_mohtadji/Ceras
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
armansansd
2023-07-12 16:31:19 +01:00
commit 3424b1927b
23306 changed files with 2217776 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/ceras/node_modules/foundation-sites/test/javascript/components/abide.js
Generated Vendored Executable
+178
View File
@@ -0,0 +1,178 @@
/* jslint mocha: true */
/*global describe, it, before, beforeEach, after, afterEach, $, Foundation */
describe('Abide', function() {
var plugin;
var $html;
afterEach(function() {
plugin.destroy();
$html.remove();
});
describe('constructor()', function() {
it('stores the element & plugin options', function() {
$html = $('<form data-abide novalidate></form>').appendTo('body');
plugin = new Foundation.Abide($html, {});
plugin.$element.should.be.an('object');
plugin.options.should.be.an('object');
});
it('the options are recursively merged', function() {
$html = $('<form data-abide novalidate></form>').appendTo('body');
var options = {
validators: {
notEqualTo: function (el, required, parent) {
return $(`#${el.attr('data-equalto')}`).val() !== el.val();
}
}
};
plugin = new Foundation.Abide($html, options);
plugin.options.validators.should.includes.keys('equalTo', 'notEqualTo');
});
});
describe('validateInput()', function() {
it('returns true for hidden inputs', function() {
$html = $("<form data-abide novalidate><input type='hidden' required></form>").appendTo("body");
plugin = new Foundation.Abide($html, {});
plugin.validateInput($html.find("input")).should.equal(true);
});
it('returns true for inputs with [data-abide-ignore]', function() {
$html = $("<form data-abide novalidate><input type='text' required data-abide-ignore></form>").appendTo("body");
plugin = new Foundation.Abide($html, {});
plugin.validateInput($html.find("input")).should.equal(true);
});
it('returns true for checked checkboxes', function() {
$html = $("<form data-abide><input type='checkbox' required checked='checked'></form>").appendTo("body");
plugin = new Foundation.Abide($html, {});
plugin.validateInput($html.find("input")).should.equal(true);
});
it('returns false for unchecked checkboxes', function() {
$html = $("<form data-abide><input type='checkbox' required></form>").appendTo("body");
plugin = new Foundation.Abide($html, {});
plugin.validateInput($html.find("input")).should.equal(false);
});
it('returns true for selected select option', function() {
$html = $("<form data-abide><select required><option value=''></option><option value='One'>One</option><option value='Two' selected='selected'>Two</option></select></form>").appendTo("body");
plugin = new Foundation.Abide($html, {});
plugin.validateInput($html.find("select")).should.equal(true);
$html.find("select").val().should.equal("Two");
});
it('returns false for unselected select option', function() {
$html = $("<form data-abide><select required><option value=''></option><option value='One'>One</option><option value='Two'>Two</option></select></form>").appendTo("body");
plugin = new Foundation.Abide($html, {});
plugin.validateInput($html.find("select")).should.equal(false);
});
});
describe('addErrorClasses()', function() {
it('adds aria-invalid attribute to element', function() {
$html = $('<form data-abide><input type="text"></form>').appendTo('body');
plugin = new Foundation.Abide($html, {});
plugin.addErrorClasses($html.find('input'));
$html.find('input').should.have.attr('aria-invalid', 'true')
});
});
describe('addGlobalErrorA11yAttributes()', function () {
it('adds [aria-live] attribute on element', function () {
$html = $(`<form data-abide><span data-abide-error></span></form>`).appendTo('body');
plugin = new Foundation.Abide($html, { a11yErrorLevel: 'test-level' });
plugin.addA11yAttributes($html.find('[data-abide-error]'));
$html.find('[data-abide-error]').should.have.attr('aria-live', 'test-level');
});
});
describe('addA11yAttributes()', function () {
it('adds [aria-describedby] attribute to field and [for] attribute to form error', function() {
$html = $(`
<form data-abide>
<input type="text" id="test-input">
<label class="form-error" id="test-error">Form error</label>
</form>
`).appendTo('body');
plugin = new Foundation.Abide($html, {});
plugin.addA11yAttributes($html.find('input'));
$html.find('input').should.have.attr('aria-describedby', 'test-error');
$html.find('label.form-error').should.have.attr('for', 'test-input');
});
it('adds attributes and ids when no id is set', function() {
$html = $(`
<form data-abide>
<input type="text">
<label class="form-error">Form error</label>
</form>
`).appendTo('body');
plugin = new Foundation.Abide($html, {});
plugin.addA11yAttributes($html.find('input'));
const errorId = $html.find('.form-error').attr('id');
$html.find('.form-error').should.have.attr('id').exist;
$html.find('input').should.have.attr('aria-describedby', errorId);
const inputId = $html.find('input').attr('id');
$html.find('input').should.have.attr('id').exist;
$html.find('.form-error').should.have.attr('for', inputId);
});
});
describe('removeErrorClasses()', function() {
it('removes aria-invalid attribute from element', function() {
$html = $('<form data-abide><input type="text"></form>').appendTo('body');
plugin = new Foundation.Abide($html, {});
// Add error classes first
plugin.addErrorClasses($html.find('input'));
plugin.removeErrorClasses($html.find('input'));
$html.find('input').should.not.have.attr('aria-invalid')
});
});
describe('removeRadioErrorClasses()', function() {
it('removes aria-invalid attribute from radio group', function() {
$html = $('<form data-abide><input type="radio" name="groupName"></form>').appendTo('body');
plugin = new Foundation.Abide($html, {});
// Add error classes first
plugin.addErrorClasses($html.find('input'));
plugin.removeRadioErrorClasses('groupName');
$html.find('input').should.not.have.attr('aria-invalid')
});
});
describe('resetForm()', function() {
it('removes aria-invalid attribute from elements', function() {
$html = $('<form data-abide><input type="text"></form>').appendTo('body');
plugin = new Foundation.Abide($html, {});
// Add error classes first
plugin.addErrorClasses($html.find('input'));
plugin.resetForm();
$html.find('input').should.not.have.attr('aria-invalid')
});
});
});
themes/ceras/node_modules/foundation-sites/test/javascript/components/accordion.js
Generated Vendored Executable
+190
View File
@@ -0,0 +1,190 @@
describe('Accordion', function() {
var plugin;
var $html;
var template = `<ul class="accordion" data-accordion>
<li class="accordion-item is-active" data-accordion-item>
<a href="#" class="accordion-title">Accordion 1</a>
<div class="accordion-content" data-tab-content >
<p>Panel 1. Lorem ipsum dolor</p>
<a href="#">Nowhere to Go</a>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Accordion 2</a>
<div class="accordion-content" data-tab-content>
<textarea></textarea>
<button class="button">I do nothing!</button>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Accordion 3</a>
<div class="accordion-content" data-tab-content>
Pick a date!
<input type="date"></input>
</div>
</li>
</ul>`;
afterEach(function() {
plugin.destroy();
document.activeElement.blur();
$html.remove();
});
describe('constructor()', function() {
it('stores the element and plugin options', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Accordion($html, {});
plugin.$element.should.be.an('object');
plugin.options.should.be.an('object');
});
});
describe('up()', function(done) {
it('closes the targeted container if allowAllClosed is true', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Accordion($html, {allowAllClosed: true});
plugin.up($html.find('.accordion-content').eq(0));
$html.find('.accordion-content').eq(0).should.have.attr('aria-hidden', 'true');
$html.on('up.zf.accordion', function() {
$html.find('.accordion-content').eq(0).should.be.hidden;
done();
});
});
it('toggles attributes of title of the targeted container', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Accordion($html, {allowAllClosed: true});
plugin.up($html.find('.accordion-content').eq(0));
$html.find('.accordion-title').eq(0).should.have.attr('aria-expanded', 'false');
$html.find('.accordion-title').eq(0).should.have.attr('aria-selected', 'false');
});
it('not closes the open container if allowAllClosed is false', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Accordion($html, {allowAllClosed: false});
plugin.up($html.find('.accordion-content').eq(0));
$html.find('.accordion-content').eq(0).should.be.visible;
// Element has aria-hidden="false" not set if it has not been actively toggled so far
// Therefor check if it has not aria-hidden="true"
$html.find('.accordion-content').eq(0).should.not.have.attr('aria-hidden', 'true');
});
});
describe('down()', function() {
it('opens the targeted container', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Accordion($html, {});
plugin.down($html.find('.accordion-content').eq(1));
$html.find('.accordion-content').eq(1).should.be.visible;
$html.find('.accordion-content').eq(1).should.have.attr('aria-hidden', 'false');
});
it('toggles attributes of title of the targeted container', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Accordion($html, {});
plugin.down($html.find('.accordion-content').eq(1));
$html.find('.accordion-title').eq(1).should.have.attr('aria-expanded', 'true');
$html.find('.accordion-title').eq(1).should.have.attr('aria-selected', 'true');
});
it('closes open container if multiExpand is false', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.Accordion($html, {multiExpand: false});
plugin.down($html.find('.accordion-content').eq(1));
$html.find('.accordion-content').eq(0).should.have.attr('aria-hidden', 'true');
$html.on('up.zf.accordion', function() {
$html.find('.accordion-content').eq(0).should.be.hidden;
done();
});
});
it('not closes open container if multiExpand is true', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Accordion($html, {multiExpand: true});
plugin.down($html.find('.accordion-content').eq(1));
$html.find('.accordion-content').eq(0).should.be.visible;
// Element has aria-hidden="false" not set if it has not been actively toggled so far
// Therefor check if it has not aria-hidden="true"
$html.find('.accordion-content').eq(0).should.not.have.attr('aria-hidden', 'true');
});
});
describe('toggle()', function(done) {
it('closes the only open container if allowAllClosed is true', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Accordion($html, {allowAllClosed: true});
plugin.toggle($html.find('.accordion-content').eq(0));
$html.find('.accordion-content').eq(0).should.have.attr('aria-hidden', 'true');
$html.on('up.zf.accordion', function() {
$html.find('.accordion-content').eq(0).should.be.hidden;
done();
});
});
it('not closes the only open container if allowAllClosed is false', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Accordion($html, {allowAllClosed: false});
plugin.toggle($html.find('.accordion-content').eq(0));
$html.find('.accordion-content').eq(0).should.be.visible;
$html.find('.accordion-content').eq(0).should.have.attr('aria-hidden', 'false');
});
});
describe('keyboard events', function() {
it('opens next panel on ARROW_DOWN', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Accordion($html, {});
$html.find('.accordion-title').eq(0).focus()
.trigger(window.mockKeyboardEvent('ARROW_DOWN'));
$html.find('.accordion-content').eq(1).should.be.visible;
$html.find('.accordion-content').eq(1).should.have.attr('aria-hidden', 'false');
// Check if focus was moved
$html.find('.accordion-title').eq(1)[0].should.be.equal(document.activeElement);
});
it('opens previous panel on ARROW_UP', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Accordion($html, {});
$html.find('.accordion-title').eq(2).focus()
.trigger(window.mockKeyboardEvent('ARROW_UP'));
$html.find('.accordion-content').eq(1).should.be.visible;
$html.find('.accordion-content').eq(1).should.have.attr('aria-hidden', 'false');
// Check if focus was moved
$html.find('.accordion-title').eq(1)[0].should.be.equal(document.activeElement);
});
it('opens related panel on ENTER', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Accordion($html, {});
$html.find('.accordion-title').eq(1).focus()
.trigger(window.mockKeyboardEvent('ENTER'));
$html.find('.accordion-content').eq(1).should.be.visible;
$html.find('.accordion-content').eq(1).should.have.attr('aria-hidden', 'false');
});
it('opens related panel on SPACE', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Accordion($html, {});
$html.find('.accordion-title').eq(1).focus()
.trigger(window.mockKeyboardEvent('SPACE'));
$html.find('.accordion-content').eq(1).should.be.visible;
$html.find('.accordion-content').eq(1).should.have.attr('aria-hidden', 'false');
});
});
});
themes/ceras/node_modules/foundation-sites/test/javascript/components/accordionMenu.js
Generated Vendored Executable
+190
View File
@@ -0,0 +1,190 @@
describe('Accordion Menu', function() {
var plugin;
var $html;
var template = `
<ul class="vertical menu">
<li>
<a href="#">Item 1</a>
<ul class="menu vertical nested">
<li>
<a href="#">Item 1A</a>
<ul class="menu vertical nested">
<li><a href="#">Item 1Ai</a></li>
<li><a href="#">Item 1Aii</a></li>
<li><a href="#">Item 1Aiii</a></li>
</ul>
</li>
<li><a href="#">Item 1B</a></li>
<li><a href="#">Item 1C</a></li>
</ul>
</li>
<li>
<a href="#">Item 2</a>
<ul class="menu vertical nested">
<li><a href="#">Item 2A</a></li>
<li><a href="#">Item 2B</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
</ul>`;
Foundation.AccordionMenu.defaults.slideSpeed = 0;
afterEach(function() {
plugin.destroy();
$html.remove();
});
describe('constructor()', function() {
it('stores the element and plugin options', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.AccordionMenu($html, {});
plugin.$element.should.be.an('object');
plugin.options.should.be.an('object');
});
});
describe('up()', function() {
it('closes the targeted submenu', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.AccordionMenu($html);
const $submenu = $html.find('.is-accordion-submenu').eq(0);
// Open it first
plugin.down($submenu);
plugin.up($submenu);
setTimeout(() => {
// Should be hidden
$submenu.should.be.hidden;
// Should have attributes updated and without active classe
$submenu.should.have.attr('aria-hidden', 'true');
$submenu.should.not.have.class('is-active');
done();
}, 1);
});
it('toggles attributes of title of the targeted container', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.AccordionMenu($html, {});
// Open it first
plugin.down($html.find('.is-accordion-submenu').eq(0));
plugin.up($html.find('.is-accordion-submenu').eq(0));
$html.find('.is-accordion-submenu-parent').eq(0).should.have.attr('aria-expanded', 'false');
});
it('fires up.zf.accordionMenu event', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.AccordionMenu($html, {slideSpeed: 200});
// Open it first
plugin.down($html.find('.is-accordion-submenu').eq(0));
$html.on('up.zf.accordionMenu', function() {
$html.find('.is-accordion-submenu').eq(0).should.be.hidden;
done();
});
plugin.up($html.find('.is-accordion-submenu').eq(0));
});
});
describe('down()', function() {
it('opens the targeted submenu', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.AccordionMenu($html, {});
const $submenu = $html.find('.is-accordion-submenu').eq(0);
plugin.down($submenu);
// Should be visible
$submenu.should.be.visible;
// Should have attributes updated and with an active classe
$submenu.should.have.attr('aria-hidden', 'false');
$submenu.should.have.class('is-active');
});
it('toggles attributes of title of the targeted submenu', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.AccordionMenu($html, {});
plugin.down($html.find('.is-accordion-submenu').eq(0));
$html.find('.is-accordion-submenu-parent').eq(0).should.have.attr('aria-expanded', 'true');
});
it('closes open submenu if multiOpen is false', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.AccordionMenu($html, {multiOpen: false});
// Open another one first
plugin.down($html.find('.is-accordion-submenu').eq(0));
plugin.down($html.find('.is-accordion-submenu').eq(2));
$html.find('.is-accordion-submenu').eq(0).should.be.hidden;
});
it('not closes open submenu if multiOpen is true', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.AccordionMenu($html, {multiOpen: true});
// Open another one first
plugin.down($html.find('.is-accordion-submenu').eq(0));
plugin.down($html.find('.is-accordion-submenu').eq(2));
$html.find('.is-accordion-submenu').eq(0).should.be.visible;
});
it('fires down.zf.accordionMenu event', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.AccordionMenu($html, {slideSpeed: 200});
$html.on('down.zf.accordionMenu', function() {
$html.find('.is-accordion-submenu').eq(0).should.be.visible;
done();
});
plugin.down($html.find('.is-accordion-submenu').eq(0));
});
});
describe('toggle()', function() {
it('opens a closed container', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.AccordionMenu($html, {});
plugin.toggle($html.find('.is-accordion-submenu').eq(0));
$html.find('.is-accordion-submenu').eq(0).should.be.visible;
});
it('closes an open container', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.AccordionMenu($html, {});
// Open first
plugin.down($html.find('.is-accordion-submenu').eq(0));
plugin.toggle($html.find('.is-accordion-submenu').eq(0));
$html.find('.is-accordion-submenu').eq(0).should.be.hidden;
});
});
describe('hideAll()', function() {
it('closes all accordions', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.AccordionMenu($html, {});
// Open some first
plugin.down($html.find('.is-accordion-submenu').eq(0));
plugin.down($html.find('.is-accordion-submenu').eq(1));
plugin.down($html.find('.is-accordion-submenu').eq(2));
plugin.hideAll();
$html.find('[data-submenu]').each(function() {
$(this).should.be.hidden;
});
});
});
});
themes/ceras/node_modules/foundation-sites/test/javascript/components/drilldown.js
Generated Vendored Executable
+391
View File
@@ -0,0 +1,391 @@
describe('Drilldown Menu', function() {
var plugin;
var $html;
var template = `<ul class="menu" data-drilldown style="width: 200px" id="m1">
<li>
<a href="#">Item 1</a>
<ul id="Menu-1" class="menu">
<li>
<a href="#">Item 1A</a>
<ul id="Menu-1A" class="menu">
<li><a href="#Item-1Aa">Item 1Aa</a></li>
</ul>
</li>
<li><a href="#Item-1B">Item 1B</a></li>
<li><a href="#Item-1C">Item 1C</a></li>
</ul>
</li>
<li>
<a href="#">Item 2</a>
<ul id="Menu-2" class="menu">
<li><a href="#Item-2A">Item 2A</a></li>
<li><a href="#Item-2B">Item 2B</a></li>
</ul>
</li>
<li><a href="#Item-3"> Item 3</a></li>
</ul>`;
var templateWithToggler = `
<div>
<button id="trigger" data-toggle="target" type="button">Toggler</button>
<div id="target" class="is-hidden" data-toggler="is-hidden">
${template}
</div>
</div>
`;
afterEach(function() {
plugin.destroy();
document.activeElement.blur();
$html.remove();
});
describe('constructor()', function() {
it('stores the element and plugin options', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Drilldown($html, {});
plugin.$element.should.be.an('object');
plugin.options.should.be.an('object');
});
});
describe('init()', function() {
it('stores additional elements', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Drilldown($html, {});
plugin.$submenuAnchors.should.be.an('object');
plugin.$submenus.should.be.an('object');
plugin.$menuItems.should.be.an('object');
});
});
describe('prepareMenu()', function() {
it('wraps the submenus', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Drilldown($html, {});
});
it('adds ARIA attributes', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Drilldown($html, {});
plugin.$element.should.have.attr('role', 'tree');
plugin.$element.find('[data-submenu]').each(function() {
$(this).should.have.attr('role', 'group');
$(this).should.have.attr('aria-hidden', 'true');
});
plugin.$element.find('.is-drilldown-submenu-parent').each(function() {
$(this).should.have.attr('aria-haspopup', 'true');
$(this).should.have.attr('aria-expanded', 'false');
$(this).should.have.attr('aria-label', $(this).children('a').first().text());
});
plugin.$element.find('li:not(.js-drilldown-back)').each(function() {
$(this).should.have.attr('role', 'treeitem');
});
});
});
describe('show()', function() {
it('shows the given submenu', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Drilldown($html, {});
plugin._show($html.find('li.is-drilldown-submenu-parent').eq(0));
// Checking with .be.hidden is not possible because they don't have display: block but z-index: -1
$html.find('li.is-drilldown-submenu-parent').eq(0).find('ul').should.have.class('is-active');
});
it('toggles ARIA attributes', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Drilldown($html, {});
plugin._show($html.find('li.is-drilldown-submenu-parent').eq(0));
$html.find('li.is-drilldown-submenu-parent').eq(0).should.have.attr('aria-expanded', 'true');
$html.find('li.is-drilldown-submenu-parent').eq(0).children('ul').should.have.attr('aria-hidden', 'false');
});
it('fires open.zf.drilldown event', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.Drilldown($html, {});
$html.on('open.zf.drilldown', function() {
// Checking with .be.hidden is not possible because they don't have display: block but z-index: -1
$html.find('li.is-drilldown-submenu-parent').eq(0).find('ul').should.have.class('is-active');
done();
});
plugin._show($html.find('li.is-drilldown-submenu-parent').eq(0));
});
});
describe('hide()', function() {
it('hides the given submenu', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Drilldown($html, {});
// Open it first
plugin._show($html.find('li.is-drilldown-submenu-parent').eq(0));
plugin._hide($html.find('li.is-drilldown-submenu-parent').eq(0).children('ul'));
// Checking with .be.hidden is not possible because they don't have display: block but z-index: -1
$html.find('li.is-drilldown-submenu-parent').eq(0).children('ul').should.have.class('is-closing');
});
it('toggles ARIA attributes', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Drilldown($html, {});
// Open it first
plugin._show($html.find('li.is-drilldown-submenu-parent').eq(0));
plugin._hide($html.find('li.is-drilldown-submenu-parent').eq(0).children('ul'));
$html.find('li.is-drilldown-submenu-parent').eq(0).should.have.attr('aria-expanded', 'false');
$html.find('li.is-drilldown-submenu-parent').eq(0).children('ul').should.have.attr('aria-hidden', 'true');
});
it('fires hide.zf.drilldown event', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.Drilldown($html, {});
// Open it first
plugin._show($html.find('li.is-drilldown-submenu-parent').eq(0));
$html.on('hide.zf.drilldown', function() {
// Checking with .be.hidden is not possible because they don't have display: block but z-index: -1
$html.find('li.is-drilldown-submenu-parent').eq(0).children('ul').should.have.class('is-closing');
done();
});
plugin._hide($html.find('li.is-drilldown-submenu-parent').eq(0).children('ul'));
});
});
describe('hideAll()', function() {
it('hides all submenus', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Drilldown($html, {});
// Open one first
plugin._show($html.find('li.is-drilldown-submenu-parent').eq(2));
plugin._hideAll();
$html.find('ul[data-submenu].is-active').each(function() {
// Checking with .be.hidden is not possible because they don't have display: block but z-index: -1
$(this).should.have.class('is-closing');
});
});
it('fires closed.zf.drilldown event', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.Drilldown($html, {});
// Open one first
plugin._show($html.find('li.is-drilldown-submenu-parent').eq(2));
$html.one('closed.zf.drilldown', function() {
$html.find('ul[data-submenu].is-active').each(function() {
// Checking with .be.hidden is not possible because they don't have display: block but z-index: -1
$(this).should.have.class('is-closing');
});
done();
});
plugin._hideAll();
});
});
describe('back()', function() {
it('hides current submenu', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Drilldown($html, {});
// Open one first
plugin._show($html.find('li.is-drilldown-submenu-parent').eq(1));
$html.find('li.is-drilldown-submenu-parent').eq(1).children('ul').children('.js-drilldown-back').trigger('click');
// Checking with .be.hidden is not possible because they don't have display: block but z-index: -1
$html.find('li.is-drilldown-submenu-parent').eq(1).children('ul').should.have.class('is-closing');
});
it('shows parent submenu', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Drilldown($html, {});
// Open one first
plugin._show($html.find('li.is-drilldown-submenu-parent').eq(1));
$html.find('li.is-drilldown-submenu-parent').eq(1).children('ul').children('.js-drilldown-back').trigger('click');
// Checking with .be.hidden is not possible because they don't have display: block but z-index: -1
$html.find('li.is-drilldown-submenu-parent').eq(0).children('ul').should.have.class('is-active');
});
});
describe('toggle events', function () {
var $trigger, $target, $wrapper, togglerPlugin;
beforeEach(function () {
$html = $(templateWithToggler).appendTo('body');
$trigger = $html.find('#trigger');
$target = $html.find('#target');
$target = $html.find('#target');
togglerPlugin = new Foundation.Toggler($target, {});
plugin = new Foundation.Drilldown($html.find('[data-drilldown]'), { autoHeight: true });
$wrapper = $html.find('.is-drilldown');
});
it('correctly resize when opened', function () {
// Open the Drilldown
$trigger.focus().trigger('click');
// 3 items (including the back button) is around 115px height
$wrapper.height().should.be.within(110, 120);
});
it('correctly resize when closed', function () {
// Open then close the Drilldown
$trigger.focus().trigger('click');
$trigger.focus().trigger('click');
$wrapper.height().should.be.equal(0);
});
it('correctly resize when reopened on a submenu', function () {
// Open the Drilldown
$trigger.focus().trigger('click');
// Show a submenu with a smaller height
plugin._showMenu($html.find('#Menu-1A'));
// Close then reopen the the Drilldown
$trigger.focus().trigger('click');
$trigger.focus().trigger('click');
// 2 items (including the back button) is around 75px height
$wrapper.height().should.be.within(70, 80);
});
afterEach(function () {
togglerPlugin.destroy();
});
});
describe('keyboard events', function() {
// Currently not testable, as triggered event won't move on focus
it.skip('does not trap focus on root element going down', function() {
$html = $(template).appendTo('body');
let $dummyElement = $('<a tabindex="0">Dummy</a>').appendTo('body'); // Dummy target to see if focus is not trapped
plugin = new Foundation.Drilldown($html, {});
// Focus last element
$dummyElement.focus();
$html.find('> li:last-child > a').trigger(window.mockKeyboardEvent('TAB'));
document.activeElement.should.not.be.equal($html.find('> li:last-child > a')[0]);
$dummyElement.remove();
});
// Currently not testable, as triggered event won't move on focus
it.skip('does not trap focus on root element going up', function() {
let $dummyElement = $('<a tabindex="0">Dummy</a>').appendTo('body'); // Dummy target to see if focus is not trapped
$html = $(template).appendTo('body');
plugin = new Foundation.Drilldown($html, {});
// Focus first element
$dummyElement.focus();
$html.find('> li:first-child > a').trigger(window.mockKeyboardEvent('TAB', {shift: true}));
document.activeElement.should.not.be.equal($html.find('> li:first-child > a')[0]);
$dummyElement.remove();
});
it('closes current sub menu using ESC', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Drilldown($html, {});
// Open it first
plugin._show($html.find('> li:nth-child(1)'))
$html.find('> li:nth-child(1) > ul > li:first-child > a').focus()
.trigger(window.mockKeyboardEvent('ESCAPE'));
$html.find('> li:nth-child(1) > ul').should.have.class('is-closing');
});
it('moves focus to next element on TAB', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Drilldown($html, {});
$html.find('> li:nth-child(1) > a').focus()
.trigger(window.mockKeyboardEvent('TAB'));
document.activeElement.should.be.equal($html.find('> li:nth-child(2) > a')[0]);
});
it('moves focus to previous element on TAB', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Drilldown($html, {});
$html.find('> li:nth-child(2) > a').focus()
.trigger(window.mockKeyboardEvent('TAB', {shift: true}));
document.activeElement.should.be.equal($html.find('> li:nth-child(1) > a')[0]);
});
it('moves focus to next element on ARROW_DOWN', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Drilldown($html, {});
$html.find('> li:nth-child(1) > a').focus()
.trigger(window.mockKeyboardEvent('ARROW_DOWN'));
document.activeElement.should.be.equal($html.find('> li:nth-child(2) > a')[0]);
});
it('moves focus to previous element on ARROW_UP', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Drilldown($html, {});
$html.find('> li:nth-child(2) > a').focus()
.trigger(window.mockKeyboardEvent('ARROW_UP'));
document.activeElement.should.be.equal($html.find('> li:nth-child(1) > a')[0]);
});
it('opens child element on ARROW_RIGHT', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Drilldown($html, {});
$html.find('> li:nth-child(1) > a').focus()
.trigger(window.mockKeyboardEvent('ARROW_RIGHT'));
$html.find('> li:nth-child(1) > ul').should.have.class('is-active');
});
it('focuses parent link if parentLink is true', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.Drilldown($html, {parentLink: true});
$html.find('> li:nth-child(1) > a').focus()
.trigger(window.mockKeyboardEvent('ARROW_RIGHT'));
setTimeout(function() { // Timeout to make sure transition has ended
$html.find('> li:nth-child(1) > ul > li[data-is-parent-link] a')[0].should.be.equal(document.activeElement);
done();
}, 500);
});
it('closes child element on ARROW_LEFT', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Drilldown($html, {});
// Open it first
plugin._show($html.find('> li:nth-child(1)'))
$html.find('> li:nth-child(1) > ul > li:first-child > a').focus()
.trigger(window.mockKeyboardEvent('ARROW_LEFT'));
$html.find('> li:nth-child(1) > ul').should.have.class('is-closing');
});
});
});
themes/ceras/node_modules/foundation-sites/test/javascript/components/dropdown.js
Generated Vendored Executable
+216
View File
@@ -0,0 +1,216 @@
describe('Dropdown', function() {
let plugin;
let $dropdownController;
let $dropdownContainer;
const getDropdownController = (buttonClasses = '') =>
`<button class="${buttonClasses}" type="button" data-toggle="my-dropdown">toggle</button>`;
const getDropdownContainer = (dropdownClasses = '') =>
`<div class="${dropdownClasses}" data-dropdown id="my-dropdown">Dropdown</div>`;
const getFocusableDropdownContainer = (dropdownClasses = '', inputId = '') =>
`<div class="${dropdownClasses}" data-dropdown id="my-dropdown">Dropdown${getFocusableInput(inputId)}</div>`;
const getFocusableInput = (inputId = '') =>
`<input type="text" placeholder="should auto focus" id="${inputId}" />`;
const getAutoFocusDropdownContainer = (dropdownClasses = '', inputId = '') =>
`<div class="${dropdownClasses}" data-dropdown data-auto-focus="true" id="my-dropdown">Dropdown${getFocusableInput(inputId)}</div>`;
afterEach(function() {
plugin.destroy();
document.activeElement.blur();
$dropdownController.remove();
$dropdownContainer.remove();
});
describe('constructor()', function() {
it('stores the element & plugin options', function() {
$dropdownController = $(getDropdownController()).appendTo('body');
$dropdownContainer = $(getDropdownContainer()).appendTo('body');
plugin = new Foundation.Dropdown($dropdownContainer, {});
plugin.$element.should.be.an('object');
plugin.options.should.be.an('object');
});
});
describe('open()', function () {
it('fires show.zf.dropdown event', function () {
$dropdownController = $(getDropdownController()).appendTo('body');
$dropdownContainer = $(getDropdownContainer()).appendTo('body');
plugin = new Foundation.Dropdown($dropdownContainer, {});
let spy = sinon.spy();
$dropdownContainer.on('show.zf.dropdown', spy);
plugin.open();
sinon.assert.called(spy);
});
it('make the dropdown visible', function (done) {
$dropdownController = $(getDropdownController()).appendTo('body');
$dropdownContainer = $(getDropdownContainer()).appendTo('body');
plugin = new Foundation.Dropdown($dropdownContainer, {});
$dropdownContainer.on('show.zf.dropdown', function () {
$('#my-dropdown').should.not.be.hidden;
$('#my-dropdown').should.have.attr('aria-hidden', 'false');
$('#my-dropdown').should.have.class('is-open');
done();
});
plugin.open();
});
it('traps focus accoding to trapFocus option', function () {
$dropdownController = $(getDropdownController()).appendTo('body');
$dropdownContainer = $(getDropdownContainer()).appendTo('body');
plugin = new Foundation.Dropdown($dropdownContainer, { trapFocus: true });
let spy = sinon.spy(Foundation.Keyboard, 'trapFocus');
plugin.open();
sinon.assert.called(spy);
Foundation.Keyboard.trapFocus.restore();
});
it('should autofocus according to autoFocus option', function(done) {
$dropdownController = $(getDropdownController()).appendTo('body');
$dropdownContainer = $(getAutoFocusDropdownContainer('', 'inputToFocus')).appendTo('body');
plugin = new Foundation.Dropdown($dropdownContainer, { autoFocus: true });
$dropdownContainer.on('show.zf.dropdown', function() {
document.activeElement.id.should.be.equal('inputToFocus');
done();
});
plugin.open();
});
});
describe('close()', function() {
it('releases focus if trapFocus option is true', function() {
$dropdownController = $(getDropdownController()).appendTo('body');
$dropdownContainer = $(getDropdownContainer()).appendTo('body');
plugin = new Foundation.Dropdown($dropdownContainer, {trapFocus: true});
// Open it first...
plugin.open();
let spy = sinon.spy(Foundation.Keyboard, 'releaseFocus');
plugin.close();
sinon.assert.called(spy);
Foundation.Keyboard.releaseFocus.restore();
});
});
describe('inferred positioning', function() {
it('default orientation should be bottom', function() {
$dropdownController = $(getDropdownController()).appendTo('body');
$dropdownContainer = $(getDropdownContainer()).appendTo('body');
plugin = new Foundation.Dropdown($dropdownContainer, {});
plugin.open()
plugin.position.should.equal('bottom');
});
it('gets right alignment from float-right', function() {
$dropdownController = $(getDropdownController('custom-style-before float-right custom-style-after'))
.appendTo('body');
$dropdownContainer = $(getDropdownContainer()).appendTo('body');
plugin = new Foundation.Dropdown($dropdownContainer, {});
plugin.open()
plugin.position.should.equal('bottom')
plugin.alignment.should.equal('right')
});
});
describe('closeOnClick option', function() {
it('not closes a dropdown by clicking on the dropdown if closeOnClick option is true', function(done) {
$dropdownController = $(getDropdownController()).appendTo('body');
$dropdownContainer = $(getDropdownContainer()).appendTo('body');
plugin = new Foundation.Dropdown($dropdownContainer, {closeOnClick: true});
// Open it first...
plugin.open();
let spy = sinon.spy(plugin, 'close');
plugin.$element.trigger('click');
setTimeout(() => {
sinon.assert.notCalled(spy);
done();
}, 0);
});
});
describe('mouse events', function() {
it('opens the dropdown on button click', function(done) {
$dropdownController = $(getDropdownController()).appendTo('body');
$dropdownContainer = $(getDropdownContainer()).appendTo('body');
plugin = new Foundation.Dropdown($dropdownContainer, {});
let spy = sinon.spy(plugin, 'open');
$dropdownController.trigger('click');
setTimeout(() => {
sinon.assert.called(spy);
done();
}, 0);
});
it('opens the dropdown on button hover', function(done) {
$dropdownController = $(getDropdownController()).appendTo('body');
$dropdownContainer = $(getDropdownContainer()).appendTo('body');
plugin = new Foundation.Dropdown($dropdownContainer, { hover: true, hoverDelay: 42 });
let spy = sinon.spy(plugin, 'open');
$dropdownController.trigger('mouseenter');
setTimeout(() => {
sinon.assert.called(spy);
done();
}, 42);
});
});
describe('keyboard events', function () {
it('opens Dropdown on SPACE', function() {
$dropdownController = $(getDropdownController()).appendTo('body');
$dropdownContainer = $(getDropdownContainer()).appendTo('body');
plugin = new Foundation.Dropdown($dropdownContainer, {});
$dropdownController.focus()
.trigger(window.mockKeyboardEvent('SPACE'));
$dropdownContainer.should.be.visible;
});
it('does not focus Dropdown on SPACE by default', function() {
$dropdownController = $(getDropdownController()).appendTo('body');
$dropdownContainer = $(getDropdownContainer()).appendTo('body');
plugin = new Foundation.Dropdown($dropdownContainer, {});
$dropdownController.focus()
.trigger(window.mockKeyboardEvent('SPACE'));
document.activeElement.should.be.equal($dropdownController[0]);
});
it('focuses Dropdown on SPACE when container has a focusable element', function() {
$dropdownController = $(getDropdownController()).appendTo('body');
$dropdownContainer = $(getFocusableDropdownContainer()).appendTo('body');
plugin = new Foundation.Dropdown($dropdownContainer, {});
$dropdownController.focus()
.trigger(window.mockKeyboardEvent('SPACE'));
document.activeElement.should.be.equal($dropdownController[0]);
});
it('does not focus Dropdown when anchor is an input', function() {
$dropdownController = $('<input type="text" data-toggle="my-dropdown">').appendTo('body');
$dropdownContainer = $(getDropdownContainer()).appendTo('body');
plugin = new Foundation.Dropdown($dropdownContainer, {});
$dropdownController.focus()
.trigger(window.mockKeyboardEvent('SPACE'));
document.activeElement.should.be.equal($dropdownController[0]);
});
})
});
themes/ceras/node_modules/foundation-sites/test/javascript/components/dropdownMenu.js
Generated Vendored Executable
+205
View File
@@ -0,0 +1,205 @@
describe('Dropdown Menu', function () {
var plugin;
var $html;
var template = `<ul class="dropdown menu" data-dropdown-menu>
<li>
<a href="#Item-1">Item 1</a>
<ul class="menu">
<li><a href="#Item-1A">Item 1A</a></li>
<li>
<a href="#Item-1B">Item 1B</a>
<ul class="menu">
<li><a href="#Item-1Bi">Item 1B i</a></li>
<li><a href="#Item-1Bii">Item 1B ii</a></li>
<li>
<a href="#Item-1Biii">Item 1B iii</a>
<ul class="menu">
<li><a href="#Item-1Biiialpha">Item 1B iii alpha</a></li>
<li><a href="#Item-1Biiiomega">Item 1B iii omega</a></li>
</ul>
</li>
<li>
<a href="#Item-1Biv">Item 1B iv</a>
<ul class="menu">
<li><a href="#Item-1Bivalpha">Item 1B iv alpha</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#Item-1C">Item 1C</a></li>
</ul>
</li>
<li>
<a href="#Item-2">Item 2</a>
<ul class="menu">
<li><a href="#Item-2A">Item 2A</a></li>
<li><a href="#Item-2B">Item 2B</a></li>
</ul>
</li>
<li><a href="#Item-3">Item 3</a></li>
<li><a href="#Item-4">Item 4</a></li>
</ul>`;
afterEach(function () {
plugin.destroy();
document.activeElement.blur();
$html.remove();
});
describe('constructor()', function () {
it('stores the element and plugin options', function () {
$html = $(template).appendTo('body');
plugin = new Foundation.DropdownMenu($html, {});
plugin.$element.should.be.an('object');
plugin.options.should.be.an('object');
});
});
/*
** Note: for all the following tests testing the currently focused elements,
** IE 9/10/11 may not focus the tested element because is is still rendering.
** To prevent this, we wait after the component initialization.
**
** Fixing this IE behavior in components would require to delay the focus
** for all browsers then trigger a "ready" event.
**
** TODO: Consider this for v6.6
**
** See https://stackoverflow.com/a/2600261/4317384
** See https://stackoverflow.com/a/36032615/4317384
*/
const IErenderWaitTime = 100;
describe('keyboard events', function () {
it('closes current sub menu using ESCAPE', function (done) {
$html = $(template).appendTo('body');
plugin = new Foundation.DropdownMenu($html, {});
setTimeout(() => {
// Open it first
plugin._show($html.find('> li:nth-child(1) > ul'));
$html.find('> li:nth-child(1) > ul > li:nth-child(1) > a').focus()
.trigger(window.mockKeyboardEvent('ESCAPE'));
$html.find('> li:nth-child(1)').should.not.have.class('is-active');
$html.find('> li:nth-child(1) > ul').should.not.have.class('js-dropdown-active');
document.activeElement.should.be.equal($html.find('> li:nth-child(1) > a')[0]);
done();
}, IErenderWaitTime);
});
describe('horizontal', function() {
beforeEach(function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.DropdownMenu($html, {});
setTimeout(() => done(), IErenderWaitTime);
});
it('moves focus to next tab on ARROW_RIGHT', function () {
$html.find('> li:nth-child(1) > a').focus()
.trigger(window.mockKeyboardEvent('ARROW_RIGHT'));
document.activeElement.should.be.equal($html.find('> li:nth-child(2) > a')[0]);
});
it('moves focus to previous tab on ARROW_LEFT', function () {
$html.find('> li:nth-child(2) > a').focus()
.trigger(window.mockKeyboardEvent('ARROW_LEFT'));
document.activeElement.should.be.equal($html.find('> li:nth-child(1) > a')[0]);
});
it('opens child element of tab on ARROW_DOWN', function() {
$html.find('> li:nth-child(1) > a').focus()
.trigger(window.mockKeyboardEvent('ARROW_DOWN'));
$html.find('> li:nth-child(1)').should.have.class('is-active');
$html.find('> li:nth-child(1) > ul').should.have.class('js-dropdown-active');
document.activeElement.should.be.equal($html.find('> li:nth-child(1) > ul > li:nth-child(1) > a')[0]);
});
it('moves focus to previous sub element on ARROW_UP', function () {
// Open it first
plugin._show($html.find('> li:nth-child(1) > ul'));
$html.find('> li:nth-child(1) > ul > li:nth-child(2) > a').focus()
.trigger(window.mockKeyboardEvent('ARROW_UP'));
document.activeElement.should.be.equal($html.find('> li:nth-child(1) > ul > li:nth-child(1) > a')[0]);
});
it('opens child element of sub menu on ARROW_RIGHT', function() {
// Open it first
plugin._show($html.find('> li:nth-child(1) > ul'));
$html.find('> li:nth-child(1) > ul > li:nth-child(2) > a').focus()
.trigger(window.mockKeyboardEvent('ARROW_RIGHT'));
$html.find('> li:nth-child(1) > ul > li:nth-child(2)').should.have.class('is-active');
$html.find('> li:nth-child(1) > ul > li:nth-child(2) > ul').should.have.class('js-dropdown-active');
document.activeElement.should.be.equal($html.find('> li:nth-child(1) > ul > li:nth-child(2) > ul > li:nth-child(1) > a')[0]);
});
});
describe('vertical', function () {
beforeEach(function(done) {
$html = $(template).addClass('vertical').appendTo('body');
plugin = new Foundation.DropdownMenu($html, {});
setTimeout(() => done(), IErenderWaitTime);
});
it('moves focus to next tab on ARROW_DOWN', function () {
$html.find('> li:nth-child(1) > a').focus()
.trigger(window.mockKeyboardEvent('ARROW_DOWN'));
document.activeElement.should.be.equal($html.find('> li:nth-child(2) > a')[0]);
});
it('moves focus to previous tab on ARROW_UP', function () {
$html.find('> li:nth-child(2) > a').focus()
.trigger(window.mockKeyboardEvent('ARROW_UP'));
document.activeElement.should.be.equal($html.find('> li:nth-child(1) > a')[0]);
});
it('opens child element of tab on ARROW_RIGHT', function() {
$html.find('> li:nth-child(1) > a').focus()
.trigger(window.mockKeyboardEvent('ARROW_RIGHT'));
$html.find('> li:nth-child(1)').should.have.class('is-active');
$html.find('> li:nth-child(1) > ul').should.have.class('js-dropdown-active');
document.activeElement.should.be.equal($html.find('> li:nth-child(1) > ul > li:nth-child(1) > a')[0]);
});
it('moves focus to previous sub element on ARROW_UP', function () {
// Open it first
plugin._show($html.find('> li:nth-child(1) > ul'));
$html.find('> li:nth-child(1) > ul > li:nth-child(2) > a').focus()
.trigger(window.mockKeyboardEvent('ARROW_UP'));
document.activeElement.should.be.equal($html.find('> li:nth-child(1) > ul > li:nth-child(1) > a')[0]);
});
it('opens child element of sub menu on ARROW_RIGHT', function() {
// Open it first
plugin._show($html.find('> li:nth-child(1) > ul'));
$html.find('> li:nth-child(1) > ul > li:nth-child(2) > a').focus()
.trigger(window.mockKeyboardEvent('ARROW_RIGHT'));
$html.find('> li:nth-child(1) > ul > li:nth-child(2)').should.have.class('is-active');
$html.find('> li:nth-child(1) > ul > li:nth-child(2) > ul').should.have.class('js-dropdown-active');
document.activeElement.should.be.equal($html.find('> li:nth-child(1) > ul > li:nth-child(2) > ul > li:nth-child(1) > a')[0]);
});
});
});
});
themes/ceras/node_modules/foundation-sites/test/javascript/components/equalizer.js
Generated Vendored Executable
+20
View File
@@ -0,0 +1,20 @@
describe('Equalizer', function() {
var plugin;
var $html;
// afterEach(function() {
// plugin.destroy();
// $html.remove();
// });
describe('constructor()', function() {
// it('', function() {
// $html = $('').appendTo('body');
// plugin = new Foundation.Equalizer($html, {});
// plugin.$element.should.be.an('object');
// plugin.options.should.be.an('object');
// });
});
});
themes/ceras/node_modules/foundation-sites/test/javascript/components/interchange.js
Generated Vendored Executable
+214
View File
@@ -0,0 +1,214 @@
describe('Interchange', function () {
var plugin;
var $html;
/**
* Generates paths to different assets
* @param {[type]} type [description]
* @param {[type]} size [description]
* @return {[type]} [description]
*/
var getPath = function(type, size) {
switch (type) {
case 'image':
case 'background':
return `_build/assets/img/interchange/strip_icc()/${size}.jpg`;
default:
return `_build/assets/partials/interchange-${size}.html`;
}
};
/**
* Generates templates to use based on type.
* @param {string} type Type to generate, image, background or template.
* @return {string} Generated template.
*/
var generateTemplate = function(type) {
var type = type || 'template',
tag = type === 'image' ? 'img' : 'div',
path;
switch (type) {
case 'image':
return `<img data-interchange="
[${getPath(type, 'small')}, small],
[${getPath(type, 'medium')}, medium],
[${getPath(type, 'large')}, large]
">`;
case 'background':
return `<div data-interchange="
[${getPath(type, 'small')}, small],
[${getPath(type, 'medium')}, medium],
[${getPath(type, 'large')}, large]
"></div>`;
default:
return `<div data-interchange="
[${getPath(type, 'default')}, small],
[${getPath(type, 'medium')}, medium],
[${getPath(type, 'large')}, large]
"></div>`;
}
};
afterEach(function() {
plugin.destroy();
$html.remove();
});
describe('constructor()', function() {
it('stores the element and plugin options', function() {
$html = $(generateTemplate('template')).appendTo('body');
plugin = new Foundation.Interchange($html, {});
plugin.$element.should.be.an('object');
plugin.options.should.be.an('object');
});
});
describe('replace()', function() {
it('replaces src attribute of img', function() {
$html = $(generateTemplate('image')).attr('data-interchange', '').appendTo('body');
plugin = new Foundation.Interchange($html, {});
plugin.replace(getPath('img', 'large'));
$html.should.have.attr('src', getPath('img', 'large'));
});
it('replaces background style of divs', function() {
$html = $(generateTemplate('background')).attr('data-interchange', '').appendTo('body');
plugin = new Foundation.Interchange($html, {});
plugin.replace(getPath('background', 'large'));
$html[0].style.backgroundImage.should.contain(getPath('background', 'large').replace(/\(/g, '%28').replace(/\)/g, '%29'));
});
it('replaces contents of div with templates', function() {
$html = $(generateTemplate('template')).attr('data-interchange', '').appendTo('body');
plugin = new Foundation.Interchange($html, {});
var spy = sinon.spy($, 'get');
plugin.replace(getPath('template', 'large'));
sinon.assert.calledWith(spy, getPath('template', 'large'));
spy.restore();
});
it('fires replaced.zf.interchange event', function() {
$html = $(generateTemplate('image')).appendTo('body');
plugin = new Foundation.Interchange($html, {});
let spy = sinon.spy();
$html.on('replaced.zf.interchange', spy);
plugin.replace(getPath('image', 'large'));
sinon.assert.called(spy);
});
});
describe('reflow()', function() {
it('calls replace for given media query', function() {
$html = $(generateTemplate('image')).attr('data-interchange', '[image.png, (min-width: 1px)]').appendTo('body');
plugin = new Foundation.Interchange($html, {});
let spy = sinon.spy();
plugin.replace = spy;
plugin._reflow();
sinon.assert.calledWith(spy, 'image.png');
});
});
describe('generateRules()', function() {
it('extracts rules from the plugin element', function() {
$html = $(generateTemplate('image')).appendTo('body');
plugin = new Foundation.Interchange($html, {});
plugin._generateRules($html);
plugin.rules.length.should.be.equal(3);
});
it('extracts special queries from the plugin element', function() {
$html = $(generateTemplate('image')).attr('data-interchange', '[image.png, retina]').appendTo('body');
plugin = new Foundation.Interchange($html, {});
plugin._generateRules($html);
plugin.rules[0].query.should.be.equal(Foundation.Interchange.SPECIAL_QUERIES['retina']);
});
});
describe('addBreakpoints()', function() {
it('adds Foundation breakpoints to special queries', function() {
$html = $(generateTemplate('image')).appendTo('body');
plugin = new Foundation.Interchange($html, {});
var specialQueriesCount = Object.keys(Foundation.Interchange.SPECIAL_QUERIES).length,
foundationMediaQueriesCount = Foundation.MediaQuery.queries.length;
Foundation.MediaQuery.queries.push({
name: 'test-query',
value: 'test-query-value'
})
plugin._addBreakpoints($html);
Object.keys(Foundation.Interchange.SPECIAL_QUERIES).length.should.be.equal(specialQueriesCount + 1);
// Reset Foundation.MediaQueries
Foundation.MediaQuery.queries.length = foundationMediaQueriesCount;
});
});
describe('events()', function () {
it('calls reflow on viewport size change once', function (done) {
$html = $(generateTemplate('image')).appendTo('body');
plugin = new Foundation.Interchange($html, {});
// Debounce: time Triggers is waiting for an other event without firing anything (10 by default)
const debounce = 10;
// Initialize Triggers manually to control and test the debounce time
Foundation.Triggers.Initializers.addMutationEventsListener($(document));
Foundation.Triggers.Initializers.addResizeListener(debounce);
$.triggersInitialized = true;
// Trigger several window resize synchrnously and asynchronously.
// ---
// Timeout delays are most often not respected and the differences between several
// timeouts running in parrallel can be huge. To prevent race conditions we:
// * nest timeout in order to make the delay between them more precise
// * run the test several time to wait for the debounce, which may be finally
// called way after the expected time.
setTimeout(function () {
let spy = sinon.spy(plugin, '_reflow');
$(window).trigger('resize');
$(window).trigger('resize');
setTimeout(function () {
$(window).trigger('resize');
$(window).trigger('resize');
tryInterval({
interval: debounce,
timeout: 1000,
try: () => {
sinon.assert.calledOnce(spy);
},
then: () => {
$.triggersInitialized = false;
done();
},
});
});
});
});
});
});
themes/ceras/node_modules/foundation-sites/test/javascript/components/magellan.js
Generated Vendored Executable
+93
View File
@@ -0,0 +1,93 @@
describe('Magellan', function() {
var plugin;
var $html, $content;
var generateUl = function(count) {
var html = '';
html += '<ul class="vertical-menu">';
for (var c = 0; c < count; c++) {
html += '<li><a href="#target-' + c + '">Section ' + c + '</a></li>';
}
html += '</ul>';
return html;
};
var generateContent = function(count) {
var html = '';
html += '<div>';
for (var c = 0; c < count; c++) {
html += '<div id="target-' + c + '" style="height: 1000px";>Section ' + c + '</div>';
}
html += '</div>';
return html;
};
afterEach(function() {
plugin.destroy();
$html.remove();
$content.remove();
});
// afterEach(function() {
// plugin.destroy();
// $html.remove();
// });
describe('constructor()', function() {
// it('', function() {
// $html = $('').appendTo('body');
// plugin = new Foundation.Magellan($html, {});
// plugin.$element.should.be.an('object');
// plugin.options.should.be.an('object');
// });
});
describe('scrollToLoc()', function() {
it('scrolls the selected element into viewport', function(done) {
var count = 5, duration = 200;
$html = $(generateUl(count)).appendTo('body');
$content = $(generateContent(count)).appendTo('body');
plugin = new Foundation.Magellan($html, {
animationDuration: duration
});
// Jump to last section
var target = $html.find('a').eq(-1).attr('href');
plugin.scrollToLoc(target);
setTimeout(function() {
var isInViewport = false;
if ($content.find('div').eq(-1).offset().top > $('body').scrollTop() && $content.offset().top < $('body').scrollTop() + $('body').innerHeight()) {
isInViewport = true;
}
isInViewport.should.equal(true);
done();
}, duration);
});
it('fails gracefully when target does not exist', function() {
var count = 5, duration = 200;
$html = $(generateUl(count)).appendTo('body');
$content = $(generateContent(count - 1)).appendTo('body');
plugin = new Foundation.Magellan($html, {
animationDuration: duration
});
var hasError = false;
var targets = $html.find('a');
try {
var target = $(targets).eq(-1).attr('href');
plugin.scrollToLoc(target);
}
catch (err) {
hasError = true;
}
hasError.should.equal(false);
});
});
});
themes/ceras/node_modules/foundation-sites/test/javascript/components/offcanvas.js
Generated Vendored Executable
+275
View File
@@ -0,0 +1,275 @@
describe('Off Canvas', function() {
var plugin;
var $html;
var template = `<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div class="off-canvas position-left" id="offCanvas" data-off-canvas data-content-scroll="false">
<!-- Close button -->
<button class="close-button" aria-label="Close menu" type="button" data-close>
<span aria-hidden="true">&times;</span>
</button>
<!-- Menu -->
<ul class="vertical menu">
<li><a href="#">Foundation</a></li>
<li><a href="#">Dot</a></li>
<li><a href="#">ZURB</a></li>
<li><a href="#">Com</a></li>
<li><a href="#">Slash</a></li>
<li><a href="#">Sites</a></li>
</ul>
</div>
<div class="off-canvas-content" data-off-canvas-content>
<!-- Page content -->
PAGE_CONTENT.
<!-- Triggers -->
<button type="button" class="button" data-toggle="offCanvas">Open Menu</button>
</div>
</div>
</div>`;
afterEach(function() {
plugin.destroy();
document.activeElement.blur();
$html.remove();
});
describe('constructor()', function() {
it('stores the element and plugin options', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.OffCanvas($html.find('[data-off-canvas]'), {});
plugin.$element.should.be.an('object');
plugin.options.should.be.an('object');
});
});
describe('init()', function() {
it('finds triggers for the Off Canvas', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.OffCanvas($html.find('[data-off-canvas]'), {});
plugin.$triggers.length.should.be.equal(1);
});
it('sets ARIA attributes', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.OffCanvas($html.find('[data-off-canvas]'), {});
plugin.$element.should.have.attr('aria-hidden', 'true');
plugin.$triggers.should.have.attr('aria-controls', plugin.$element.attr('id'));
plugin.$triggers.should.have.attr('aria-expanded', 'false');
});
it('closes Off Canvas on outside click if closeOnClick option is true', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.OffCanvas($html.find('[data-off-canvas]'), {closeOnClick: true});
plugin.$overlay.should.be.an('object');
$html.one('opened.zf.offcanvas', function() {
plugin.$overlay.trigger('click');
plugin.$element.should.not.have.class('is-open');
done();
});
plugin.open();
});
});
describe('open()', function() {
it('toggles ARIA attributes', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.OffCanvas($html.find('[data-off-canvas]'), {});
//$html.one(Foundation.transitionend($html), function() {
$html.one('opened.zf.offcanvas', function() {
plugin.$triggers.should.have.attr('aria-expanded', 'true');
plugin.$element.should.have.attr('aria-hidden', 'false');
done();
});
plugin.open();
});
it('adds active classes', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.OffCanvas($html.find('[data-off-canvas]'), {});
$html.one('opened.zf.offcanvas', function() {
setTimeout(function() {
plugin.$element.should.have.class('is-open');
$('body').should.have.class('is-off-canvas-open');
done();
}, 1);
});
plugin.open();
});
it('focusses Off Canvas if autoFocus option is true', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.OffCanvas($html.find('[data-off-canvas]'), {autoFocus: true});
plugin.$element.one(Foundation.transitionend(plugin.$element),function() {
setTimeout(function() {
plugin.$element.find('a, button')[0].should.be.equal(document.activeElement);
done();
}, 1);
});
plugin.open();
// fake transitionend for console tests
plugin.$element.triggerHandler(Foundation.transitionend(plugin.$element));
});
it('traps focus if trapFocus option is true', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.OffCanvas($html.find('[data-off-canvas]'), {trapFocus: true});
let spy = sinon.spy(Foundation.Keyboard, 'trapFocus');
$html.one(Foundation.transitionend($html), function() {
sinon.assert.called(spy);
Foundation.Keyboard.trapFocus.restore();
done();
});
plugin.open();
});
it('fires opened.zf.offcanvas event', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.OffCanvas($html.find('[data-off-canvas]'), {});
$html.one('opened.zf.offcanvas', function() {
done();
});
plugin.open();
});
});
describe('close()', function() {
it('toggles ARIA attributes', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.OffCanvas($html.find('[data-off-canvas]'), {});
$html.one('opened.zf.offcanvas', function() {
plugin.close();
plugin.$triggers.should.have.attr('aria-expanded', 'false');
plugin.$element.should.have.attr('aria-hidden', 'true');
done();
});
// Open it first
plugin.open();
});
it('removes active classes', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.OffCanvas($html.find('[data-off-canvas]'), {});
$html.one('opened.zf.offcanvas', function() {
setTimeout(function() {
plugin.close();
plugin.$element.should.not.have.class('is-open');
$('body').should.not.have.class('is-off-canvas-open');
done();
}, 1);
});
// Open it first
plugin.open();
});
it('fires closed.zf.offcanvas event', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.OffCanvas($html.find('[data-off-canvas]'), {});
$html.one('opened.zf.offcanvas', function() {
$html.one('closed.zf.offcanvas', function() {
done();
});
plugin.close();
});
// Open it first
plugin.open();
});
it('releases focus if trapFocus option is true', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.OffCanvas($html.find('[data-off-canvas]'), {trapFocus: true});
$html.one(Foundation.transitionend($html), function() {
let spy = sinon.spy(Foundation.Keyboard, 'releaseFocus');
plugin.close();
sinon.assert.called(spy);
Foundation.Keyboard.releaseFocus.restore();
});
// Open it first...
plugin.open();
});
});
describe('toggle()', function() {
it('opens a closed Off Canvas', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.OffCanvas($html.find('[data-off-canvas]'), {});
$html.one('opened.zf.offcanvas', function() {
plugin.$element.should.have.class('is-open');
done();
});
plugin.toggle();
});
it('closes an open Off Canvas', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.OffCanvas($html.find('[data-off-canvas]'), {});
$html.one('opened.zf.offcanvas', function() {
plugin.toggle();
plugin.$element.should.not.have.class('is-open');
done();
});
// Open it first
plugin.toggle();
});
});
describe('keyboard events', function() {
it('closes Off Canvas on ESCAPE', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.OffCanvas($html.find('[data-off-canvas]'), {});
$html.one('opened.zf.offcanvas', function() {
plugin.$element.focus()
.trigger(window.mockKeyboardEvent('ESCAPE'));
plugin.$element.should.not.have.class('is-open');
done();
});
// Open it first
plugin.open();
});
});
});
themes/ceras/node_modules/foundation-sites/test/javascript/components/orbit.js
Generated Vendored Executable
+220
View File
@@ -0,0 +1,220 @@
describe('Orbit', function() {
var plugin;
var $html;
var template = `<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
<ul class="orbit-container">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
<li class="is-active orbit-slide">
Slide #1 content.
</li>
<li class="orbit-slide">
Slide #2 content.
</li>
<li class="orbit-slide">
Slide #3 content.
</li>
<li class="orbit-slide">
Slide #4 content.
</li>
</ul>
<nav class="orbit-bullets">
<button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
<button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
<button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
<button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
</nav>
</div>`;
Foundation.Orbit.defaults.useMUI = false;
afterEach(function() {
plugin.destroy();
$html.remove();
});
describe('constructor()', function() {
it('stores the element and plugin options', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Orbit($html, {});
plugin.$element.should.be.an('object');
plugin.$wrapper.should.be.an('object');
plugin.$slides.should.be.an('object');
plugin.options.should.be.an('object');
});
});
describe('init()', function() {
it('shows the first slide', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Orbit($html, {});
$html.find('.orbit-slide').eq(0).should.be.visible;
});
it('hides all slides except the first one', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Orbit($html, {});
$html.find('.orbit-slide').each(function(index) {
if (index === 0) {return;} // Not for the first one as this is visible
$(this).should.be.hidden;
});
});
it('makes slide with is-active class active initially', function() {
$html = $(template).appendTo('body');
$html.find('.orbit-slide.is-active').removeClass('is-active');
$html.find('.orbit-slide').eq(2).addClass('is-active');
plugin = new Foundation.Orbit($html, {});
$html.find('.orbit-slide').eq(2).should.be.visible;
});
});
describe('loadBullets()', function() {
it('stores the bullets', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Orbit($html, {});
plugin.$bullets.should.be.an('object');
});
});
describe('changeSlide()', function() {
it('changes slides to the next one for ltr is true', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Orbit($html, {});
plugin.changeSlide(true);
$html.find('.orbit-slide').eq(0).should.be.hidden;
$html.find('.orbit-slide').eq(1).should.be.visible;
});
it('changes slides to the last one for ltr is false', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Orbit($html, {});
plugin.changeSlide(false);
$html.find('.orbit-slide').eq(0).should.not.have.class('is-active');
$html.find('.orbit-slide').eq(-1).should.have.class('is-active');
});
it('changes slides to the chosen one', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Orbit($html, {});
plugin.changeSlide(true, $html.find('.orbit-slide').eq(2), 2);
$html.find('.orbit-slide').eq(0).should.be.hidden;
$html.find('.orbit-slide').eq(2).should.be.visible;
});
it('toggles ARIA attributes', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Orbit($html, {});
plugin.changeSlide(true);
$html.find('.orbit-slide').eq(0).should.not.have.attr('aria-live');
$html.find('.orbit-slide').eq(1).should.have.attr('aria-live', 'polite');
});
it('fires beforeslidechange.zf.orbit event', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.Orbit($html, {});
$html.on('beforeslidechange.zf.orbit', function() {
// Old slide should still be active
$html.find('.orbit-slide').eq(0).should.be.visible;
done();
});
plugin.changeSlide(true);
});
it('fires slidechange.zf.orbit event', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.Orbit($html, {});
$html.on('slidechange.zf.orbit', function() {
// New slide is already active
$html.find('.orbit-slide').eq(1).should.be.visible;
done();
});
plugin.changeSlide(true);
});
});
describe('updateBullets()', function() {
it('updates the bullets', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Orbit($html, {});
plugin.changeSlide(true);
$html.find('.orbit-bullets [data-slide]').eq(0).should.not.have.class('is-active');
$html.find('.orbit-bullets [data-slide]').eq(1).should.have.class('is-active');
});
});
describe('events()', function() {
it('changes slides on bullet click', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Orbit($html, {});
$html.find('.orbit-bullets [data-slide]').eq(2).trigger('click');
$html.find('.orbit-slide').eq(0).should.be.hidden;
$html.find('.orbit-slide').eq(2).should.be.visible;
});
it('changes slides to the previous one', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Orbit($html, {});
$html.find('.orbit-previous').trigger('click');
$html.find('.orbit-slide').eq(0).should.be.hidden;
$html.find('.orbit-slide').eq(-1).should.be.visible;
});
it('changes slides to the next one', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Orbit($html, {});
$html.find('.orbit-next').trigger('click');
$html.find('.orbit-slide').eq(0).should.be.hidden;
$html.find('.orbit-slide').eq(1).should.be.visible;
});
});
describe('geoSync()', function() {
it('changes slides automatically based on timerDelay option', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.Orbit($html, {timerDelay: 200});
setTimeout(function() {
$html.find('.orbit-slide').eq(0).should.be.hidden;
$html.find('.orbit-slide').eq(1).should.be.visible;
done();
}, 201);
});
});
describe('keyboard events', function() {
it('moves switches to next slide using ARROW_RIGHT', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Orbit($html, {});
let spy = sinon.spy(plugin, 'changeSlide');
plugin.$wrapper.focus()
.trigger(window.mockKeyboardEvent('ARROW_RIGHT'));
sinon.assert.calledWith(spy, true);
});
it('moves switches to previous slide using ARROW_LEFT', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Orbit($html, {});
let spy = sinon.spy(plugin, 'changeSlide');
plugin.$wrapper.focus()
.trigger(window.mockKeyboardEvent('ARROW_LEFT'));
sinon.assert.calledWith(spy, false);
});
});
});
themes/ceras/node_modules/foundation-sites/test/javascript/components/responsiveMenu.js
Generated Vendored Executable
+20
View File
@@ -0,0 +1,20 @@
describe('Responsive Menu', function() {
var plugin;
var $html;
// afterEach(function() {
// plugin.destroy();
// $html.remove();
// });
describe('constructor()', function() {
// it('', function() {
// $html = $('').appendTo('body');
// plugin = new Foundation.ResponsiveMenu($html, {});
// plugin.$element.should.be.an('object');
// plugin.options.should.be.an('object');
// });
});
});
themes/ceras/node_modules/foundation-sites/test/javascript/components/responsiveToggle.js
Generated Vendored Executable
+20
View File
@@ -0,0 +1,20 @@
describe('Responsive Toggle', function() {
var plugin;
var $html;
// afterEach(function() {
// plugin.destroy();
// $html.remove();
// });
describe('constructor()', function() {
// it('', function() {
// $html = $('').appendTo('body');
// plugin = new Foundation.ResponsiveToggle($html, {});
// plugin.$element.should.be.an('object');
// plugin.options.should.be.an('object');
// });
});
});
themes/ceras/node_modules/foundation-sites/test/javascript/components/reveal.js
Generated Vendored Executable
+414
View File
@@ -0,0 +1,414 @@
describe('Reveal', function() {
var plugin;
var $html;
var template = `<div class="reveal" id="exampleModal1" data-reveal>
Modal content
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">&times;</span>
</button>
</div>`;
afterEach(function() {
plugin.destroy();
document.activeElement.blur();
$html.remove();
});
describe('constructor()', function() {
it('stores the element and plugin options', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Reveal($html, {});
plugin.$element.should.be.an('object');
plugin.options.should.be.an('object');
});
});
describe('init()', function() {
it('sets ARIA attributes for modal', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Reveal($html, {});
$html.should.have.attr('aria-hidden', 'true');
$html.should.have.attr('role', 'dialog');
});
it('detects anchor if one exists', function() {
$html = $(template).appendTo('body');
var $anchor = $('<button data-open="exampleModal1">Open</button>').appendTo('body');
plugin = new Foundation.Reveal($html, {});
plugin.$anchor[0].should.be.equal($anchor[0]);
$anchor.remove();
});
it('sets ARIA attributes for anchor if one exists', function() {
$html = $(template).appendTo('body');
var $anchor = $('<button data-open="exampleModal1">Open</button>').appendTo('body');
plugin = new Foundation.Reveal($html, {});
$anchor.should.have.attr('aria-haspopup', 'true');
$anchor.should.have.attr('aria-controls', $html.attr('id'));
$anchor.remove();
});
});
describe('makeOverlay()', function() {
it('creates an overlay if overlay option is true', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Reveal($html, {overlay: true});
plugin.$overlay.should.be.an('object');
plugin.$overlay.should.have.class('reveal-overlay');
$.contains(document.body, plugin.$overlay[0]).should.be.true;
});
});
describe('open()', function() {
it('opens the modal', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.Reveal($html, {});
$html.on('open.zf.reveal', function() {
$html.should.be.visible;
done();
});
plugin.open();
});
it('opens the overlay', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.Reveal($html, {overlay: true});
$html.on('open.zf.reveal', function() {
plugin.$overlay.should.be.visible;
done();
});
plugin.open();
});
it('toggles ARIA attributes', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.Reveal($html, {});
$html.on('open.zf.reveal', function() {
$html.should.have.attr('aria-hidden', 'false');
$html.should.have.attr('tabindex', '-1');
done();
});
plugin.open();
});
it('adds class to body', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.Reveal($html, {});
$html.on('open.zf.reveal', function() {
$('html').should.have.class('is-reveal-open');
done();
});
plugin.open();
});
it('adds optional overlay classes overlay element', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.Reveal($html, {additionalOverlayClasses: 'default'});
$html.on('open.zf.reveal', function() {
$('.reveal-overlay').should.have.class('default');
done();
});
plugin.open();
});
// TODO: Check if this.$element.trigger('closeme.zf.reveal', this.id) is correctly used.
// it('closes previously opened modal if multipleOpened option is false', function(done) {
// $html = $(template).appendTo('body');
// $html2 = $(template).attr('id', 'exampleModal2').appendTo('body');
// plugin = new Foundation.Reveal($html, {multipleOpened: false});
// plugin2 = new Foundation.Reveal($html2, {multipleOpened: false});
// plugin.open();
// plugin2.open();
// $html.should.be.hidden;
// plugin2.destroy();
// $html2.remove();
// });
it('fires open.zf.reveal event', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.Reveal($html, {});
$html.on('open.zf.reveal', function() {
$html.should.be.visible;
done();
});
plugin.open();
});
it('traps focus if trapFocus option is true', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.Reveal($html, {trapFocus: true});
let spy = sinon.spy(Foundation.Keyboard, 'trapFocus');
$html.on('open.zf.reveal', function() {
sinon.assert.called(spy);
Foundation.Keyboard.trapFocus.restore();
done();
});
plugin.open();
});
});
describe('close()', function() {
it('closes the modal', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.Reveal($html, {});
// Open it first
plugin.open();
$html.on('closed.zf.reveal', function() {
$html.should.be.hidden;
done();
});
plugin.close();
});
it('closes the overlay', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.Reveal($html, {overlay: true});
// Open it first
plugin.open();
$html.on('closed.zf.reveal', function() {
plugin.$overlay.should.be.hidden;
done();
});
plugin.close();
});
it('toggles ARIA attributes', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.Reveal($html, {});
// Open it first
plugin.open();
$html.on('closed.zf.reveal', function() {
$html.should.have.attr('aria-hidden', 'true');
done();
});
plugin.close();
});
it('removes class from body', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.Reveal($html, {});
// Open it first
plugin.open();
$html.on('closed.zf.reveal', function() {
$('html').should.not.have.class('is-reveal-open');
done();
});
plugin.close();
});
it('does not remove class from body if another reveal is open', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.Reveal($html, {multipleOpened: true});
let $html2 = $(template).attr('id', 'exampleModal2').appendTo('body');
let plugin2 = new Foundation.Reveal($html2, {multipleOpened: true, vOffset: 10});
// Open both first
plugin.open();
plugin2.open();
$html.on('closed.zf.reveal', function() {
$('html').should.have.class('is-reveal-open');
plugin2.destroy();
$html2.remove();
done();
});
plugin.close();
});
it('fires closed.zf.reveal event', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.Reveal($html, {});
// Open it first
plugin.open();
$html.on('closed.zf.reveal', function() {
$html.should.be.hidden;
done();
});
plugin.close();
});
it('releases focus if trapFocus option is true', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.Reveal($html, {trapFocus: true});
// Open it first
plugin.open();
let spy = sinon.spy(Foundation.Keyboard, 'releaseFocus');
$html.on('closed.zf.reveal', function() {
sinon.assert.called(spy);
Foundation.Keyboard.releaseFocus.restore();
done();
});
plugin.close();
});
it('sets focus to anchor', function(done) {
$html = $(template).appendTo('body');
var $anchor = $('<button data-open="exampleModal1">Open</button>').appendTo('body');
plugin = new Foundation.Reveal($html, {});
// Open it first
plugin.open();
$html.on('closed.zf.reveal', function() {
setTimeout(function() {
$anchor[0].should.be.equal(document.activeElement);
$anchor.remove();
done();
}, 0);
});
plugin.close();
});
it('sets focus to anchor that opened it', function(done) {
$html = $(template).appendTo('body');
var $anchor = $('<button data-open="exampleModal1">Open</button>').appendTo('body');
var $anchor2 = $('<button data-open="exampleModal1">Open2</button>').appendTo('body');
plugin = new Foundation.Reveal($html, {});
$anchor.focus();
// Open it first
plugin.open();
$html.on('closed.zf.reveal', function() {
setTimeout(function() {
$anchor[0].should.be.equal(document.activeElement);
$anchor.remove();
$anchor2.remove();
done();
}, 0);
});
plugin.close();
});
});
describe('toggle()', function() {
it('opens a closed modal', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.Reveal($html, {overlay: true});
$html.on('open.zf.reveal', function() {
plugin.$overlay.should.be.visible;
done();
});
plugin.open();
});
it('closes an open modal', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.Reveal($html, {});
// Open it first
plugin.open();
$html.on('closed.zf.reveal', function() {
$html.should.be.hidden;
done();
});
plugin.close();
});
});
describe('events()', function() {
it('opens the modal on anchor click', function(done) {
$html = $(template).appendTo('body');
var $anchor = $('<button data-open="exampleModal1">Open</button>').appendTo('body');
plugin = new Foundation.Reveal($html, {});
$html.on('open.zf.reveal', function() {
plugin.$overlay.should.be.visible;
$anchor.remove();
done();
});
$anchor.trigger('click');
});
it('closes a modal on overlay click if closeOnClick option is true', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.Reveal($html, {overlay: true, closeOnClick: true});
// Open it first
plugin.open();
$html.on('closed.zf.reveal', function() {
$html.should.be.hidden;
done();
});
plugin.$overlay.trigger('click');
});
it('not closes a modal on overlay click if closeOnClick option is true', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.Reveal($html, {overlay: true, closeOnClick: false});
// Open it first
plugin.open();
plugin.$overlay.trigger('click');
// Add timeout to make sure it does not close
// Timeout is required because closed event will not be fired
setTimeout(function() {
$html.should.be.visible;
done();
}, 10);
});
it('closes Reveal with click on close button', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.Reveal($html, {});
// Open it first
plugin.open();
$html.on('closed.zf.reveal', function() {
$html.should.be.hidden;
done();
});
$html.find('[data-close]').focus()
.trigger('click');
});
});
});
themes/ceras/node_modules/foundation-sites/test/javascript/components/slider.js
Generated Vendored Executable
+263
View File
@@ -0,0 +1,263 @@
describe('Slider', function() {
var plugin;
var $html;
var template = `<div class="slider" data-slider>
<span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
<span class="slider-fill" data-slider-fill></span>
<input type="hidden">
</div>`;
Foundation.Slider.defaults.moveTime = 0;
Foundation.Slider.defaults.changedDelay = 0;
afterEach(function(done) {
// Timeout needed because even with changeDelay = 0 the changed.zf.slider event may be fired after this hook
plugin.destroy();
$html.remove();
done();
});
describe('constructor()', function() {
it('stores the element and plugin options', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Slider($html, {});
plugin.$element.should.be.an('object');
plugin.options.should.be.an('object');
});
});
describe('init()', function() {
it('stores handle, inout and fill elements', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Slider($html, {});
plugin.$handle.should.be.an('object');
plugin.$input.should.be.an('object');
plugin.$fill.should.be.an('object');
});
it('stores two handle and input elements for two sided slider', function() {
$html = $(template).append('<span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span><input type="hidden">')
.appendTo('body');
plugin = new Foundation.Slider($html, {doubleSided: true});
plugin.$handle2.should.be.an('object');
plugin.$input2.should.be.an('object');
});
it('is disabled when disable option is true', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Slider($html, {disabled: true});
$html.should.have.class('disabled');
});
});
describe('setHandlePos()', function() {
it('positions the handle', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Slider($html, {});
plugin._setHandlePos(plugin.$handle, 10, true);
plugin.$handle[0].style.left.should.not.be.equal('');
});
it('does nothing if disabled option is true', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Slider($html, {disabled: true});
plugin._setHandlePos(plugin.$handle, 10, true);
plugin.$handle[0].style.left.should.be.equal('');
});
it('fires changed.zf.slider event', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.Slider($html, {changedDelay: 50});
$html.on('changed.zf.slider', function(e, $handle) {
$handle[0].should.be.equal(plugin.$handle[0]);
done();
});
// Rapidly change to see if event fires only once
for (let i = 0; i < 5; i++) {
setTimeout(function() {
plugin._setHandlePos(plugin.$handle, i * 10, true);
}, i * 20);
}
});
it('fires moved.zf.slider event', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.Slider($html, {});
let timesCallbackCalled = 0;
$html.on('moved.zf.slider', function(e, $handle) {
if (++timesCallbackCalled === 5) {
$handle[0].should.be.equal(plugin.$handle[0]);
done();
}
});
// Rapidly change to see if event fires multiple times
for (let i = 0; i < 5; i++) {
setTimeout(function() {
plugin._setHandlePos(plugin.$handle, i * 10, true);
}, i * 20);
}
});
});
describe('setValues()', function() {
it('updates ARIA attributes', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Slider($html, {});
plugin._setValues(plugin.$handle, 10);
plugin.$handle.should.have.attr('aria-valuenow', '10');
});
it('updates input value', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Slider($html, {});
plugin._setValues(plugin.$handle, 10);
plugin.$input.val().should.have.be.equal('10');
});
});
describe('setInitAttr()', function() {
it('adds ARIA attributes to handle', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Slider($html, {
initialStart: 50,
end: 70,
start: 20,
vertical: true
});
plugin.$handle.should.have.attr('role', 'slider');
plugin.$handle.should.have.attr('aria-controls', plugin.$handle.attr('id'));
plugin.$handle.should.have.attr('aria-valuemax', '70');
plugin.$handle.should.have.attr('aria-valuemin', '20');
plugin.$handle.should.have.attr('aria-valuenow', '50');
plugin.$handle.should.have.attr('aria-orientation', 'vertical');
plugin.$handle.should.have.attr('tabindex', '0');
});
it('adds attributes to input', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Slider($html, {});
plugin.$input.should.have.attr('max', '100');
plugin.$input.should.have.attr('min', '0');
plugin.$input.should.have.attr('step', '1');
});
});
describe('adjustValue()', function() {
it('handles positive values', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Slider($html, {});
plugin._adjustValue(null, 1).should.equal(1);
plugin._adjustValue(null, 2).should.equal(2);
plugin._adjustValue(null, 1.2).should.equal(1);
plugin._adjustValue(null, 1.9).should.equal(2);
plugin._adjustValue(null, 1.5).should.equal(2);
});
it('handles negative values', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Slider($html, {});
plugin._adjustValue(null, -1).should.equal(-1);
plugin._adjustValue(null, -2).should.equal(-2);
plugin._adjustValue(null, -1.2).should.equal(-1);
plugin._adjustValue(null, -1.9).should.equal(-2);
plugin._adjustValue(null, -1.5).should.equal(-1);
});
});
describe('keyboard events', function() {
it('sets value to minimum using HOME', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Slider($html, {});
plugin.$handle.focus()
.trigger(window.mockKeyboardEvent('HOME'));
plugin.$handle.should.have.attr('aria-valuenow', plugin.$handle.attr('aria-valuemin'));
});
it('increases value by step size on ARROW_RIGHT', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Slider($html, {
initialStart: 10,
step: 1
});
plugin.$handle.focus()
.trigger(window.mockKeyboardEvent('ARROW_RIGHT'));
plugin.$handle.should.have.attr('aria-valuenow', (10 + 1).toString());
});
it('increases value by step size on ARROW_UP', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Slider($html, {
initialStart: 10,
step: 1
});
plugin.$handle.focus()
.trigger(window.mockKeyboardEvent('ARROW_UP'));
plugin.$handle.should.have.attr('aria-valuenow', (10 + 1).toString());
});
it('decreases value by step size on ARROW_LEFT', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Slider($html, {
initialStart: 10,
step: 1
});
plugin.$handle.focus()
.trigger(window.mockKeyboardEvent('ARROW_LEFT'));
plugin.$handle.should.have.attr('aria-valuenow', (10 - 1).toString());
});
it('decreases value by step size on ARROW_DOWN', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Slider($html, {
initialStart: 10,
step: 1
});
plugin.$handle.focus()
.trigger(window.mockKeyboardEvent('ARROW_DOWN'));
plugin.$handle.should.have.attr('aria-valuenow', (10 - 1).toString());
});
it('decreases value by step size times 10 on SHIFT_ARROW_RIGHT', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Slider($html, {
initialStart: 10,
step: 1
});
plugin.$handle.focus()
.trigger(window.mockKeyboardEvent('ARROW_RIGHT', {shift: true}));
plugin.$handle.should.have.attr('aria-valuenow', (10 + 1 * 10).toString());
});
it('decreases value by step size times 10 on SHIFT_ARROW_LEFT', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Slider($html, {
initialStart: 10,
step: 1
});
plugin.$handle.focus()
.trigger(window.mockKeyboardEvent('ARROW_LEFT', {shift: true}));
plugin.$handle.should.have.attr('aria-valuenow', (10 - 1 * 10).toString());
});
});
});
themes/ceras/node_modules/foundation-sites/test/javascript/components/sticky.js
Generated Vendored Executable
+20
View File
@@ -0,0 +1,20 @@
describe('Sticky', function() {
var plugin;
var $html;
// afterEach(function() {
// plugin.destroy();
// $html.remove();
// });
describe('constructor()', function() {
// it('', function() {
// $html = $('').appendTo('body');
// plugin = new Foundation.Sticky($html, {});
// plugin.$element.should.be.an('object');
// plugin.options.should.be.an('object');
// });
});
});
themes/ceras/node_modules/foundation-sites/test/javascript/components/tabs.js
Generated Vendored Executable
+183
View File
@@ -0,0 +1,183 @@
describe('Tabs', function() {
var plugin;
var $html;
var template = `
<div>
<ul class="tabs" data-tabs id="example-tabs">
<li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
<li class="tabs-title"><a href="#panel2">Tab 2</a></li>
<li class="tabs-title"><a data-tabs-target="panel3" href="#/panel3">Tab 3</a></li>
</ul>
<div class="tabs-content" data-tabs-content="example-tabs">
<div class="tabs-panel is-active" id="panel1">
<p>one</p>
<p>Check me out! I'm a super cool Tab panel with text content!</p>
</div>
<div class="tabs-panel" id="panel2">
<p>two</p>
<p>Check me out! I'm a super cool Tab panel with text content!</p>
</div>
<div class="tabs-panel" id="panel3">
<p>three</p>
<p>Check me out! I'm a super cool Tab panel with text content!</p>
</div>
</div>
</div>`;
afterEach(function() {
plugin.destroy();
$html.remove();
});
describe('constructor()', function() {
it('stores the element and plugin options', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Tabs($html.find('[data-tabs]'), {});
plugin.$element.should.be.an('object');
plugin.options.should.be.an('object');
});
});
describe('init()', function() {
it('sets ARIA attributes', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Tabs($html.find('[data-tabs]'), {});
// Panels
$html.find('#panel1').should.have.attr('role', 'tabpanel');
$html.find('#panel1').should.have.attr('aria-labelledby', $html.find('[href="#panel1"]').attr('id'));
$html.find('#panel1').should.not.have.attr('aria-hidden');
$html.find('#panel2').should.have.attr('aria-hidden', 'true');
// Links
$html.find('[href="#panel1"]').should.have.attr('role', 'tab');
$html.find('[href="#panel1"]').should.have.attr('aria-controls', $html.find('panel1').attr('id'));
$html.find('[href="#panel1"]').should.have.attr('aria-selected', 'true');
$html.find('[href="#panel2"]').should.have.attr('aria-selected', 'false');
// Tab list items
$html.find('[href="#panel1"]').parent().should.have.attr('role', 'presentation');
});
});
describe('selectTab()', function() {
it('opens the selected tab via jQuery element', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Tabs($html.find('[data-tabs]'), {});
plugin.selectTab($html.find('#panel2'));
$html.find('#panel2').should.be.visible;
});
it('opens the selected tab via id string', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Tabs($html.find('[data-tabs]'), {});
plugin.selectTab('#panel2');
$html.find('#panel2').should.be.visible;
});
it('opens the selected tab with data-tabs-target attribute', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Tabs($html.find('[data-tabs]'), {});
plugin.selectTab('#/panel3');
$html.find('#panel3').should.be.visible;
});
});
describe('_handleTabChange()', function() {
it('opens the selected tab', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Tabs($html.find('[data-tabs]'), {});
plugin.selectTab('#panel2');
$html.find('#panel2').should.be.visible;
$html.find('#panel2').should.have.class('is-active');
});
it('sets ARIA attributes for open tab', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Tabs($html.find('[data-tabs]'), {});
plugin.selectTab('#panel2');
$html.find('#panel2').should.have.not.attr('aria-hidden');
$html.find('[href="#panel2"]').should.have.attr('aria-selected', 'true');
});
it('hides the open tab', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Tabs($html.find('[data-tabs]'), {});
plugin.selectTab('#panel2');
$html.find('#panel1').should.be.hidden;
$html.find('#panel1').should.not.have.class('is-active');
});
it('sets ARIA attributes for closed tab', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Tabs($html.find('[data-tabs]'), {});
plugin.selectTab('#panel2');
$html.find('#panel1').should.be.have.attr('aria-hidden', 'true');
$html.find('[href="#panel1"]').should.be.have.attr('aria-selected', 'false');
});
it('fires change.zf.tabs event with target as data', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.Tabs($html.find('[data-tabs]'), {});
$html.one('change.zf.tabs', function(e, $target) {
e.stopPropagation();
$html.find('[href="#panel2"]').parent()[0].should.be.equal($target[0]);
done();
});
plugin.selectTab('#panel2');
});
});
describe('keyboard events', function() {
it('switches to next tab on ARROW_RIGHT', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Tabs($html.find('[data-tabs]'), {});
$html.find('[href="#panel1"]').focus()
.trigger(window.mockKeyboardEvent('ARROW_RIGHT'));
$html.find('#panel2').should.be.visible;
$html.find('#panel2').should.have.class('is-active');
});
it('switches to next tab on ARROW_DOWN', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Tabs($html.find('[data-tabs]'), {});
$html.find('[href="#panel1"]').focus()
.trigger(window.mockKeyboardEvent('ARROW_DOWN'));
$html.find('#panel2').should.be.visible;
$html.find('#panel2').should.have.class('is-active');
});
it('switches to previous tab on ARROW_LEFT', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Tabs($html.find('[data-tabs]'), {});
$html.find('[href="#panel2"]').focus()
.trigger(window.mockKeyboardEvent('ARROW_LEFT'));
$html.find('#panel1').should.be.visible;
$html.find('#panel1').should.have.class('is-active');
});
it('switches to previous tab on ARROW_UP', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Tabs($html.find('[data-tabs]'), {});
$html.find('[href="#panel2"]').focus()
.trigger(window.mockKeyboardEvent('ARROW_UP'));
$html.find('#panel1').should.be.visible;
$html.find('#panel1').should.have.class('is-active');
});
});
});
themes/ceras/node_modules/foundation-sites/test/javascript/components/toggler.js
Generated Vendored Executable
+143
View File
@@ -0,0 +1,143 @@
describe('Toggler', function() {
var plugin;
var $html;
afterEach(function() {
plugin.destroy();
$html.remove();
});
function appendTriggers() {
return $(`<div>
<a data-open="toggler">Open</a>
<a data-close="toggler">Close</a>
<a data-toggle="toggler">Toggle</a>
</div>`).appendTo('body')
}
describe('constructor()', function() {
it('stores the element and plugin options', function() {
$html = $('<div id="toggler" data-toggler="class"></div>').appendTo('body');
plugin = new Foundation.Toggler($html, {});
plugin.$element.should.be.an('object');
plugin.options.should.be.an('object');
});
});
describe('init()', function() {
it('stores the class defined on the data-toggler attribute', function() {
$html = $('<div id="toggler" data-toggler="class"></div>').appendTo('body');
plugin = new Foundation.Toggler($html, {});
plugin.className.should.equal('class');
});
it('stores the class defined on the data-toggler attribute (with leading dot)', function() {
$html = $('<div id="toggler" data-toggler=".class"></div>').appendTo('body');
plugin = new Foundation.Toggler($html, {});
plugin.className.should.equal('class');
});
it('stores defined animation classes', function() {
$html = $('<div id="toggler" data-toggler data-animate="fade-in fade-out"></div>').appendTo('body');
plugin = new Foundation.Toggler($html, {});
plugin.animationIn.should.equal('fade-in');
plugin.animationOut.should.equal('fade-out');
});
it('adds Aria attributes to click triggers', function() {
$html = $('<div id="toggler" data-toggler="class"></div>').appendTo('body');
var $triggers = appendTriggers();
plugin = new Foundation.Toggler($html, {});
$triggers.find('[data-open], [data-close], [data-toggle]').should.have.attr('aria-controls', 'toggler');
$triggers.remove();
});
it('sets aria-expanded to true if the element is visible', function() {
$html = $('<div id="toggler" data-toggler="class"></div>').appendTo('body');
var $triggers = appendTriggers();
plugin = new Foundation.Toggler($html, {});
$triggers.find('[data-open], [data-close], [data-toggle]').should.have.attr('aria-expanded', 'true');
$triggers.remove();
});
it('sets aria-expanded to false if the element is invisible', function() {
var $css = $('<style>#toggler { display: none }</style>').appendTo('body');
$html = $('<div id="toggler" data-toggler="class"></div>').appendTo('body');
var $triggers = appendTriggers();
plugin = new Foundation.Toggler($html, {});
$triggers.find('[data-open], [data-close], [data-toggle]').should.have.attr('aria-expanded', 'false');
$triggers.remove();
$css.remove();
});
});
describe('toggle()', function() {
it('calls Toggler._toggleClass() if the element toggles with a class');
it('calls Toggler._toggleAnimate() if the element toggles with animation');
});
describe('toggleClass()', function() {
it('toggles a class on the element', function() {
$html = $('<div id="toggler" data-toggler="class"></div>').appendTo('body');
plugin = new Foundation.Toggler($html, {});
plugin._toggleClass();
$('#toggler').should.have.class('class');
plugin._toggleClass();
$('#toggler').should.not.have.class('class');
});
it('updates aria-expanded after the class is toggled', function() {
$html = $('<div id="toggler" data-toggler="class"></div>').appendTo('body');
var $triggers = appendTriggers();
plugin = new Foundation.Toggler($html, {});
plugin._toggleClass();
$triggers.find('[data-open], [data-close], [data-toggle]').should.have.attr('aria-expanded', 'true');
plugin._toggleClass();
$triggers.find('[data-open], [data-close], [data-toggle]').should.have.attr('aria-expanded', 'false');
$triggers.remove();
});
});
// [TODO] Re-enable this if you can get it working in PhantomJS
xdescribe('toggleAnimate()', function() {
it('animates an invisible element in', function(done) {
var $css = $('<style>#toggler { display: none; }</style>').appendTo('body');
$html = $('<div id="toggler" data-toggler data-animate="fade-in fade-out"></div>').appendTo('body');
plugin = new Foundation.Toggler($html, {});
$html.on('on.zf.toggler', function() {
$('#toggler').should.be.visible;
$css.remove();
done();
});
plugin._toggleAnimate();
});
it('animates a visible element out', function(done) {
$html = $('<div id="toggler" data-toggler data-animate="fade-in fade-out"></div>').appendTo('body');
plugin = new Foundation.Toggler($html, {});
$html.on('off.zf.toggler', function() {
$('#toggler').should.be.hidden;
done();
});
plugin._toggleAnimate();
});
});
});
themes/ceras/node_modules/foundation-sites/test/javascript/components/tooltip.js
Generated Vendored Executable
+153
View File
@@ -0,0 +1,153 @@
describe('Tooltip', function() {
var plugin;
var $html;
var template = `
<span data-tooltip aria-haspopup="true" class="has-tip" tabindex="1" title="TOOLTIP_CONTENT">
TEXT
</span>`;
Foundation.Tooltip.defaults.showOn = 'all';
Foundation.Tooltip.defaults.fadeOutDuration = 0;
Foundation.Tooltip.defaults.fadeInDuration = 0;
afterEach(function() {
plugin.destroy();
$html.remove();
});
describe('constructor()', function() {
it('stores the element and plugin options', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Tooltip($html, {});
plugin.$element.should.be.an('object');
plugin.options.should.be.an('object');
});
});
describe('init()', function() {
it('has value of title attribute as content', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Tooltip($html, {});
plugin.template.text().should.equal('TOOLTIP_CONTENT');
});
it('has value of tipText option as content', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Tooltip($html, {tipText: 'TOOLTIP_CONTENT_OPTION'});
plugin.template.text().should.equal('TOOLTIP_CONTENT_OPTION');
});
it('uses value of template option as template', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Tooltip($html, {template: '<div class="TEMPLATE_OPTION"></div>'});
plugin.template.should.have.class('TEMPLATE_OPTION');
});
it('uses value of triggerClass option as trigger class', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Tooltip($html, {triggerClass: 'TRIGGER_CLASS_OPTION'});
plugin.$element.should.have.class('TRIGGER_CLASS_OPTION');
});
it('sets ARIA attributes', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Tooltip($html, {});
plugin.$element.should.have.attr('aria-describedby', plugin.template.attr('id'));
plugin.template.should.have.attr('aria-hidden', 'true');
plugin.template.should.have.attr('role', 'tooltip');
});
});
describe('buildTemplate()', function() {
it('uses value of templateClasses option as template class', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Tooltip($html, {templateClasses: 'TOOLTIP_CLASS_OPTION'});
plugin.template.should.have.class('TOOLTIP_CLASS_OPTION');
});
});
describe('show()', function() {
it('shows the tooltip', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Tooltip($html, {});
plugin.show();
plugin.template.should.be.visible;
plugin.template.should.have.attr('aria-hidden', 'false');
});
it('fires show.zf.tooltip event', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.Tooltip($html, {});
$html.on('show.zf.tooltip', function() {
plugin.template.should.be.visible;
done();
});
plugin.show();
});
});
describe('hide()', function() {
it('hides the tooltip', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Tooltip($html, {});
// Show first
plugin.show();
plugin.hide();
plugin.template.should.be.hidden;
plugin.template.should.have.attr('aria-hidden', 'true');
});
it('fires hide.zf.tooltip event', function(done) {
$html = $(template).appendTo('body');
plugin = new Foundation.Tooltip($html, {});
// Open it first
plugin.show();
$html.on('hide.zf.tooltip', function() {
plugin.template.should.be.hidden;
done();
});
plugin.hide();
});
});
describe('toggle()', function() {
it('shows a hidden tooltip', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Tooltip($html, {});
plugin.toggle();
plugin.template.should.be.visible;
plugin.template.should.have.attr('aria-hidden', 'false');
});
it('hides a visible tooltip', function() {
$html = $(template).appendTo('body');
plugin = new Foundation.Tooltip($html, {});
// Show first
plugin.show();
plugin.toggle();
plugin.template.should.be.hidden;
plugin.template.should.have.attr('aria-hidden', 'true');
});
});
});
themes/ceras/node_modules/foundation-sites/test/javascript/core/core.js
Generated Vendored Executable
+82
View File
@@ -0,0 +1,82 @@
describe('Foundation core', function() {
it('exists on the window', function() {
(window.Foundation).should.be.an('object');
});
it('is a jQuery prototype function', function() {
($.fn.foundation).should.to.be.a('function');
});
describe('plugin()', function() {
afterEach(function() {
delete Foundation._plugins['plugin'];
delete Foundation.Plugin;
});
it('adds Foundation plugins', function() {
function Plugin() {}
Foundation.plugin(Plugin, 'Plugin');
(Foundation._plugins['plugin']).should.be.a('function');
(Foundation.Plugin).should.be.a('function');
});
it('uses the name of the Plugin class/function if one is not provided', function() {
function Plugin() {}
Foundation.plugin(Plugin);
(Foundation._plugins['plugin']).should.be.a('function');
(Foundation.Plugin).should.be.a('function');
});
});
describe('registerPlugin()', function() {
it('registers a new instance of a plugin');
});
describe('unregisterPlugin()', function() {
it('un-registers a plugin being destroyed');
});
describe('reInit()', function() {
});
describe('reflow()', function() {
});
describe('getFnName()', function() {
it('should handle a function declaration', function() {
function A() {};
var name = Foundation.getFnName(A);
name.should.be.a('string');
name.should.be.equal('A');
});
it('should handle an anonymous function expression', function() {
var name = Foundation.getFnName(function(){});
// Inferred names (i.e. `var name = function() {}`) are not tested as they are widely supported
// See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name#Inferred_function_names
name.should.be.a('string');
name.should.be.equal('');
});
it('should handle a named function expression', function() {
var D = function foo(){};
var name = Foundation.getFnName(D);
name.should.be.a('string');
name.should.be.equal('foo');
});
});
describe('transitionEnd()', function() {
});
describe('onLoad()', function (done) {
});
describe('throttle()', function() {
});
});
themes/ceras/node_modules/foundation-sites/test/javascript/core/utils.js
Generated Vendored Executable
+41
View File
@@ -0,0 +1,41 @@
describe('Foundation core utils', function() {
describe('rtl()', function() {
it('detects the text direction on the document', function() {
(Foundation.rtl()).should.be.false;
$('html').attr('dir', 'rtl');
(Foundation.rtl()).should.be.true;
$('html').attr('dir', 'ltr');
});
});
describe('GetYoDigits()', function() {
it('generates a random ID matching a given length', function() {
var id = Foundation.GetYoDigits(6);
id.should.be.a('string');
id.should.have.lengthOf(6);
});
it('can append a namespace to the number', function() {
var id = Foundation.GetYoDigits(6, 'plugin');
id.should.be.a('string');
id.should.have.lengthOf(6 + '-plugin'.length);
id.should.contain('-plugin');
});
});
describe('RegExpEscape()', function() {
it('escape all special characters in a string for RegExp', function () {
const str = 'abc012-[]{}()*+?.,\\^$|#\s\t\r\n';
const notstr = 'abc012-[]{}not-the-escaped-string';
const reg = new RegExp(Foundation.RegExpEscape(str), 'g');
reg.test(str).should.be.true;
reg.test(notstr).should.be.false;
});
});
});
themes/ceras/node_modules/foundation-sites/test/javascript/index.html
Generated Vendored Executable
+33
View File
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<title>Mocha</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../../node_modules/jquery/dist/jquery.js"></script>
<script src="../../_build/assets/js/foundation.js"></script>
<script src="../../node_modules/mocha/mocha.js"></script>
<link rel="stylesheet" href="../../node_modules/mocha/mocha.css" />
<link rel="stylesheet" href="../../_build/assets/css/foundation-float.css">
<link rel="stylesheet" href="../../node_modules/motion-ui/dist/motion-ui.css">
</head>
<body>
<div id="mocha"></div>
<script src="../../node_modules/chai/chai.js"></script>
<script src="../../node_modules/chai-jquery/chai-jquery.js"></script>
<script src="../../node_modules/sinon/pkg/sinon-no-sourcemaps.js"></script>
<script>
mocha.setup({
ui: 'bdd',
timeout: 5000,
});
chai.should();
</script>
<script src="lib/keyboard-event-mock.js"></script>
<script src="lib/utils.js"></script>
<script src="js-tests.js"></script>
<script>
mocha.run();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/javascript/lib/keyboard-event-mock.js
Generated Vendored Executable
+40
View File
@@ -0,0 +1,40 @@
(function(global) {
var keyCodes = {
'A': 65,
'TAB': 9,
'ENTER': 13,
'ESCAPE': 27,
'SPACE': 32,
'END': 35,
'HOME': 36,
'ARROW_LEFT': 37,
'ARROW_UP': 38,
'ARROW_RIGHT': 39,
'ARROW_DOWN': 40
};
/**
* Creates a dummy event to parse.
* Uses jQuery Event class constructor.
* @param {number} keyCode Key code of the key that is simulated.
* @param {object} opts Options that say if modifiers are pressed.
* @return {Event} Event to use.
*/
global.mockKeyboardEvent = mockKeyboardEvent = function(keyCode, opts) {
var options = opts || {},
isCtrl = !!options.ctrl,
isAlt = !!options.alt,
isShift = !!options.shift,
isMeta = !!options.meta,
keyCode = typeof keyCode === 'number' ? keyCode : keyCodes[keyCode],
event = {
shiftKey: isShift,
altKey: isAlt,
ctrlKey: isCtrl,
metaKey: isMeta,
keyCode: keyCode,
which: keyCode
};
return new $.Event('keydown', event);
};
})(window);
themes/ceras/node_modules/foundation-sites/test/javascript/lib/utils.js
Generated Vendored Executable
+43
View File
@@ -0,0 +1,43 @@
(function (global, $) {
/**
* Try to catch the `do` function every `interval` delay, until it succedes
* (does not throw an error) or a given `timout` time passed.
* If a `then` function is passed, it is called after `do` succeded.
* If a `catch` function is passed, it is called after each time `do` fails.
*
* @param {object} opts
* @param {object} opts
*/
global.tryInterval = function (opts) {
var _opts = $.extend({}, opts);
var totalTime = 0;
var interval = setInterval(function () {
var succeded = false;
var error = null;
totalTime += _opts.time;
try {
_opts.try();
succeded = true;
}
catch (err) { error = err; }
if (succeded) {
clearInterval(interval);
if (typeof _opts.then === 'function') _opts.then();
}
else if (totalTime > _opts.timeout) {
clearInterval(interval);
throw error;
}
else {
if (typeof _opts.catch === 'function') _opts.catch(error);
}
}, _opts.interval);
};
})(window, jQuery);
themes/ceras/node_modules/foundation-sites/test/javascript/util/box.js
Generated Vendored Executable
+51
View File
@@ -0,0 +1,51 @@
describe('Foundation box', function () {
var $html;
afterEach(function () {
if ($html) {
$html.remove();
}
});
describe('GetDimensions()', function () {
it('should be unable to get dimensions for window', function(done) {
try {
Foundation.Box.GetDimensions($("window"));
should.fail();
} catch (err) {
done();
}
});
it('should be unable to get dimensions for document', function(done) {
try {
Foundation.Box.GetDimensions($("document"));
should.fail();
} catch (err) {
done();
}
});
it('height and width of element', function () {
$html = $('<div id="rect-test" style="height: 100px;width:200px;"></div>').appendTo('body');
var dims = Foundation.Box.GetDimensions($("#rect-test"));
dims.width.should.equal(200);
dims.height.should.equal(100);
});
it('parent height of element', function () {
$html = $('<div style="height: 200px;"><div id="rect-test-parent" style="height: 100px;width:200px;"></div></div>').appendTo('body');
var dims = Foundation.Box.GetDimensions($("#rect-test-parent"));
dims.width.should.equal(200);
dims.height.should.equal(100);
dims.parentDims.height.should.equal(200);
});
});
});
themes/ceras/node_modules/foundation-sites/test/javascript/util/keyboard.js
Generated Vendored Executable
+262
View File
@@ -0,0 +1,262 @@
describe('Keyboard util', function() {
/**
* Creates a dummy event to parse.
* Uses jQuery Event class constructor.
* @param {number} keyCode Key code of the key that is simulated.
* @param {object} opts Options that say if modifiers are pressed.
* @return {Event} Event to use.
*/
const createEvent = window.mockKeyboardEvent;
const keyCodes = {
'A': 65,
'TAB': 9,
'ENTER': 13,
'ESCAPE': 27,
'SPACE': 32,
'ARROW_LEFT': 37,
'ARROW_UP': 38,
'ARROW_RIGHT': 39,
'ARROW_DOWN': 40
};
afterEach(function() {
document.activeElement.blur();
});
it('exists on the Foundation API', function() {
(window.Foundation.Keyboard).should.be.an('object');
});
describe('parseKey()', function() {
it('returns the character pressed for a normal key', function() {
let event = createEvent(keyCodes['A']),
parsedKey = Foundation.Keyboard.parseKey(event);
parsedKey.should.be.equal('A');
});
it('returns the character pressed for special keys', function() {
for (let key in keyCodes) {
let keyCode = keyCodes[key];
let event = createEvent(keyCode),
parsedKey = Foundation.Keyboard.parseKey(event);
parsedKey.should.be.equal(key);
}
});
it('recognizes if CTRL was pressed', function() {
let event = createEvent(keyCodes['A'], {ctrl: true}),
parsedKey = Foundation.Keyboard.parseKey(event);
parsedKey.should.be.equal('CTRL_A');
});
it('recognizes if ALT was pressed', function() {
let event = createEvent(keyCodes['A'], {alt: true}),
parsedKey = Foundation.Keyboard.parseKey(event);
parsedKey.should.be.equal('ALT_A');
});
it('recognizes if SHIFT was pressed', function() {
let event = createEvent(keyCodes['A'], {shift: true}),
parsedKey = Foundation.Keyboard.parseKey(event);
parsedKey.should.be.equal('SHIFT_A');
});
it('recognizes if multiple modifiers were pressed', function() {
let event = createEvent(keyCodes['A'], {shift: true, alt: true, ctrl: true}),
parsedKey = Foundation.Keyboard.parseKey(event);
parsedKey.should.be.equal('ALT_CTRL_SHIFT_A');
});
});
describe('handleKey()', function() {
it('executes callback for given key event', function() {
let spy = sinon.spy();
// Register component
Foundation.Keyboard.register('MyComponent', {
'ESCAPE': 'close'
});
let event = createEvent(keyCodes['ESCAPE']);
Foundation.Keyboard.handleKey(event, 'MyComponent', {
close: () => {
spy();
}
});
spy.called.should.be.true;
});
it('executes handled callback for given key event', function() {
let spy = sinon.spy();
// Register component
Foundation.Keyboard.register('MyComponent', {
'ESCAPE': 'close'
});
let event = createEvent(keyCodes['ESCAPE']);
Foundation.Keyboard.handleKey(event, 'MyComponent', {
close: () => {
// stuff
},
handled: () => {
spy();
}
});
spy.called.should.be.true;
});
it('executes unhandled callback for given key event', function() {
let spy = sinon.spy();
// Register component
Foundation.Keyboard.register('MyComponent', {
});
let event = createEvent(keyCodes['ESCAPE']);
Foundation.Keyboard.handleKey(event, 'MyComponent', {
unhandled: () => {
spy();
}
});
spy.called.should.be.true;
});
});
describe('findFocusable()', function() {
it('finds focusable elements inside a container', function() {
let $html = $(`<div>
<a href="#">Link</a>
<button>Button</button>
</div>`).appendTo('body');
let $focusable = Foundation.Keyboard.findFocusable($html);
$focusable.length.should.be.equal(2);
$html.remove();
});
it('does not find hidden focusable elements', function() {
let $html = $(`<div>
<a style="display: none;" href="#">Link</a>
<button style="display: none;">Button</button>
</div>`).appendTo('body');
let $focusable = Foundation.Keyboard.findFocusable($html);
$focusable.length.should.be.equal(0);
$html.remove();
});
it('does not find disabled focusable elements', function() {
let $html = $(`<div>
<button disabled>Button</button>
</div>`).appendTo('body');
let $focusable = Foundation.Keyboard.findFocusable($html);
$focusable.length.should.be.equal(0);
$html.remove();
});
it('does not find focusable elements with negative tabindex', function() {
let $html = $(`<div>
<button tabindex="-1">Button</button>
</div>`).appendTo('body');
let $focusable = Foundation.Keyboard.findFocusable($html);
$focusable.length.should.be.equal(0);
$html.remove();
});
});
describe('trapFocus()', function() {
it('moves the focus to the first focusable element', function() {
let $html = $(`<div>
<a href="#">Link1</a>
<a href="#">Link2</a>
<a href="#">Link3</a>
</div>`).appendTo('body');
Foundation.Keyboard.trapFocus($html);
$html.find('a').last().focus();
let event = createEvent(keyCodes['TAB']);
$(document.activeElement).trigger(event);
document.activeElement.should.be.equal($html.find('a').eq(0)[0]);
$html.remove();
});
it('moves the focus to the last focusable element', function() {
let $html = $(`<div>
<a href="#">Link1</a>
<a href="#">Link2</a>
<a href="#">Link3</a>
</div>`).appendTo('body');
Foundation.Keyboard.trapFocus($html);
$html.find('a').first().focus();
let event = createEvent(keyCodes['TAB'], {shift: true});
$(document.activeElement).trigger(event);
document.activeElement.should.be.equal($html.find('a').eq(2)[0]);
$html.remove();
});
});
describe('releaseFocus()', function() {
it('stops trapping the focus at the end', function() {
let $html = $(`<div>
<a href="#">Link1</a>
<a href="#">Link2</a>
<a href="#">Link3</a>
</div>`).appendTo('body');
Foundation.Keyboard.trapFocus($html);
$html.find('a').last().focus();
Foundation.Keyboard.releaseFocus($html);
let event = createEvent(keyCodes['TAB']);
$(document.activeElement).trigger(event);
document.activeElement.should.not.be.equal($html.find('a').eq(0)[0]);
$html.remove();
});
it('stops trapping the focus at the top', function() {
let $html = $(`<div>
<a href="#">Link1</a>
<a href="#">Link2</a>
<a href="#">Link3</a>
</div>`).appendTo('body');
Foundation.Keyboard.trapFocus($html);
$html.find('a').first().focus();
Foundation.Keyboard.releaseFocus($html);
let event = createEvent(createEvent(keyCodes['TAB'], {shift: true}));
$(document.activeElement).trigger(event);
document.activeElement.should.not.be.equal($html.find('a').eq(2)[0]);
$html.remove();
});
});
});
themes/ceras/node_modules/foundation-sites/test/sass/_breakpoint.scss
Generated Vendored Executable
+159
View File
@@ -0,0 +1,159 @@
@import "true";
@import '../../scss/util/unit';
@import '../../scss/util/breakpoint';
@include test-module('Breakpoint') {
@include test('Breakpoint (Named to Em) [function]') {
$test: breakpoint(medium);
$expect: '(min-width: 40em)';
@include assert-equal($test, $expect,
'Converts a named breakpoint to an em value');
}
@include test('Breakpoint (Rem/Px to Em) [function]') {
$expect: '(min-width: 1em)';
@include assert-equal(breakpoint(16px), $expect,
'Converts a pixel breakpoint to em');
@include assert-equal(breakpoint(1rem), $expect,
'Converts a rem breakpoint to em');
}
@include test('Breakpoint (Only Range) [function]') {
$test: breakpoint(medium only);
$expect: '(min-width: 40em) and (max-width: 63.99875em)';
$test-lowest: breakpoint(small only);
$expect-lowest: '(max-width: 39.99875em)';
$test-highest: breakpoint(xxlarge only);
$expect-highest: '(min-width: 90em)';
@include assert-equal($test, $expect,
'Creates a min/max-width range out of a named breakpoint');
@include assert-equal($test-lowest, $expect-lowest,
'Creates a max-width range if the breakpoint is the lowest');
@include assert-equal($test-highest, $expect-highest,
'Creates a min-width range if the breakpoint is the highest');
}
@include test('Breakpoint (Named Down Range) [function]') {
$test: breakpoint(medium down);
$expect: '(max-width: 63.99875em)';
@include assert-equal($test, $expect,
'Creates a down range out of a medium breakpoint');
$test-lowest: breakpoint(small down);
$expect-lowest: '(max-width: 39.99875em)';
@include assert-equal($test-lowest, $expect-lowest,
'Creates a down range out of a small breakpoint');
$test-highest: breakpoint(xxlarge down);
$expect-highest: '';
@include assert-equal($test-highest, $expect-highest,
'Skips media query creation for xxlarge down');
}
@include test('Breakpoint (Value Down Range) [function]') {
$expect: '(max-width: 1em)';
@include assert-equal(breakpoint(16px down), $expect,
'Creates a down range out of a pixel value');
@include assert-equal(breakpoint(1rem down), $expect,
'Creates a down range out of a rem value');
@include assert-equal(breakpoint(1em down), $expect,
'Creates a down range out of an em value');
}
@include test('Breakpoint (Empty String) [function]') {
$expect: '';
@include assert-equal(breakpoint(small up), $expect,
'Returns an empty string for the value small up');
@include assert-equal(breakpoint(0 down), $expect,
'Returns an empty string for the value 0 down');
@include assert-equal(breakpoint(0 up), $expect,
'Returns an empty string for the value 0 up');
}
@include test('Breakpoint (Orientation/Retina) [function]') {
@include assert-equal(breakpoint(landscape), '(orientation: landscape)',
'Creates special media query for landscape');
@include assert-equal(breakpoint(portrait), '(orientation: portrait)',
'Creates special media query for portrait');
@include assert-equal(breakpoint(retina), '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)',
'Creates special media query for retina');
}
@include test('Breakpoint (Unknown Value) [function]') {
@include assert-equal(breakpoint(xxxxlarge), '', 'Returns an empty string for non-existant media queries');
}
@include test('Map Serialize [function]') {
$input: (
small: 1em,
medium: 2em,
large: 3em,
);
$test: -zf-bp-serialize($input);
$expect: 'small=1em&medium=2em&large=3em';
@include assert-equal($test, $expect,
'Converts a Sass map into a string');
}
@include test('Map Next [function]') {
$input: (
one: 'One',
two: 'Two',
three: 'Three',
);
$test_next: -zf-map-next($input, two);
$expect_next: map-get($input, three);
@include assert-equal($test_next, $expect_next,
'Returns the next value in a map');
$test_last: -zf-map-next($input, three);
$expect_last: null;
@include assert-equal($test_last, $expect_last,
'Returns null if the key is last in the map');
$test_null: -zf-map-next($input, four);
$expect_null: null;
@include assert-equal($test_null, $expect_null,
'Returns null if the key is not in the map');
}
@include test('Get Breakpoint Value [function]') {
$config: (
small: 0,
large: 1,
);
$test_kittens: -zf-get-bp-val($config, kittens);
$expect_kittens: null;
@include assert-equal($test_kittens, $expect_kittens,
'Given a non-existant breakpoint name, return null');
$test_match: -zf-get-bp-val($config, large);
$expect_match: 1;
@include assert-equal($test_match, $expect_match,
'Given a matching breakpoint, returns the exact value');
@include assert-equal(-zf-get-bp-val($config, medium), 0,
'Given a nearby breakpoint, returns the next lowest value');
@include assert-equal(-zf-get-bp-val($config, xlarge), 1,
'Given a nearby breakpoint, returns the next lowest value');
}
}
themes/ceras/node_modules/foundation-sites/test/sass/_color.scss
Generated Vendored Executable
+47
View File
@@ -0,0 +1,47 @@
@import "true";
@import '../../scss/global';
@import '../../scss/util/color';
@include test-module('Color') {
@include test('Foreground (Black) [function]') {
$test: color-pick-contrast($white);
$expect: $black;
@include assert-equal($test, $expect,
'Returns black if the input color is light');
}
@include test('Foreground (White) [function]') {
$test: color-pick-contrast($black);
$expect: $white;
@include assert-equal($test, $expect,
'Returns white if the input color is dark');
}
@include test('Smart Scale (Darken) [function]') {
$color: $white;
$scale: 5%;
$threshold: 60%;
$test: smart-scale($color, $scale, $threshold);
$expect: scale-color($color, $lightness: -$scale);
@include assert-equal($test, $expect,
'Darkens a light color');
}
@include test('Smart Scale (Lighten) [function]') {
$color: $black;
$scale: 5%;
$threshold: 60%;
$test: smart-scale($color, $scale, $threshold);
$expect: scale-color($color, $lightness: $scale);
@include assert-equal($test, $expect,
'Lightens a dark color');
}
}
themes/ceras/node_modules/foundation-sites/test/sass/_components.scss
Generated Vendored Executable
+42
View File
@@ -0,0 +1,42 @@
@import "true";
@import '../../scss/util/math';
@import '../../scss/global';
@import '../../scss/components/responsive-embed';
@import '../../scss/grid/grid';
@include test-module('Components') {
@include test('Ratio to Percentage [function]') {
$test: ratio-to-percentage(3 by 4);
$expect: 4 / 3 * 100%;
@include assert-equal($test, $expect,
'Creates a percentage value from a ratio');
}
@include test('Grid Column [function]') {
@include assert-equal(grid-column(6), 50%,
'Creates a column width from a column count');
@include assert-equal(grid-column(0.5), 50%,
'Creates a column width from a decimal value');
@include assert-equal(grid-column(50%), 50%,
'Creates a column width from a percentage value');
}
@include test('Flex Grid Column [function]') {
@include assert-equal(flex-grid-column(), 1 1 0px,
'Creates an expanding flex property when passed no value');
@include assert-equal(flex-grid-column(shrink), 0 0 auto,
'Creates a shrinking flex property when passed shrink');
@include assert-equal(flex-grid-column(6), 0 0 50%,
'Creates a fixed flex property from a column count');
@include assert-equal(flex-grid-column(0.5), 0 0 50%,
'Creates a fixed flex property from a decimal value');
@include assert-equal(flex-grid-column(50%), 0 0 50%,
'Creates a fixed flex property from a percentage value');
@include assert-equal(flex-grid-column(1 of 2), 0 0 50%,
'Creates a fixed flex property from an x of y value');
}
}
themes/ceras/node_modules/foundation-sites/test/sass/_selector.scss
Generated Vendored Executable
+27
View File
@@ -0,0 +1,27 @@
@import "true";
@import '../../scss/util/selector';
@include test-module('Selector') {
@include test('Selector [function]') {
$test: #{text-inputs(text password)};
$expect: "[type='text'], [type='password']";
//@debug $test;
@include assert-equal($test, $expect,
'Creates a selector out of a list of text input types');
}
@include test('Selector (with modifiers) [function]') {
$test: #{text-inputs(text password, $modifier: ':focus')};
$expect: "[type='text']:focus, [type='password']:focus";
//@debug $test;
@include assert-equal($test, $expect,
'Creates a selector out of a list of text input types with a modifier');
}
}
themes/ceras/node_modules/foundation-sites/test/sass/_unit.scss
Generated Vendored Executable
+50
View File
@@ -0,0 +1,50 @@
@import "true";
@import '../../scss/util/unit';
@include test-module('Units') {
// Strip Units
@include test('Strip Units [function]') {
$expect: 20;
@include assert-equal(strip-unit(20px), $expect,
'Strips the unit from a number');
@include assert-equal(strip-unit(20), $expect,
'Returns the same number when given a unitless value');
}
// Convert To Rem
@include test('Convert To Rem [function]') {
$expect: 2rem;
@include assert-equal(-zf-to-rem(32, 16), $expect,
'Converts a unit to the equivalent in rems');
@include assert-equal(-zf-to-rem(2rem, 16), $expect,
'Keeps rem values the same');
}
// Rem Calculator
@include test('Rem Calculator [function]') {
$test: rem-calc((8 16 32 64), 16);
$expect: 0.5rem 1rem 2rem 4rem;
@include assert-equal($test, $expect,
'Converts an arbitrary number of values into rem equivalents');
}
// Breakpoint to Em
@include test('Breakpoint To Em [function]') {
$expect: 1em;
@include assert-equal(-zf-bp-to-em(16), $expect,
'Converts a unitless value to em');
@include assert-equal(-zf-bp-to-em(16px), $expect,
'Converts a pixel value to em');
@include assert-equal(-zf-bp-to-em(1rem), $expect,
'Converts a rem value to em');
@include assert-equal(-zf-bp-to-em(1em), $expect,
'Converts an em value to em');
}
}
themes/ceras/node_modules/foundation-sites/test/sass/_value.scss
Generated Vendored Executable
+128
View File
@@ -0,0 +1,128 @@
@import "true";
@import '../../scss/util/unit';
@import '../../scss/util/value';
@include test-module('Value') {
@include test('Value (Not Falsey) [function]') {
$boolean: has-value(true);
$number: has-value(1px);
$color: has-value(#000);
$list: has-value(1px solid black);
$description: 'Returns true if the value is not falsey';
@include assert-equal($boolean, true, $description);
@include assert-equal($number, true, $description);
@include assert-equal($color, true, $description);
@include assert-equal($list, true, $description);
}
@include test('Value (Falsey) [function]') {
$zero: has-value(0px);
$null: has-value(null);
$none: has-value(none);
$empty: has-value(());
$description: 'Returns false if the value is falsey';
@include assert-equal($zero, false, $description);
@include assert-equal($null, false, $description);
@include assert-equal($none, false, $description);
@include assert-equal($empty, false, $description);
}
@include test('Get Side [function]') {
$valueOne: 1rem;
$testOne: (
get-side($valueOne, top),
get-side($valueOne, right),
get-side($valueOne, bottom),
get-side($valueOne, left),
);
$expectOne: (1rem, 1rem, 1rem, 1rem,);
@include assert-equal($testOne, $expectOne,
'Returns correct sides when given one side value');
$valueTwo: 1rem 2rem;
$testTwo: (
get-side($valueTwo, top),
get-side($valueTwo, right),
get-side($valueTwo, bottom),
get-side($valueTwo, left),
);
$expectTwo: (1rem, 2rem, 1rem, 2rem,);
@include assert-equal($testTwo, $expectTwo,
'Returns correct sides when given two side values');
$valueThree: 1rem 2rem 3rem;
$testThree: (
get-side($valueThree, top),
get-side($valueThree, right),
get-side($valueThree, bottom),
get-side($valueThree, left),
);
$expectThree: (1rem, 2rem, 3rem, 2rem,);
@include assert-equal($testThree, $expectThree,
'Returns correct sides when given three side values');
$valueFour: 1rem 2rem 3rem 4rem;
$testFour: (
get-side($valueFour, top),
get-side($valueFour, right),
get-side($valueFour, bottom),
get-side($valueFour, left),
);
$expectFour: (1rem, 2rem, 3rem, 4rem,);
@include assert-equal($testFour, $expectFour,
'Returns correct sides when given four side values');
}
@include test('Get Border Value [function]') {
$value: 10px dashed green;
$width: get-border-value($value, width);
$style: get-border-value($value, style);
$color: get-border-value($value, color);
$description: 'Returns the right value of a border property';
@include assert-equal($width, 10px, $description);
@include assert-equal($style, dashed, $description);
@include assert-equal($color, green, $description);
$defaultWidth: get-border-value(solid black, width);
$defaultStyle: get-border-value(10px black, style);
$defaultColor: get-border-value(10px solid, color);
$defaultDescription: 'Returns a default value if a property is missing';
@include assert-equal($defaultWidth, 0, $defaultDescription);
@include assert-equal($defaultStyle, solid, $defaultDescription);
@include assert-equal($defaultColor, black, $defaultDescription);
}
@include test('Map Deep Get [function]') {
$map: (
one: (
two: 'three',
),
);
$expect: 'three';
@include assert-equal(map-deep-get($map, one, two), $expect,
'Gets a value from a nested map');
}
@include test('Map Safe Get [function]') {
$map: (
one: 'two'
);
$expect: 'two';
@include assert-equal(map-safe-get($map, one), $expect,
'Safely return a value from a map');
}
// TODO: Add spec for pow()
}
themes/ceras/node_modules/foundation-sites/test/sass/test_sass.js
Generated Vendored Executable
+18
View File
@@ -0,0 +1,18 @@
var path = require('path');
var sassTrue = require('sass-true');
// Test Files
var breakpointFile = path.join(__dirname, '_breakpoint.scss');
var colorFile = path.join(__dirname, '_color.scss');
var selectorFile = path.join(__dirname, '_selector.scss');
var unitFile = path.join(__dirname, '_unit.scss');
var valueFile = path.join(__dirname, '_value.scss');
var componentsFile = path.join(__dirname, '_components.scss');
// Run Tests
sassTrue.runSass({file: breakpointFile}, describe, it);
sassTrue.runSass({file: colorFile}, describe, it);
sassTrue.runSass({file: selectorFile}, describe, it);
sassTrue.runSass({file: unitFile}, describe, it);
sassTrue.runSass({file: valueFile}, describe, it);
sassTrue.runSass({file: componentsFile}, describe, it);
themes/ceras/node_modules/foundation-sites/test/visual/_template.html
Generated Vendored Executable
+28
View File
@@ -0,0 +1,28 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<p>Use this template to create a new test page.</p>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/abide/abide-radio.html
Generated Vendored Executable
+84
View File
@@ -0,0 +1,84 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Abide Radio Buttons</h1>
<p>This form has required radio buttons. If you try to submit without picking one, it
should show an error. When you then pick one, the error should clear and let you submit.</p>
<form id="form" data-abide novalidate>
<div class="alert callout hide" data-abide-error>
<p>This form has errors.</p>
</div>
<fieldset>
<legend>Fieldset Label</legend>
<input required type="radio" name="example1" value="yes" id="example1Yes" />
<label for="example1Yes">Yes</label>
<input required type="radio" name="example1" value="no" id="example1No" />
<label for="example1No">No</label>
</fieldset>
<button class="button" type="submit">Submit</button>
<button class="button" type="reset">Reset</button>
</form>
<hr>
<p>This form has <strong>one</strong> required radio button. If you try to submit without picking one, it
should show an error. When you then pick one, the error should clear and let you submit.</p>
<form id="form" data-abide novalidate>
<div class="alert callout hide" data-abide-error>
<p>This form has errors.</p>
</div>
<fieldset>
<legend>Fieldset Label</legend>
<input type="radio" name="example3" value="yes" id="example3Yes" />
<label for="example3Yes">Yes</label>
<input required type="radio" name="example3" value="no" id="example3No" />
<label for="example3No">No</label>
<input type="radio" name="example3" value="maybe" id="example3Maybe" />
<label for="example3Maybe">Maybe</label>
</fieldset>
<button class="button" type="submit">Submit</button>
<button class="button" type="reset">Reset</button>
</form>
<hr>
<p>This form has optional radio buttons. It should let you submit with or without picking one.</p>
<form id="form" data-abide novalidate>
<div class="alert callout hide" data-abide-error>
<p>This form has errors.</p>
</div>
<fieldset>
<legend>Fieldset Label</legend>
<input type="radio" name="example2" value="yes" id="example2Yes" />
<label for="example2Yes">Yes</label>
<input type="radio" name="example2" value="no" id="example2No" />
<label for="example2No">No</label>
</fieldset>
<button class="button" type="submit">Submit</button>
<button class="button" type="reset">Reset</button>
</form>
<hr>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/abide/accessibility.html
Generated Vendored Executable
+59
View File
@@ -0,0 +1,59 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Abide a11y</h1>
<p>This has a global error and errors for each fields.
<ul>
<li>When the form is submit with invalid fields, the global error <strong>should be spelt</strong>.</li>
<li>When invalid fields are focused, the field should be <strong>described as "invalid"</strong> and the field error <strong>should be spelt</strong>.</li>
</ul>
</p>
<form id="form" data-abide novalidate>
<div class="alert callout" data-abide-error style="display: none;">
<p>This form has errors.</p>
</div>
<label>
This field is not required
<input type="text" placeholder="Not required">
</label>
<label>
This field is required
<input type="text" placeholder="Required" required>
</label>
<label>
This field is required and has an error message
<input type="text" placeholder="Required" required>
<span class="form-error">I am the error message and I should be spelt</span>
</label>
<button class="button" type="submit">Submit</button>
<button class="button" type="reset">Reset</button>
</form>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/abide/hidden_and_ignored_fields.html
Generated Vendored Executable
+56
View File
@@ -0,0 +1,56 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Abide: Hidden and Ignored Fields</h1>
<div class="callout">
<p>This form has a hidden field and a required text field.</p>
<p>Errors should be displayed properly.</p>
<form data-abide novalidate>
<input required type="text" placeholder="Required - try submitting without a value">
<span class="form-error">This field is required</span>
<input type="hidden" value="foo">
<button type="submit" class="button">Submit</button>
<button type="reset" class="button">Reset</button>
</form>
</div>
<div class="callout">
<p>This form has a required text field and an ignored field that is ignored after page load.</p>
<p>The ignored field should be ignored.</p>
<form data-abide novalidate>
<div class="row column">
<input required type="text" placeholder="Required">
<span class="form-error">This field is required</span>
</div>
<div class="row column">
<input required id="ignoreAfter" type="text" placeholder="Ignored">
<span class="form-error">You should never see this error!</span>
</div>
<button type="submit" class="button">Submit</button>
<button type="reset" class="button">Reset</button>
</form>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
Foundation.Abide.defaults.patterns['customPattern'] = /^\w{4,16}$/;
$(document).foundation();
$("#ignoreAfter").attr("data-abide-ignore", true);
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/abide/text.html
Generated Vendored Executable
+120
View File
@@ -0,0 +1,120 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Abide: Text Fields</h1>
<p>This form has one required text field and one optional text field.</p>
<form data-abide novalidate>
<input required type="text" placeholder="Required">
<input type="text" placeholder="Not required">
<button type="submit" class="button">Submit</button>
<button type="reset" class="button">Reset</button>
</form>
<hr>
<p>This form has valid and invalid inputs for other text input types. (In browsers that support color pickers, you won't see a text field, but a color selection button instead.)</p>
<form data-abide novalidate>
<fieldset>
<legend>color</legend>
<input type="color" required value="#ffffff">
<input type="color" required value="wefwf89">
</fieldset>
<fieldset>
<legend>date</legend>
<input type="date" required value="1970-01-31">
<input type="date" required value="dwepdw9449tbv">
</fieldset>
<fieldset>
<legend>datetime</legend>
<input type="datetime" required value="1970-01-31T05:30:00Z">
<input type="datetime" required>
</fieldset>
<fieldset>
<legend>email</legend>
<input type="email" required value="foundation@zurb.com">
<input type="email" required value="notanemail.lol">
</fieldset>
<fieldset>
<legend>month</legend>
<input type="month" required value="2016-01">
<input type="month" required value="10293">
</fieldset>
<fieldset>
<legend>number</legend>
<input type="number" required value="1">
<input type="number" required value="lol">
</fieldset>
<fieldset>
<legend>search</legend>
<input type="search" required>
</fieldset>
<fieldset>
<legend>tel</legend>
<input type="tel" required value="3175554848">
<input type="tel" required value="lol">
</fieldset>
<fieldset>
<legend>time</legend>
<input type="time" required value="05:30:00">
<input type="time" required value="x:du:dwef">
</fieldset>
<fieldset>
<legend>url</legend>
<input type="url" required value="http://foundation.zurb.com">
<input type="url" required value="foundation@zurb.com">
</fieldset>
<fieldset>
<legend>week</legend>
<input type="week" required value="2016-W01">
<input type="week" required value="101223">
</fieldset>
<button type="submit" class="button">Submit</button>
<button type="reset" class="button">Reset</button>
</form>
<hr>
<p>This field uses a custom pattern. The field is valid if the input is between 4 and 16 characters long.</p>
<form data-abide novalidate>
<input required type="text" pattern="customPattern">
<button type="submit" class="button">Submit</button>
<button type="reset" class="button">Reset</button>
</form>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
Foundation.Abide.defaults.patterns['customPattern'] = /^\w{4,16}$/;
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/accordion-menu/accordionmenu.html
Generated Vendored Executable
+70
View File
@@ -0,0 +1,70 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>All Foundation Menu Options - Flexbox</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Accordion Menu</h1>
<div class="example" style="max-width: 250px">
<ul class="vertical menu accordion-menu" data-accordion-menu>
<li><a href="#">One</a></li>
<li>
<a href="#">Two</a>
<ul class="menu vertical nested">
<li><a href="#">Two A</a></li>
<li><a href="#">Two B</a></li>
<li><a href="#">Two C</a></li>
<li><a href="#">Two D</a></li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/accordion-menu/keyboard.html
Generated Vendored Executable
+44
View File
@@ -0,0 +1,44 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Accordion Menu: Keyboard Control</h1>
<ul>
<li>The Tab and down arrow keys should navigate down the menu, including open sub-menus.</li>
<li>Shift-tab and up arrow keys should navigate up the menu, including open sub-menus.</li>
<li>When focused on a parent menu, the space bar and Enter key should open or close the menu.</li>
<li>When focused on a link item, the space bar and Center key should navigate to the link.</li>
</ul>
<ul class="vertical menu" data-accordion-menu>
<li>
<a href="#">Item 1</a>
<ul class="menu vertical nested">
<li><a href="google.com">External link</a></li>
<li><a href="#">Item 1B</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
</ul>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/accordion-menu/parent-link.html
Generated Vendored Executable
+73
View File
@@ -0,0 +1,73 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Accordion Menu Parent Link</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Accordion Menu</h1>
<p>With parent link, parent should be reproduced in child, so expanding 'Two (Parent)' should
show Two (Parent) inside</p>
<div class="example" style="max-width: 250px">
<ul class="vertical menu accordion-menu" data-accordion-menu data-parent-link="true">
<li><a href="#">One</a></li>
<li>
<a href="#">Two (Parent)</a>
<ul class="menu vertical nested">
<li><a href="#">Two A</a></li>
<li><a href="#">Two B</a></li>
<li><a href="#">Two C</a></li>
<li><a href="#">Two D</a></li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/accordion-menu/submenu-toggle.html
Generated Vendored Executable
+59
View File
@@ -0,0 +1,59 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Accordion Menu: Submenu Toggle</h1>
<ul>
<li>Any link with a submenu should contain a .submenu-toggle button.</li>
<li>This button should toggle the submenu.</li>
<li>The parent link (if it has a link) should work as a link.</li>
</ul>
<ul class="accordion-menu vertical menu" data-accordion-menu data-submenu-toggle="true">
<li>
<a href="http://www.github.com">Item 1 (external)</a>
<ul class="menu vertical">
<li><a href="google.com">Item 1A (external)</a></li>
<li>
<a href="#">Item 1B</a>
</li>
</ul>
</li>
<li>
<a href="#">Item 2</a>
<ul class="menu vertical">
<li><a href="#">Item 2A</a></li>
<li>
<a href="#">Item 2B</a>
<ul class="menu vertical">
<li><a href="google.com">Item 2BA (external)</a></li>
<li>
<a href="#">Item 2BB</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/accordion/focus.html
Generated Vendored Executable
+78
View File
@@ -0,0 +1,78 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Accordion: Focus Management</h1>
<p>This is a stock accordion. The tab key will cycle through accordion panes without opening/closing. The up/down arrow keys will cycle through accordion panes, opening the one you move to, and closing the one you move away from.</p>
<ul class="accordion" data-accordion role="tablist">
<li class="accordion-item is-active" data-accordion-item>
<a href="#panel-1-1" role="tab" class="accordion-title" id="panel-1-1-heading" aria-controls="panel-1-1">Accordion Panel One</a>
<div id="panel-1-1" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel-1-1-heading">
<p>Panel one content goes here: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra sodales nulla, eu consequat quam fringilla sed. Suspendisse potenti. Nam ac condimentum mi. Quisque enim arcu, dapibus nec congue nec, luctus non est.</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#panel-1-2" role="tab" class="accordion-title" id="panel-1-2-heading" aria-controls="panel-1-2">Accordion Panel Two</a>
<div id="panel-1-2" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel-1-2-heading">
<p>Panele two content goes here: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra sodales nulla, eu consequat quam fringilla sed. Suspendisse potenti. Nam ac condimentum mi. Quisque enim arcu, dapibus nec congue nec, luctus non est.</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#panel-1-3" role="tab" class="accordion-title" id="panel-1-3-heading" aria-controls="panel-1-3">Accordion Panel Three</a>
<div id="panel-1-3" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel-1-3-heading">
<p>Panel three content goes here: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra sodales nulla, eu consequat quam fringilla sed. Suspendisse potenti. Nam ac condimentum mi. Quisque enim arcu, dapibus nec congue nec, luctus non est.</p>
</div>
</li>
</ul>
<hr>
<p>This is an accordion with multiExpand set to "true". Using the up/down arrow keys will cycle between accordion titles <em>without opening/closing them</em>, and pressing space will open or close a pane.</p>
<ul class="accordion" data-accordion role="tablist" data-multi-expand="true">
<li class="accordion-item is-active" data-accordion-item>
<a href="#panel-1-1" role="tab" class="accordion-title" id="panel-1-1-heading" aria-controls="panel-1-1">Accordion Panel One</a>
<div id="panel-1-1" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel-1-1-heading">
<p>Panel one content goes here: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra sodales nulla, eu consequat quam fringilla sed. Suspendisse potenti. Nam ac condimentum mi. Quisque enim arcu, dapibus nec congue nec, luctus non est.</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#panel-1-2" role="tab" class="accordion-title" id="panel-1-2-heading" aria-controls="panel-1-2">Accordion Panel Two</a>
<div id="panel-1-2" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel-1-2-heading">
<p>Panele two content goes here: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra sodales nulla, eu consequat quam fringilla sed. Suspendisse potenti. Nam ac condimentum mi. Quisque enim arcu, dapibus nec congue nec, luctus non est.</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#panel-1-3" role="tab" class="accordion-title" id="panel-1-3-heading" aria-controls="panel-1-3">Accordion Panel Three</a>
<div id="panel-1-3" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel-1-3-heading">
<p>Panel three content goes here: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra sodales nulla, eu consequat quam fringilla sed. Suspendisse potenti. Nam ac condimentum mi. Quisque enim arcu, dapibus nec congue nec, luctus non est.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/accordion/nested.html
Generated Vendored Executable
+73
View File
@@ -0,0 +1,73 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style>
.accordion-title[aria-expanded="true"] {
border-top: 1px solid dodgerblue;
}
.accordion-title[aria-selected="true"] {
border-bottom: 1px solid red;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Accordion: Nesting</h1>
<p>These are nested accordions.</p>
<ul>
<li>A title with <code>aria-expanded="true"</code> has a blue border.</li>
<li>A title with <code>aria-selected="true"</code> has a red border.</li>
<li>An open item should have <strong>both borders</strong>.</li>
<li>Manipulating one accordion shouldn't affect the other.</li>
</ul>
<ul class="accordion" data-accordion>
<li class="accordion-item is-active" data-accordion-item>
<a href="#" class="accordion-title">Accordion 1</a>
<div class="accordion-content" data-tab-content>
<p>Base Accordion</p>
<ul class="accordion" data-accordion data-multi-expand="true" data-allow-all-closed="true">
<li class="accordion-item is-active" data-accordion-item>
<a href="#" class="accordion-title">Accordion 1</a>
<div class="accordion-content" data-tab-content>
Nested Accordion
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Accordion 1</a>
<div class="accordion-content" data-tab-content>
Nested Accordion
</div>
</li>
</ul>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Accordion 1</a>
<div class="accordion-content" data-tab-content>
<p>Base Accordion</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/breadcrumbs/breadcrumbs.html
Generated Vendored Executable
+37
View File
@@ -0,0 +1,37 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell small-12">
<h2>Breadcrumbs</h2>
<nav aria-label="You are here:" role="navigation">
<ul class="breadcrumbs">
<li><a href="#0">Home</a></li>
<li><a href="#0">Features</a></li>
<li class="disabled">Gene Splicing</li>
<li>
<span class="show-for-sr">Current: </span> Cloning
</li>
</ul>
</nav>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/button/button-group.html
Generated Vendored Executable
+45
View File
@@ -0,0 +1,45 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
Buttons should be stacked full-width here
<div class="button-group stacked">
<a class="button">One</a>
<a class="button">Two</a>
<a class="button">Three</a>
</div>
Buttons should be auto width here and stack for small
<div class="button-group stacked-for-small">
<a class="button">One</a>
<a class="button">Two</a>
<a class="button">Three</a>
</div>
Buttons should be expanded here and stack for medium and small
<div class="button-group stacked-for-medium expanded">
<a class="button">One</a>
<a class="button">Two</a>
<a class="button">Three</a>
<a class="button">Four</a>
<a class="button">Five</a>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/button/button.html
Generated Vendored Executable
+31
View File
@@ -0,0 +1,31 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h4>These hollow buttons should have arrow color that matches border.</h4>
<button class="dropdown hollow button tiny ">Dropdown Button</button>
<button class="dropdown hollow secondary button small ">Dropdown Button</button>
<button class="dropdown hollow alert button">Dropdown Button</button>
<button class="dropdown hollow success button large ">Dropdown Button</button>
<button class="dropdown hollow warning button expanded ">Dropdown Button</button>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/button/cursor.html
Generated Vendored Executable
+29
View File
@@ -0,0 +1,29 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h2>Buttons</h2>
<button>Default Button</button>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/card/card.html
Generated Vendored Executable
+45
View File
@@ -0,0 +1,45 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation-flex.css" rel="stylesheet" />
</head>
<body>
<div class="row small-up-2 medium-up-3">
<div class="column flex-container">
<div class="card">
<img src="http://placehold.it/300x100">
<div class="card-section">
<h4>Making sure</h4>
<p>card doesnt shrink</p>
</div>
</div>
</div>
<div class="column flex-container">
<div class="card">
<img src="http://placehold.it/300x100">
<div class="card-section">
<h4>Making sure</h4>
<p>images below are spread apart and vertically centered</p>
</div>
<div class="card-divider align-justify align-middle">
<img src="http://placehold.it/15">
<img src="http://placehold.it/15">
<img src="http://placehold.it/15">
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/controls/close-button.html
Generated Vendored Executable
+41
View File
@@ -0,0 +1,41 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Close Button</h1>
<div class="callout" data-closable>
<p>You can so totally close this!</p>
<button class="close-button" aria-label="Dismiss alert" type="button" data-close>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="success callout" data-closable="slide-out-right">
<p>You can close me too, and I close using a Motion UI animation.</p>
<button class="close-button" aria-label="Dismiss alert" type="button" data-close>
<span aria-hidden="true">&times;</span>
</button>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/drilldown/drilldown-menu-auto-height.html
Generated Vendored Executable
+272
View File
@@ -0,0 +1,272 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style>
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell medium-12" style="margin-top: 20px;margin-bottom: 20px;">
<p>Drilldown should auto adjust height even if in Responsive Menu</p>
<div class="title-bar" data-responsive-toggle="example-autoheight" data-hide-for="">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="callout" id="example-autoheight">
<ul class="vertical menu drilldown" data-drilldown data-auto-height="true">
<li> <a href="#">Item</a>
<ul class="vertical menu">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu">
<li><a href="#">Item</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
</ul>
</li>
<li> <a href="#">Item</a>
<ul class="vertical menu">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu">
<li><a href="#">Item</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu">
<li><a href="#">Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
<div class="cell medium-4">
<p>Drilldown should auto adjust height and animate height</p>
<div class="callout">
<ul class="vertical menu drilldown" data-drilldown data-auto-height="true" data-animate-height="true">
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="cell medium-4">
<p>Drilldown should auto adjust height</p>
<div class="callout">
<ul class="vertical menu drilldown" data-drilldown data-auto-height="true" data-close-on-click="true">
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
</ul>
</li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
<div class="cell medium-4">
<p>Drilldown should auto adjust height and change behavior</p>
<div class="callout">
<ul id="mainMenuLeft" class="vertical drilldown menu" data-responsive-menu="drilldown medium-dropdown" data-auto-height="true" data-animate-height="true">
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
</ul>
</li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/drilldown/drilldown-menu-parent-link.html
Generated Vendored Executable
+71
View File
@@ -0,0 +1,71 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style>
.is-submenu-parent-item {
background: #eee;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="medium-6 cell">
<p style="margin-top: 20px;margin-bottom: 20px;">Parent links should be added to the top of their sub-menu as a link.</p>
<ul class="vertical menu drilldown" data-drilldown data-parent-link="true">
<li>
<a href="http://foundation.zurb.com/develop/getting-started.html">Develop</a>
<ul class="vertical menu nested">
<li><a href="http://foundation.zurb.com/sites.html">Foundation for Sites</a></li>
<li><a href="http://foundation.zurb.com/emails.html">Foundation for Email</a></li>
<li><a href="http://foundation.zurb.com/apps.html">Foundation for Apps</a></li>
<li><a href="http://foundation.zurb.com/templates.html">HTML Templates</a></li>
<li><a href="http://foundation.zurb.com/sites/resources.html">Resources</a></li>
<li><a href="http://foundation.zurb.com/develop/building-blocks.html">Building Blocks</a></li>
<li><a href="http://foundation.zurb.com/develop/yeti-launch.html">Yeti Launch</a></li>
<li><a href="http://foundation.zurb.com/develop/contribute.html">Contribute</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
<li>
<a href="http://foundation.zurb.com/develop/getting-started.html">Top level Item</a>
<ul class="vertical menu nested">
<li><a href="http://foundation.zurb.com/sites.html">Foundation for Sites</a></li>
<li><a href="http://foundation.zurb.com/emails.html">Foundation for Email</a></li>
<li><a href="http://foundation.zurb.com/apps.html">Foundation for Apps</a></li>
<li>
<a href="http://foundation.zurb.com/support/support.html">2nd level Item</a>
<ul class="vertical menu nested">
<li><a href="http://foundation.zurb.com/sites.html">Foundation for Sites</a></li>
<li><a href="http://foundation.zurb.com/emails.html">Foundation for Email</a></li>
<li><a href="http://foundation.zurb.com/apps.html">Foundation for Apps</a></li>
<li>
<a href="http://foundation.zurb.com/support/premium-support.html">3rd level Item</a>
<ul class="vertical menu nested">
<li><a href="http://foundation.zurb.com/sites.html">Foundation for Sites</a></li>
<li><a href="http://foundation.zurb.com/emails.html">Foundation for Email</a></li>
<li><a href="http://foundation.zurb.com/apps.html">Foundation for Apps</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/drilldown/drilldown-menu-scroll-top.html
Generated Vendored Executable
+209
View File
@@ -0,0 +1,209 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style>
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell medium-6">
<h4>I scroll to top Position of drilldown element</h4>
<div class="callout">
<ul class="vertical menu drilldown" data-drilldown data-scroll-top="true" data-scroll-top-offset="0" data-scroll-top-element="">
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="grid-x grid-padding-x">
<div class="cell medium-6">
<h4>I scroll to top Position of drilldown element with a -30px offset also have a close on click</h4>
<div class="callout">
<ul class="vertical menu drilldown" data-drilldown data-scroll-top="true" data-scroll-top-offset="-30" data-scroll-top-element="" data-close-on-click="true">
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="grid-x grid-padding-x">
<div class="cell medium-6">
<h4>I am responsive and scroll to top Position of drilldown element with a -30px offset</h4>
<div class="callout">
<ul id="mainMenuLeft" class="vertical drilldown menu" data-responsive-menu="drilldown medium-dropdown" data-scroll-top="true" data-scroll-top-offset="-30">
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/drilldown/drilldown-show-menu.html
Generated Vendored Executable
+111
View File
@@ -0,0 +1,111 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet">
<style>
#menu-a a { background: rgb(255,230,230); }
#menu-b a { background: rgb(230,255,230); }
#menu-c a { background: rgb(230,230,255); }
#menu-x a { background: rgb(255,115,0); }
label { display: inline-block; margin-right: 20px; cursor: pointer; }
label > input[type="radio"] { margin-right: 5px; }
.is-drilldown { margin-bottom: 10px; }
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="auto cell"></div>
<div class="medium-6 cell">
<div class="callout">
<p>should be possible to open any drilldown (sub)menu via JS</p>
<div class="expanded button-group">
<button type="button" class="button" data-show-menu="menu-a">Show A</button>
<button type="button" class="button" data-show-menu="menu-b">Show B</button>
<button type="button" class="button" data-show-menu="menu-c">Show C</button>
<button type="button" class="button" data-show-menu="menu-x">Show X</button>
</div>
<div>
<form>
<label><input type="radio" name="comparison-switch" value="new" checked> Use new showMenu</label>
<label><input type="radio" name="comparison-switch" value="old"> Use current show</label>
</form>
</div>
</div>
<ul class="vertical menu drilldown" data-drilldown data-auto-height="true" id="menu-a">
<li>
<a href="#">Item A1</a>
<ul class="vertical menu nested" id="menu-b">
<li><a href="#">Item B1</a></li>
<li><a href="#">Item B2</a></li>
<li><a href="#">Item B3</a></li>
<li>
<a href="#">Item B4</a>
<ul class="vertical menu nested" id="menu-c">
<li><a href="#">Item C1</a></li>
<li><a href="#">Item C2</a></li>
<li><a href="#">Item C3</a></li>
</ul>
</li>
<li><a href="#">Item B5</a></li>
</ul>
</li>
<li><a href="#">Item A2</a></li>
<li>
<a href="#">Item A3</a>
<ul class="vertical menu nested" id="menu-x">
<li><a href="#">Item X1</a></li>
<li><a href="#">Item X2</a></li>
</ul>
</li>
<li><a href="#">Item A4</a></li>
</ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione id accusantium dolore sequi architecto at soluta, nulla nam? Nemo magnam repellendus iure, ut recusandae voluptatibus, dolores pariatur facere illo! Sapiente.
</p>
</div>
<div class="auto cell"></div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
var demoType;
$(document).on('click', '[data-show-menu]', function(e){
e.preventDefault();
var $menu = $('#'+$(this).data('showMenu'));
if (demoType == 'old') {
if ($menu.is('[data-drilldown]')) {
// No possibility to show root except of hide all
$('[data-drilldown]').foundation('_hideAll');
} else {
$('[data-drilldown]').foundation('_show', $menu.parent('li'));
}
} else {
$('[data-drilldown]').foundation('_showMenu', $menu);
}
});
$(document).on('change', 'input[name="comparison-switch"]', function(){
demoType = $('input[name="comparison-switch"]:checked').val();
console.log('swtiched to ['+demoType+']');
});
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/drilldown/long-titles.html
Generated Vendored Executable
+78
View File
@@ -0,0 +1,78 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style>
.test-drilldown-wrapper {
width: 300px;
}
.is-drilldown-submenu {
background: #eee;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell medium-6">
<p>Submenus should not be cut off at the bottom.</p>
<div class="test-drilldown-wrapper">
<ul class="vertical menu drilldown" data-drilldown>
<li>
<a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
<li><a href="#">Item With the Longest Title You've Probably Ever Seen</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</li>
<li>
<a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
<li><a href="#">Item With the Longest Title You've Probably Ever Seen</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</li>
<li>
<a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
<li><a href="#">Item With the Longest Title You've Probably Ever Seen</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/dropdown-menu/basic-dropdown-menu-rtl.html
Generated Vendored Executable
+59
View File
@@ -0,0 +1,59 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" dir="rtl"> <![endif]-->
<html class="no-js" lang="en" dir="rtl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">
<link href="../assets/css/foundation-rtl.css" rel="stylesheet" />
<style>
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Dropdown Menu: RTL</h1>
<p>First-level dropdowns should anchor to the bottom-right of the parent item.</p>
<p>Second-level dropdowns should anchor to the top-left of the parent item.</p>
<ul class="dropdown menu" data-dropdown-menu>
<li>
<a href="#">Item 1</a>
<ul class="menu">
<li><a href="#">Item 1A</a></li>
<!-- ... -->
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a>
<ul class="menu">
<li><a href="#">Item 4A</a></li>
<li><a href="#">Item 4B</a>
<ul class="menu">
<li><a href="#">Item 4BA</a></li>
</ul>
</li>
<li><a href="#">Item 4C</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/dropdown-menu/dropdown-menu-cross-leave.html
Generated Vendored Executable
+53
View File
@@ -0,0 +1,53 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<ul class="dropdown menu" data-dropdown-menu>
<li>
<a href="#">Item 1</a>
<ul class="menu vertical">
<li><a href="#">Content</a></li>
</ul>
</li>
<li>
<a href="#">Item 2</a>
<ul class="menu vertical">
<li><a href="#">Content</a></li>
</ul>
</li>
<li>
<a href="#">Item 3</a>
<ul class="menu vertical">
<li><a href="#">Content</a></li>
</ul>
</li>
</ul>
<div class="callout">
<p>Move the Mouse on Item 1 to open it, then quicly leave the window though the Item 2 (in a 45 degree angel). Panels should close.</p>
<p>
Checked bug: <a href="https://github.com/zurb/foundation-sites/issues/9427">https://github.com/zurb/foundation-sites/issues/9427</a><br/>
<img src="https://cloud.githubusercontent.com/assets/9939075/20866285/0a24819c-ba2a-11e6-93d8-1a69363f2c57.gif"/>
</p>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/dropdown-menu/left-aligned-dropdown-menu-inside-top-bar-right.html
Generated Vendored Executable
+141
View File
@@ -0,0 +1,141 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en"> <![endif]-->
<html class="no-js" lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style>
</style>
</head>
<body>
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Dropdown Menu: Left aligned</h1>
<p>This dropdown menu is aligned left using data-alignment="left" overriding the effect of the <code>.top-bar-right</code> class.</p>
<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar" id="main-menu">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text"><strong>Site Title</strong></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown" data-alignment="left">
<li>
<a>Item 1</a>
<ul class="menu">
<li><a href="#Item-1A">Item 1A</a></li>
<li>
<a href="#Item-1B">Item 1B</a>
<ul class="menu">
<li><a href="#Item-1Bi">Item 1B i</a></li>
<li><a href="#Item-1Bii">Item 1B ii</a></li>
<li>
<a href="#Item-1Biii">Item 1B iii</a>
<ul class="menu">
<li><a href="#Item-1Biiialpha">Item 1B iii alpha</a></li>
<li><a href="#Item-1Biiiomega">Item 1B iii omega</a></li>
</ul>
</li>
<li>
<a href="#Item-1Biv">Item 1B iv</a>
<ul class="menu">
<li><a href="#Item-1Bivalpha">Item 1B iv alpha</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#Item-1C">Item 1C</a></li>
</ul>
</li>
<li>
<a href="#Item-2">Item 2</a>
<ul class="menu">
<li><a href="#Item-2A">Item 2A</a></li>
<li><a href="#Item-2B">Item 2B</a></li>
</ul>
</li>
<li><a href="#Item-3">Item 3</a></li>
<li><a href="#Item-4">Item 4</a></li>
</ul>
</div>
</div>
<p>This dropdown menu is positioned left regardless of the content before it.</p>
<div class="title-bar" data-responsive-toggle="second-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar" id="second-menu">
<div class="top-bar-left hide-for-small-only">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text"><strong>Site Title</strong></li>
<li class="menu-text">Some long text to push the menu.</li>
<li class="menu-text">You might need to resize the window so that the menu just fits in this line...</li>
</ul>
</div>
<div class="">
<ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown" data-alignment="left">
<li>
<a>Item 1</a>
<ul class="menu">
<li><a href="#Item-1A">Item 1A</a></li>
<li>
<a href="#Item-1B">Item 1B</a>
<ul class="menu">
<li><a href="#Item-1Bi">Item 1B i</a></li>
<li><a href="#Item-1Bii">Item 1B ii</a></li>
<li>
<a href="#Item-1Biii">Item 1B iii</a>
<ul class="menu">
<li><a href="#Item-1Biiialpha">Item 1B iii alpha</a></li>
<li><a href="#Item-1Biiiomega">Item 1B iii omega</a></li>
</ul>
</li>
<li>
<a href="#Item-1Biv">Item 1B iv</a>
<ul class="menu">
<li><a href="#Item-1Bivalpha">Item 1B iv alpha</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#Item-1C">Item 1C</a></li>
</ul>
</li>
<li>
<a href="#Item-2">Item 2</a>
<ul class="menu">
<li><a href="#Item-2A">Item 2A</a></li>
<li><a href="#Item-2B">Item 2B</a></li>
</ul>
</li>
<li><a href="#Item-3">Item 3</a></li>
<li><a href="#Item-4">Item 4</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/dropdown-menu/right-aligned-dropdown-menu.html
Generated Vendored Executable
+140
View File
@@ -0,0 +1,140 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" dir="rtl"> <![endif]-->
<html class="no-js" lang="en" dir="rtl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style>
</style>
</head>
<body>
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Dropdown Menu: Right aligned</h1>
<p>This dropdown menu is aligned right using <code>.top-bar-right</code> class.</p>
<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar" id="main-menu">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text"><strong>Site Title</strong></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
<li>
<a>Item 1</a>
<ul class="menu">
<li><a href="#Item-1A">Item 1A</a></li>
<li>
<a href="#Item-1B">Item 1B</a>
<ul class="menu">
<li><a href="#Item-1Bi">Item 1B i</a></li>
<li><a href="#Item-1Bii">Item 1B ii</a></li>
<li>
<a href="#Item-1Biii">Item 1B iii</a>
<ul class="menu">
<li><a href="#Item-1Biiialpha">Item 1B iii alpha</a></li>
<li><a href="#Item-1Biiiomega">Item 1B iii omega</a></li>
</ul>
</li>
<li>
<a href="#Item-1Biv">Item 1B iv</a>
<ul class="menu">
<li><a href="#Item-1Bivalpha">Item 1B iv alpha</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#Item-1C">Item 1C</a></li>
</ul>
</li>
<li>
<a href="#Item-2">Item 2</a>
<ul class="menu">
<li><a href="#Item-2A">Item 2A</a></li>
<li><a href="#Item-2B">Item 2B</a></li>
</ul>
</li>
<li><a href="#Item-3">Item 3</a></li>
<li><a href="#Item-4">Item 4</a></li>
</ul>
</div>
</div>
<p>This dropdown menu is positioned right just by the content before it.</p>
<div class="title-bar" data-responsive-toggle="second-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar" id="second-menu">
<div class="top-bar-left hide-for-small-only">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text"><strong>Site Title</strong></li>
<li class="menu-text">Some long text to push the menu.</li>
<li class="menu-text">You might need to resize the window so that the menu just fits in this line...</li>
</ul>
</div>
<div class="">
<ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
<li>
<a>Item 1</a>
<ul class="menu">
<li><a href="#Item-1A">Item 1A</a></li>
<li>
<a href="#Item-1B">Item 1B</a>
<ul class="menu">
<li><a href="#Item-1Bi">Item 1B i</a></li>
<li><a href="#Item-1Bii">Item 1B ii</a></li>
<li>
<a href="#Item-1Biii">Item 1B iii</a>
<ul class="menu">
<li><a href="#Item-1Biiialpha">Item 1B iii alpha</a></li>
<li><a href="#Item-1Biiiomega">Item 1B iii omega</a></li>
</ul>
</li>
<li>
<a href="#Item-1Biv">Item 1B iv</a>
<ul class="menu">
<li><a href="#Item-1Bivalpha">Item 1B iv alpha</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#Item-1C">Item 1C</a></li>
</ul>
</li>
<li>
<a href="#Item-2">Item 2</a>
<ul class="menu">
<li><a href="#Item-2A">Item 2A</a></li>
<li><a href="#Item-2B">Item 2B</a></li>
</ul>
</li>
<li><a href="#Item-3">Item 3</a></li>
<li><a href="#Item-4">Item 4</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/dropdown-menu/submenu-mouse-reenter.html
Generated Vendored Executable
+64
View File
@@ -0,0 +1,64 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<div class="callout">Move the Mouse on Item 1 -> Item 1B -> Item 1B iii -> Submenu, then leave the Pane and quick reenter it before it close. Pane should stay open</div>
<ul class="dropdown menu" data-dropdown-menu>
<li>
<a>Item 1</a>
<ul class="menu">
<li><a href="#">Item 1A</a></li>
<li>
<a href="#">Item 1B</a>
<ul class="menu">
<li><a href="#">Item 1B i</a></li>
<li><a href="#">Item 1B ii</a></li>
<li>
<a href="#">Item 1B iii</a>
<ul class="menu">
<li><a href="#">Item 1B iii alpha</a></li>
<li><a href="#">Item 1B iii omega</a></li>
</ul>
</li>
<li>
<a href="#">Item 1B iv</a>
<ul class="menu">
<li><a href="#">Item 1B iv alpha</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item 1C</a></li>
</ul>
</li>
<li>
<a href="#">Item 2</a>
<ul class="menu">
<li><a href="#">Item 2A</a></li>
<li><a href="#">Item 2B</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/dropdown/basic-dropdown-rtl.html
Generated Vendored Executable
+58
View File
@@ -0,0 +1,58 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" dir="rtl"> <![endif]-->
<html class="no-js" lang="en" dir="rtl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">
<link href="../assets/css/foundation-rtl.css" rel="stylesheet" />
<style>
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Dropdown: RTL</h1>
<p>Bottom aligned:</p>
<button class="button" type="button" data-toggle="example-dropdown">Toggle Dropdown</button>
<div class="dropdown-pane" id="example-dropdown" data-dropdown data-auto-focus="true">
<p>This is a dropdown.</p>
</div>
<button class="button" type="button" data-toggle="example-dropdown-1">Hoverable Dropdown</button>
<div class="dropdown-pane" id="example-dropdown-1" data-dropdown data-hover="true" data-hover-pane="true">
<p>This is a dropdown.</p>
</div>
<p>Top aligned:</p>
<button class="button" type="button" data-toggle="example-dropdown-2">Toggle Dropdown</button>
<div class="dropdown-pane top" id="example-dropdown-2" data-dropdown data-auto-focus="true">
<p>This is a dropdown.</p>
</div>
<button class="button" type="button" data-toggle="example-dropdown-3">Hoverable Dropdown</button>
<div class="dropdown-pane top" id="example-dropdown-3" data-dropdown data-hover="true" data-hover-pane="true">
<p>This is a dropdown.</p>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/dropdown/close-on-click.html
Generated Vendored Executable
+42
View File
@@ -0,0 +1,42 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Dropdown: closeOnClick option</h1>
<p>This dropdown will only close if you click the button again.</p>
<button class="dropdown button" type="button" data-toggle="dropdown1">Toggle Dropdown</button>
<div id="dropdown1" class="dropdown-pane" data-dropdown>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita mollitia veritatis dicta aspernatur vel reiciendis, fugit. Similique delectus laboriosam aperiam, unde debitis at minus hic rerum repudiandae, officiis iusto deleniti!</p>
</div>
<hr>
<p>This dropdown will close if you click anywhere outside of it.</p>
<button class="dropdown button" type="button" data-toggle="dropdown2">Toggle Dropdown</button>
<div id="dropdown2" class="dropdown-pane" data-dropdown data-close-on-click="true">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita mollitia veritatis dicta aspernatur vel reiciendis, fugit. Similique delectus laboriosam aperiam, unde debitis at minus hic rerum repudiandae, officiis iusto deleniti!</p>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/dropdown/dropdown-on-input.html
Generated Vendored Executable
+38
View File
@@ -0,0 +1,38 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Dropdown: Attached to an input</h1>
<p>When the Dropdown is attached to an input element, it should not receive focus when a space is entered into the input..</p>
<div class="row">
<div class="column">
<input type="text" data-toggle="dropdown" aria-describedby="dropdown" placeholder="Click to open Dropdown">
<div class="dropdown-pane" id="dropdown" data-dropdown data-close-on-click="true">
<p>Now press space to see if I receive focus. This should not be the case.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/dropdown/explicit-positioning.html
Generated Vendored Executable
+135
View File
@@ -0,0 +1,135 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Dropdown: Explicit Positioning Content - no offsets</h1>
<p>These dropdowns test various positioning and alignments. Valid
positions are left/right/top/bottom. Valid alignments are
left/right/top/bottom/center. Left align means left sides should line up.
Right align means right sides should line up. Center align means centers should line up.
</p>
<h4>Top and Bottom positioned</h4>
<div class="grid-x grid-padding-x">
<div class="cell medium-4">
<p>Bottom Left</p>
<button class="button" type="button" data-toggle="example-dropdown-bottom-left">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="bottom" data-alignment="left" id="example-dropdown-bottom-left" data-dropdown data-auto-focus="true">
<p>This dropdown has position bottom and alignment left should align with its top left corner at the bottom left of the button</p>
</div>
</div>
<div class="cell medium-4">
<p>Bottom Center</p>
<button class="button" type="button" data-toggle="example-dropdown-bottom-center">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="bottom" data-alignment="center" id="example-dropdown-bottom-center" data-dropdown data-auto-focus="true">
<p>This dropdown has position bottom and alignment center should align below the button with its center aligned with the center of the button</p>
</div>
</div>
<div class="cell medium-4">
<p>Bottom Right</p>
<button class="button" type="button" data-toggle="example-dropdown-bottom-right">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="bottom" data-alignment="right" id="example-dropdown-bottom-right" data-dropdown data-auto-focus="true">
<p>This dropdown has position bottom and alignment right should align with its top right corner at the bottom right of the button</p>
</div>
</div>
<div class="cell medium-4">
<p>Top Left</p>
<button class="button" type="button" data-toggle="example-dropdown-top-left">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="top" data-alignment="left" id="example-dropdown-top-left" data-dropdown data-auto-focus="true">
<p>This dropdown has position top and alignment left should align with its bottom left corner at the top left of the button</p>
</div>
</div>
<div class="cell medium-4">
<p>Top Center</p>
<button class="button" type="button" data-toggle="example-dropdown-top-center">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="top" data-alignment="center" id="example-dropdown-top-center" data-dropdown data-auto-focus="true">
<p>This dropdown has position top and alignment center should align above with its center aligned with the center of the button</p>
</div>
</div>
<div class="cell medium-4">
<p>Top Right</p>
<button class="button" type="button" data-toggle="example-dropdown-top-right">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="top" data-alignment="right" id="example-dropdown-top-right" data-dropdown data-auto-focus="true">
<p>This dropdown has position top and alignment right should align with its bottom right corner at the top right of the button</p>
</div>
</div>
</div>
<h4>Left and Right Positioned</h4>
<div class="grid-x grid-padding-x">
<div class="cell medium-4">
<p>Right Top</p>
<button class="button" type="button" data-toggle="example-dropdown-right-top">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="right" data-alignment="top" id="example-dropdown-right-top" data-dropdown data-auto-focus="true">
<p>This dropdown has position right and alignment top should align with its top left corner at the top right of the button</p>
</div>
</div>
<div class="cell medium-4">
<p>Left Top</p>
<button class="button" type="button" data-toggle="example-dropdown-left-top">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="left" data-alignment="top" id="example-dropdown-left-top" data-dropdown data-auto-focus="true">
<p>This dropdown has position left and alignment top should align with its top right corner at the top left of the button</p>
</div>
</div>
<div class="cell medium-4">
<p>Right Center</p>
<button class="button" type="button" data-toggle="example-dropdown-right-center">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="right" data-alignment="center" id="example-dropdown-right-center" data-dropdown data-auto-focus="true">
<p>This dropdown has position right and alignment center should align to the right of the button with the center of the dropdown vertically aligned with the center of the button</p>
</div>
</div>
<div class="cell medium-4">
<p>Left Center</p>
<button class="button" type="button" data-toggle="example-dropdown-left-center">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="left" data-alignment="center" id="example-dropdown-left-center" data-dropdown data-auto-focus="true">
<p>This dropdown has position left and alignment center should align to the left of the button with the center of the dropdown vertically aligned with the center of the button</p>
</div>
</div>
<div class="cell medium-4">
<p>Right Bottom</p>
<button class="button" type="button" data-toggle="example-dropdown-right-bottom">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="right" data-alignment="bottom" id="example-dropdown-right-bottom" data-dropdown data-auto-focus="true">
<p>This dropdown has position right and alignment bottom should align with its bottom left corner at the bottom right of the button</p>
</div>
</div>
<div class="cell medium-4">
<p>Left Bottom</p>
<button class="button" type="button" data-toggle="example-dropdown-left-bottom">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="left" data-alignment="bottom" id="example-dropdown-left-bottom" data-dropdown data-auto-focus="true">
<p>This dropdown has position left and alignment bottom should align with its bottom right corner at the bottom left of the button</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/dropdown/in-top-bar.html
Generated Vendored Executable
+60
View File
@@ -0,0 +1,60 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Dropdown: Inside Top Bar</h1>
<p>Text fields inside of a top bar should not be super long.</p>
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Site Title</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li>
<button class="button" type="button" data-toggle="example-dropdown">Toggle Dropdown</button>
<div class="dropdown-pane" id="example-dropdown" data-dropdown data-auto-focus="true">
Example form in a dropdown.
<form>
<div class="row">
<div class="medium-6 columns">
<label>Name
<input type="text" placeholder="Kirk, James T.">
</label>
</div>
<div class="medium-6 columns">
<label>Rank
<input type="text" placeholder="Captain">
</label>
</div>
</div>
</form>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/dropdown/long.html
Generated Vendored Executable
+56
View File
@@ -0,0 +1,56 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Dropdown: Long Content</h1>
<p>This dropdown should not go full-width, even if its contents are higher than the width of the window.</p>
<button class="button" type="button" data-toggle="example-dropdown">Toggle Dropdown</button>
<div class="dropdown-pane" id="example-dropdown" data-dropdown data-auto-focus="true">
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/dropdown/mouse-on-browser-ui.html
Generated Vendored Executable
+50
View File
@@ -0,0 +1,50 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Dropdown with UI elements</h1>
<ul>
<li>1. Dropdown should stay open when the mouse goes on the input's autocomplete pane.</li>
<li>2. Dropdown should stay open when the mouse reenter in the dropdown from the autocomplete pane.</li>
<li>3. Dropdown should close when the nouse leave the dropdown from the autocomplete pane.</li>
</ul>
<button class="button" type="button" data-toggle="example-dropdown">Dropdown opening on hover</button>
<div class="dropdown-pane" id="example-dropdown" data-dropdown data-hover="true" data-hover-pane="true">
<form action="#" method="post">
<div class="row">
<div>
In order to test [3], there should be enough autocomplete suggestions for the autocomplete pane to overflow from the dropdown.
<input type="email" placeholder="Double-click to show autocomplete" autocomplete="email"/>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/dropdown/offsets.html
Generated Vendored Executable
+137
View File
@@ -0,0 +1,137 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Dropdown: Explicit Positioning Content - with offsets</h1>
<p>These dropdowns test various positioning and alignments WITH OFFSETS.
Valid positions are left/right/top/bottom. Valid alignments are
left/right/top/bottom/center. Left align means left sides should line up.
Right align means right sides should line up. Center align means centers should line up.
Positive Offsets should always be applied in a direction to create
space between the anchor and the dropdown.
</p>
<h4>Top and Bottom positioned</h4>
<div class="grid-x grid-padding-x">
<div class="cell medium-4">
<p>Bottom Left</p>
<button class="button" type="button" data-toggle="example-dropdown-bottom-left">Toggle Dropdown</button>
<div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="bottom" data-alignment="left" id="example-dropdown-bottom-left" data-dropdown data-auto-focus="true">
<p>This offset should push right and down.</p>
</div>
</div>
<div class="cell medium-4">
<p>Bottom Center</p>
<button class="button" type="button" data-toggle="example-dropdown-bottom-center">Toggle Dropdown</button>
<div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="bottom" data-alignment="center" id="example-dropdown-bottom-center" data-dropdown data-auto-focus="true">
<p>This offset should push down and to the global right (right)</p>
</div>
</div>
<div class="cell medium-4">
<p>Bottom Right</p>
<button class="button" type="button" data-toggle="example-dropdown-bottom-right">Toggle Dropdown</button>
<div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="bottom" data-alignment="right" id="example-dropdown-bottom-right" data-dropdown data-auto-focus="true">
<p>This offset should push left and down.</p>
</div>
</div>
<div class="cell medium-4">
<p>Top Left</p>
<button class="button" type="button" data-toggle="example-dropdown-top-left">Toggle Dropdown</button>
<div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="top" data-alignment="left" id="example-dropdown-top-left" data-dropdown data-auto-focus="true">
<p>This offset should push right and up.</p>
</div>
</div>
<div class="cell medium-4">
<p>Top Center</p>
<button class="button" type="button" data-toggle="example-dropdown-top-center">Toggle Dropdown</button>
<div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="top" data-alignment="center" id="example-dropdown-top-center" data-dropdown data-auto-focus="true">
<p>This offset should push up and to the global right (right)</p>
</div>
</div>
<div class="cell medium-4">
<p>Top Right</p>
<button class="button" type="button" data-toggle="example-dropdown-top-right">Toggle Dropdown</button>
<div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="top" data-alignment="right" id="example-dropdown-top-right" data-dropdown data-auto-focus="true">
<p>This offset should push left and up.</p>
</div>
</div>
</div>
<h4>Left and Right Positioned</h4>
<div class="grid-x grid-padding-x">
<div class="cell medium-4">
<p>Right Top</p>
<button class="button" type="button" data-toggle="example-dropdown-right-top">Toggle Dropdown</button>
<div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="right" data-alignment="top" id="example-dropdown-right-top" data-dropdown data-auto-focus="true">
<p>This offset should push right and down.</p>
</div>
</div>
<div class="cell medium-4">
<p>Left Top</p>
<button class="button" type="button" data-toggle="example-dropdown-left-top">Toggle Dropdown</button>
<div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="left" data-alignment="top" id="example-dropdown-left-top" data-dropdown data-auto-focus="true">
<p>This offset should push left and down.</p>
</div>
</div>
<div class="cell medium-4">
<p>Right Center</p>
<button class="button" type="button" data-toggle="example-dropdown-right-center">Toggle Dropdown</button>
<div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="right" data-alignment="center" id="example-dropdown-right-center" data-dropdown data-auto-focus="true">
<p>This offset should push right and down</p>
</div>
</div>
<div class="cell medium-4">
<p>Left Center</p>
<button class="button" type="button" data-toggle="example-dropdown-left-center">Toggle Dropdown</button>
<div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="left" data-alignment="center" id="example-dropdown-left-center" data-dropdown data-auto-focus="true">
<p>This offset should push left and down</p>
</div>
</div>
<div class="cell medium-4">
<p>Right Bottom</p>
<button class="button" type="button" data-toggle="example-dropdown-right-bottom">Toggle Dropdown</button>
<div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="right" data-alignment="bottom" id="example-dropdown-right-bottom" data-dropdown data-auto-focus="true">
<p>This offset should push right and up.</p>
</div>
</div>
<div class="cell medium-4">
<p>Left Bottom</p>
<button class="button" type="button" data-toggle="example-dropdown-left-bottom">Toggle Dropdown</button>
<div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="left" data-alignment="bottom" id="example-dropdown-left-bottom" data-dropdown data-auto-focus="true">
<p>This offset should push left and up.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/dropdown/open-the-same-dropdown.html
Generated Vendored Executable
+43
View File
@@ -0,0 +1,43 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" dir="rtl"> <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link href="../assets/css/foundation.css" rel="stylesheet" />
<title>Foundation for Sites Testing</title>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Dropdown: Open The Same</h1>
<p>Clickable:</p>
<button class="button" type="button" data-toggle="example-dropdown">Toggle Dropdown</button>
<button class="button" type="button" data-toggle="example-dropdown">Toggle Dropdown</button>
<div class="dropdown-pane" id="example-dropdown" data-dropdown data-auto-focus="true">
<p>This is a dropdown.</p>
</div>
<p>Hoverable:</p>
<button class="button" type="button" data-toggle="example-dropdown-1">Hoverable Dropdown</button>
<button class="button" type="button" data-toggle="example-dropdown-1">Hoverable Dropdown</button>
<div class="dropdown-pane" id="example-dropdown-1" data-dropdown data-hover="true" data-hover-pane="true">
Just some junk that needs to be said. Or not. Your choice.
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/dropdown/overflow-right-left-allowed.html
Generated Vendored Executable
+58
View File
@@ -0,0 +1,58 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h4>Right and Left Overflow Allowed</h4>
<div class="grid-x grid-padding-x" style="background-color:#ddd;">
<div class="cell medium-6">
<p>Top Right Default Behavior Overflow Allowed</p>
<button class="button" type="button" data-toggle="example2-dropdown-top-right-allowed">Toggle Dropdown</button>
<div class="dropdown-pane" data-allow-overlap="true" data-parent-class="row" data-position="top" data-alignment="right" id="example2-dropdown-top-right-allowed" data-dropdown data-auto-focus="true">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, molestias libero autem expedita placeat sequi.</p>
</div>
</div>
<div class="cell medium-6">
<p>Top Left Default Behavior Overflow Allowed</p>
<button class="button float-right" type="button" data-toggle="example2-dropdown-top-left-allowed">Toggle Dropdown</button>
<div class="dropdown-pane" data-allow-overlap="true" data-parent-class="row" data-position="top" data-alignment="left" id="example2-dropdown-top-left-allowed" data-dropdown data-auto-focus="true">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium iure dolorem, earum maiores eos?</p>
</div>
</div>
<div class="cell medium-6">
<p>Bottom Right Default Behavior Overflow Allowed</p>
<button class="button" type="button" data-toggle="example2-dropdown-bottom-right-allowed">Toggle Dropdown</button>
<div class="dropdown-pane" data-allow-overlap="true" data-parent-class="row" data-position="bottom" data-alignment="right" id="example2-dropdown-bottom-right-allowed" data-dropdown data-auto-focus="true">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime tempora officiis quam, libero quo cumque!</p>
</div>
</div>
<div class="cell medium-6">
<p>Bottom Left Default Behavior Overflow Allowed</p>
<button class="button float-right" type="button" data-toggle="example2-dropdown-bottom-left-allowed">Toggle Dropdown</button>
<div class="dropdown-pane" data-allow-overlap="true" data-parent-class="row" data-position="bottom" data-alignment="left" id="example2-dropdown-bottom-left-allowed" data-dropdown data-auto-focus="true">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt nostrum tempora harum dolore consectetur reiciendis.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/dropdown/overflow-right-left.html
Generated Vendored Executable
+58
View File
@@ -0,0 +1,58 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h4>Right and Left (no overflow)</h4>
<div class="grid-x grid-padding-x" style="background-color:#ddd;">
<div class="cell medium-6">
<p>Top Right Default Behavior (no overflow)</p>
<button class="button" type="button" data-toggle="example2-dropdown-top-right">Toggle Dropdown</button>
<div class="dropdown-pane" data-parent-class="row" data-position="top" data-alignment="right" id="example2-dropdown-top-right" data-dropdown data-auto-focus="true">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, molestias libero autem expedita placeat sequi.</p>
</div>
</div>
<div class="cell medium-6">
<p>Top Left Default Behavior (no overflow)</p>
<button class="button float-right" type="button" data-toggle="example2-dropdown-top-left">Toggle Dropdown</button>
<div class="dropdown-pane" data-parent-class="row" data-position="top" data-alignment="left" id="example2-dropdown-top-left" data-dropdown data-auto-focus="true">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium iure dolorem, earum maiores eos?</p>
</div>
</div>
<div class="cell medium-6">
<p>Bottom Right Default Behavior (no overflow)</p>
<button class="button" type="button" data-toggle="example2-dropdown-bottom-right">Toggle Dropdown</button>
<div class="dropdown-pane" data-parent-class="row" data-position="bottom" data-alignment="right" id="example2-dropdown-bottom-right" data-dropdown data-auto-focus="true">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime tempora officiis quam, libero quo cumque!</p>
</div>
</div>
<div class="cell medium-6">
<p>Bottom Left Default Behavior (no overflow)</p>
<button class="button float-right" type="button" data-toggle="example2-dropdown-bottom-left">Toggle Dropdown</button>
<div class="dropdown-pane" data-parent-class="row" data-position="bottom" data-alignment="left" id="example2-dropdown-bottom-left" data-dropdown data-auto-focus="true">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt nostrum tempora harum dolore consectetur reiciendis.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/dropdown/overflow.html
Generated Vendored Executable
+97
View File
@@ -0,0 +1,97 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Dropdown: Overflow Handling</h1>
<p>These dropdowns test various overflow situations.</p>
<h4>Right and Left Overflow</h4>
<div class="row small-up-1 medium-up-2" style="background-color:#ddd; padding: 20px 0;">
<div class="column">
<p>Bottom Right Default Behavior (no overflow)</p>
<button class="button" type="button" data-toggle="example-dropdown-bottom-right">Toggle Dropdown</button>
<div class="dropdown-pane" data-parent-class="row" data-position="bottom" data-alignment="right" id="example-dropdown-bottom-right" data-dropdown data-auto-focus="true">
<p>This dropdown should be on the bottom aligned with the left, all inside the container</p>
</div>
</div>
<div class="column">
<p>Bottom Left Default Behavior (no overflow)</p>
<button class="button float-right" type="button" data-toggle="example-dropdown-bottom-left">Toggle Dropdown</button>
<div class="dropdown-pane" data-parent-class="row" data-position="bottom" data-alignment="left" id="example-dropdown-bottom-left" data-dropdown data-auto-focus="true">
<p>This dropdown should be on the bottom aligned with the right, all inside the container</p>
</div>
</div>
<div class="column">
<p>Bottom Right Overflow Allowed</p>
<button class="button" type="button" data-toggle="example-dropdown-bottom-right-overflow">Toggle Dropdown</button>
<div class="dropdown-pane" data-allow-overlap="true" data-parent-class="row" data-position="bottom" data-alignment="right" id="example-dropdown-bottom-right-overflow" data-dropdown data-auto-focus="true">
<p>This dropdown should be on the bottom aligned with the right, breaking out of the container</p>
</div>
</div>
<div class="column">
<p>Bottom Left Overflow Allowed</p>
<button class="button float-right" type="button" data-toggle="example-dropdown-bottom-left-overflow">Toggle Dropdown</button>
<div class="dropdown-pane" data-allow-overlap="true" data-parent-class="row" data-position="bottom" data-alignment="left" id="example-dropdown-bottom-left-overflow" data-dropdown data-auto-focus="true">
<p>This dropdown should be on the bottom aligned with the left, breaking out of the container</p>
</div>
</div>
</div>
<h4>Bottom and Top Overflow</h4>
<div class="row small-up-2" style="background-color:#ddd;">
<div class="column">
<p>Right Bottom Default Behavior (no overflow)</p>
<button class="button" type="button" data-toggle="example-dropdown-right-bottom">Toggle Dropdown</button>
<div class="dropdown-pane" data-parent-class="row" data-position="right" data-alignment="bottom" id="example-dropdown-right-bottom" data-dropdown data-auto-focus="true">
<p>This dropdown should be on the right aligned with the top of the button after realigning</p>
</div>
</div>
<div class="column">
<p>Left Bottom Default Behavior (no overflow)</p>
<button class="button float-right" type="button" data-toggle="example-dropdown-left-bottom">Toggle Dropdown</button>
<div class="dropdown-pane" data-parent-class="row" data-position="left" data-alignment="bottom" id="example-dropdown-left-bottom" data-dropdown data-auto-focus="true">
<p>This dropdown should be on the left aligned with the top of the button after realigning</p>
</div>
</div>
<div class="column">
<p>Right Top Default Behavior (no overflow)</p>
<button class="button" type="button" data-toggle="example-dropdown-right-top">Toggle Dropdown</button>
<div class="dropdown-pane" data-parent-class="row" data-position="right" data-alignment="top" id="example-dropdown-right-top" data-dropdown data-auto-focus="true">
<p>This dropdown should be on the right aligned with the bottom of the button after realigning</p>
</div>
</div>
<div class="column">
<p>Left Top Default Behavior (no overflow)</p>
<button class="button float-right" type="button" data-toggle="example-dropdown-left-top">Toggle Dropdown</button>
<div class="dropdown-pane" data-parent-class="row" data-position="left" data-alignment="top" id="example-dropdown-left-top" data-dropdown data-auto-focus="true">
<p>This dropdown should be on the left aligned with the bottom of the button after realigning</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/equalizer/equalizer-events.html
Generated Vendored Executable
+91
View File
@@ -0,0 +1,91 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h4>I Fire preequalized and postequalized on medium-up and also after _pauseEvents</h4>
<div class="grid-x grid-padding-x" data-equalizer data-equalize-on-stack="false" data-equalize-on="medium" id="equalizer1">
<div class="small-12 medium-3 cell">
<div class="callout">
<div class="callout" data-equalizer-watch>Test</div>
</div>
</div>
<div class="small-12 medium-3 cell">
<div class="callout">
<div class="callout" data-equalizer-watch>Test</div>
</div>
</div>
<div class="small-12 medium-3 cell">
<div class="callout">
<div class="callout" data-equalizer-watch>Test</div>
</div>
</div>
<div class="small-12 medium-3 cell">
<div class="callout">
<div class="callout" data-equalizer-watch>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga officia iste ut distinctio magni accusantium, optio ipsa at cupiditate sequi!</div>
</div>
</div>
</div>
<h4>I Fire preequalized, preequalizedrow, postequalizedrow, postequalized, resizeme</h4>
<div class="grid-x grid-padding-x" data-equalizer data-equalize-by-row="true" id="equalizer2">
<div class="small-12 medium-6 cell">
<div class="callout">
<div class="callout" data-equalizer-watch>Test</div>
</div>
</div>
<div class="small-12 medium-6 cell">
<div class="callout">
<div class="callout" data-equalizer-watch>Test</div>
</div>
</div>
<div class="small-12 medium-6 cell">
<div class="callout">
<div class="callout" data-equalizer-watch>Test</div>
</div>
</div>
<div class="small-12 medium-6 cell">
<div class="callout">
<div class="callout" data-equalizer-watch>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dolore inventore quibusdam deleniti a ipsa laborum, illo, soluta quas velit?</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$('[data-equalizer]').on('preequalized.zf.equalizer',function(e){
console.log($(this).attr('id')+' '+e.type);
});
$('[data-equalizer]').on('preequalizedrow.zf.equalizer',function(e){
console.log($(this).attr('id')+' '+e.type);
});
$('[data-equalizer]').on('postequalizedrow.zf.equalizer',function(e){
console.log($(this).attr('id')+' '+e.type);
});
$('[data-equalizer]').on('postequalized.zf.equalizer',function(e){
console.log($(this).attr('id')+' '+e.type);
});
$('[data-equalizer]').on('resizeme.zf.trigger',function(e){
console.log($(this).attr('id')+' '+e.type);
});
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/flex-grid/column-row.html
Generated Vendored Executable
+27
View File
@@ -0,0 +1,27 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation-flex.css" rel="stylesheet" />
</head>
<body>
<div class="row column">
<style>.row.column {border: 1px solid #333;}</style>
<h1>Flex Grid: Column Row</h1>
<p>This text is inside a combined column/row.</p>
<p>An element with the classes <code>.row</code> and <code>.column</code> should have <code>display: block</code> and not <code>display: flex</code>, so the elements inside flow normally.</p>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/flex-grid/nesting.html
Generated Vendored Executable
+45
View File
@@ -0,0 +1,45 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation-flex.css" rel="stylesheet" />
<style>
.test-1 {
border: 1px solid #333;
}
.test-2 {
background: #ccc;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<h1>Flex Grid: Nesting</h1>
<p>These are two nested grids. They should both fill the width of the window.</p>
</div>
</div>
<div class="row expanded test-1">
<div class="column">
<div class="row test-2">
<div class="column">
<p>This is a grid.</p>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/flex-grid/top-bar.html
Generated Vendored Executable
+50
View File
@@ -0,0 +1,50 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation-flex.css" rel="stylesheet" />
</head>
<body>
<div class="top-bar">
<div class="top-bar-title">
This should be left aligned as a title
</div>
<div class="top-bar-left">
This should be left aligned next to title
</div>
<div class="top-bar-right">
This should be right aligned
</div>
</div>
<hr/>
<div class="top-bar">
<div class="top-bar-title">
This should be left aligned as a title
</div>
<div class="top-bar-right">
This should be right aligned
</div>
</div>
<hr/>
<div class="top-bar">
<div class="top-bar-left">
This should be left aligned
</div>
<div class="top-bar-right">
This should be right aligned
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/flex-grid/unstack-block-grid.html
Generated Vendored Executable
+50
View File
@@ -0,0 +1,50 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation-flex.css" rel="stylesheet" />
<style>
.column .column {
background: #eee;
}
.column .column .column {
background: #ddd;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<h1>Flex Grid: Unstack and Block Grid</h1>
<p>The top-level row has the class <code>.medium-unstack</code>, which means child columns stack on small, and sit side-by-side on medium screens and up.</p>
<p>The nested row has the class <code>.up-3</code>, which means its columns are 33% width no matter the screen size.</p>
<p>These two features should not interact. The two top-level columns always stack on small, and the three nested columns always stay the exact same percentage width.</p>
<div class="row medium-unstack">
<div class="column">
<strong>Column One</strong>
<div class="row up-3">
<div class="column">Block Grid Column One</div>
<div class="column">Block Grid Column Two</div>
<div class="column">Block Grid Column Three</div>
</div>
</div>
<div class="column"><strong>Column Two</strong></div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/form/input-group-float.html
Generated Vendored Executable
+35
View File
@@ -0,0 +1,35 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation-float.css" rel="stylesheet" />
</head>
<body>
<div class="row column">
<h3>FLOAT Control Group: input-group height &amp; vertical alignment.</h3>
<p>Assure that all controls are flush at the top and bottom. Pay special
attention to the Submit button.</p>
</div>
<div class="medium-4 column">
<div class="input-group">
<span class="input-group-label">$</span>
<input class="input-group-field" type="number">
<div class="input-group-button">
<input type="submit" class="button" value="Submit">
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/form/input-group-xygrid.html
Generated Vendored Executable
+40
View File
@@ -0,0 +1,40 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="medium-12 cell">
<h3>XY Grid-Control Group: input-group height &amp; vertical alignment.</h3>
<p>Assure that all controls are flush at the top and bottom. Pay special
attention to the Submit button.</p>
</div>
<div class="medium-4 cell">
<div class="input-group">
<span class="input-group-label">$</span>
<input class="input-group-field" type="number">
<div class="input-group-button">
<input type="submit" class="button" value="Submit">
</div>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/form/select-icon.html
Generated Vendored Executable
+33
View File
@@ -0,0 +1,33 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="medium-12 cell">
<h3>Select Icon</h3>
</div>
<div class="medium-4 cell">
<select>
<option>ZURB</option>
<option>Foundation</option>
</select>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/grid/centered-columns.html
Generated Vendored Executable
+62
View File
@@ -0,0 +1,62 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="row column">
<h1>Centered Columns</h1>
</div>
<div class="row">
<div class="medium-7 medium-centered columns">
<p style="background-color:#eee;">All these grey columns should be centered, even the last one.</p>
</div>
</div>
<div class="row">
<div class="medium-7 medium-centered columns">
<p style="background-color:#eee;">All these grey columns should be centered, even the last one.</p>
</div>
<div class="medium-7 medium-centered columns">
<p style="background-color:#eee;">All these grey columns should be centered, even the last one.</p>
</div>
<div class="medium-7 medium-centered columns">
<p style="background-color:#eee;">All these grey columns should be centered, even the last one.</p>
</div>
<div class="medium-7 medium-centered columns">
<p style="background-color:#eee;">All these grey columns should be centered, even the last one.</p>
</div>
</div>
<div class="row column"><hr></div>
<div class="row">
<div class="medium-5 columns">
<p style="background-color:#aee;">This blue column is not centered.</p>
</div>
<div class="medium-7 medium-centered columns">
<p style="background-color:#fbb;">This pink column should be centered and clear the blue column.</p>
</div>
<div class="medium-5 columns">
<p style="background-color:#aee;">This blue column is not centered.</p>
</div>
<div class="medium-5 columns">
<p style="background-color:#aee;">This blue column is not centered.</p>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/grid/collapse-nesting.html
Generated Vendored Executable
+78
View File
@@ -0,0 +1,78 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation-flex.css" rel="stylesheet" />
<style>
.bred {
border: 3px solid red;
}
.bgreen {
border: 3px solid green;
}
.byellow {
border: 3px solid orange;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<h1>Grid and Flex Grid: Nesting in collapsed row</h1>
<p>These are nested standard and collapsed rows. All rows should be aligned on the right and left.</p>
</div>
</div>
<div class="row collapse" >
<div class="column small-12" >
<div class="bred" >Single column in a Collapsed Row
<div class="row" >
<div class="column small-12" >
<div class="bgreen" >Single column in a Row
<div class="row" >
<div class="column small-6" >
<div class="bred" >Two columns in a Row
</div>
</div>
<div class="column small-6" >
<div class="bred" >Two columns in a Row
</div>
</div>
</div>
<div class="row collapse" >
<div class="column small-6" >
<div class="byellow" >Two columns in a Collapsed Row
</div>
</div>
<div class="column small-6" >
<div class="byellow" >Two columns in a Collapsed Row
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/grid/nesting.html
Generated Vendored Executable
+45
View File
@@ -0,0 +1,45 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style>
.test-1 {
background: red;
}
.test-2 {
background: #ccc;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<h1>Flex Grid: Nesting</h1>
<p>These are two nested grids. They should both fill the width of the window.</p>
</div>
</div>
<div class="row expanded test-1">
<div class="column">
<div class="row expanded test-2">
<div class="column">
<p>This is a grid.</p>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/grid/uncentered-columns.html
Generated Vendored Executable
+58
View File
@@ -0,0 +1,58 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="row column">
<h1>Uncentered Columns</h1>
</div>
<div class="row">
<div class="small-7 medium-centered large-uncentered columns">
<p style="background-color:#eee;">I must be centered on medium only</p>
</div>
</div>
<div class="row">
<div class="small-7 medium-centered large-uncentered columns">
<p style="background-color:#eee;">I must be centered on medium only</p>
</div>
<div class="small-7 medium-centered large-uncentered columns">
<p style="background-color:#eee;">I must be centered on medium only</p>
</div>
<div class="small-7 medium-centered large-uncentered columns">
<p style="background-color:#eee;">I must be centered on medium only</p>
</div>
<div class="small-7 medium-centered large-uncentered columns">
<p style="background-color:#eee;">I must be centered on medium only, on the right otherwise</p>
</div>
</div>
<div class="row column"><hr></div>
<div class="row">
<div class="small-5 columns">
<p style="background-color:#aee;">This blue column is not centered.</p>
</div>
<div class="small-7 medium-centered large-uncentered columns">
<p style="background-color:#fbb;">This pink column should be centered and clear the blue column on medium only.</p>
</div>
<div class="small-5 columns">
<p style="background-color:#aee;">This blue column is not centered.</p>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/keyboard/trap-release-focus.html
Generated Vendored Executable
+73
View File
@@ -0,0 +1,73 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Trap and release focus from elements</h1>
<p>
Use the buttons to trap or release the focus for the Callout.
<br>You can then use the Tab key to focus the links in the Callout. If the focus is trapped, you shouldn't be able to focus any element outside of the Callout using Tab or Shift+Tab.
<br>
<br>The following box binds to a regular keydown-event to check if the trapping and releasing does not interfere with other events.
</p>
<p><strong id="state"></strong></p>
<p><span id="current"></span></p>
<a href="#Link0">Link 0 outside</a>
<div id="container" class="callout">
<a href="#Link1">Link 1</a>
<br><a href="#Link2">Link 2</a>
<br><a href="#Link3">Link 3</a>
</div>
<button id="trap-btn" class="button">Trap focus</button>
<button id="release-btn" class="button">Release focus</button>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
$(document).ready(function() {
var $container = $('#container'),
$state = $('#state'),
$current = $('#current');
// Trap focus
$('#trap-btn').click(function() {
Foundation.Keyboard.trapFocus($container);
$state.text('Focus currently trapped!');
});
// Release focus (and initialize this state)
$('#release-btn').click(function() {
Foundation.Keyboard.releaseFocus($container);
$state.text('Focus currently NOT trapped!');
$(this).attr();
}).trigger('click');
// Handle 'interference proof'
var count = 0;
$container.find('a').keydown(function(e) {
$current.text('#' + (++count) + ': Pressed: ' + Foundation.Keyboard.parseKey(e));
});
});
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/magellan/active-item.html
Generated Vendored Executable
+98
View File
@@ -0,0 +1,98 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Magellan:Active Item</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style type="text/css">
section{height:60em;}
nav{height:4em!important;}
.sticky{width: 100%;}
.highlight{background:#A1D4E9;}
.top-bar, .top-bar ul, .dark{background:#3a3a3a; color:#A1D4E9 }
.top-bar a{color: #A1D4E9;}
.is-active{background:#A1D4E9;color:white!important;}
.well{padding:3rem;}
</style>
</head>
<body>
<header>
<nav data-sticky-container>
<div class="sticky is-stuck is-at-top" data-sticky data-sticky-on="small" data-margin-top="0" data-margin-bottom="0" data-top-anchor="top">
<div class="top-bar">
<ul data-magellan data-bar-offset="25" data-deep-linking="true" class="small-horizontal menu">
<li><a href="#one">one</a></li>
<li><a href="#two">two</a></li>
<li><a href="#three">three</a></li>
<li><a href="#four">four</a></li>
<li><a href="#five">five</a></li>
<li><a href="#six">six</a></li>
</ul>
</div>
</div>
</nav>
<section id="heading">
<h1 class="text-center well">Pre-anchor Section</h1>
<div class="well">
<p>Incorrect: Navigation item one is active before first anchor point at section One.</p>
Correct:
<ul>
<li>Navigation items should be inactive until first anchor point.</li>
<li>URL should contain no hash</li>
</ul>
</div>
</section>
</header>
<main>
<section id="one" class="highlight" data-magellan-target="one">
<h1 class="text-center well">Section One</h1>
<div class="well">
<p>First anchor point. Navigation item one should be active only in this section.</p>
<p>Location hash should be #one with deep linking set to true</p>
</div>
</section>
<section id="two" data-magellan-target="two">
<h1 class="text-center well">Section Two</h1>
<div class="well">
<p>Second anchor point. Navigation item two should be active only in this section.</p>
<p>Location hash should be #two with deep linking set to true</p>
</div>
</section>
<section id="three" class="highlight" data-magellan-target="three">
<h1 class="text-center well">Section Three</h1>
<div class="well">
<p>Third anchor point. Navigation item three should be active only in this section.</p>
<p>Location hash should be #three with deep linking set to true</p>
</div>
</section>
<section id="four" data-magellan-target="four">
<h1 class="text-center well">Section Four</h1>
</section>
<section id="five" class="highlight" data-magellan-target="five">
<h1 class="text-center well">Section Five</h1>
</section>
</section>
<section id="six" class="dark" data-magellan-target="six">
<h1 class="text-center well">Section Six</h1>
</section>
</main>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/magellan/unordered-links.html
Generated Vendored Executable
+84
View File
@@ -0,0 +1,84 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style type="text/css">
[data-magellan] {
position: fixed;
top: 0;
right: 0;
}
[data-magellan] a.is-active {
font-weight: bold;
color: #000;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<ul class="vertical menu" data-magellan>
<li><a href="#one">Section One</a></li>
<li><a href="#three">Section Three</a></li>
<li><a href="#two">Section Two</a></li>
<li><a href="#four">Section Four</a></li>
<li><a href="#five">Section Five</a></li>
<li><a href="#three">Section Three</a></li>
</ul>
<div class="grid-x grid-padding-x">
<div class="cell small-10 medium-6 large-4">
<section id="one" data-magellan-target="one">
<h1>Section One</h1>
<p>
<strong>This test checks if the correct link gets the active class when scrolling.</strong> This section is in the same place as the corresponding link. All should go well.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies porttitor lorem. Fusce condimentum in erat id pellentesque. Ut id lacus non nulla sodales suscipit. Donec dictum ante lacus, id fermentum ex dictum id. Pellentesque vel ullamcorper nisi. In hac habitasse platea dictumst. Morbi vehicula egestas tellus, non pulvinar leo viverra in. Maecenas eget est ut nisi scelerisque semper a sed quam. Suspendisse viverra ornare lacus, vehicula sagittis est condimentum a. Aliquam erat volutpat. Nullam consequat aliquam eros quis dictum. Suspendisse dapibus massa eget felis convallis dapibus. Nam vestibulum ligula velit, egestas faucibus justo pellentesque a.
</p>
</section>
<section id="two" data-magellan-target="two">
<h1>Section Two</h1>
<p>
This section is not in the same place as the corresponding link. Notice that the corresponding link comes third in the menu, but the section comes second in the page.
</p>
<p>
Mauris non metus porttitor, iaculis arcu in, ultrices metus. Maecenas et est lacus. Ut a diam rutrum, iaculis leo vitae, commodo felis. Donec molestie, elit in mollis consequat, mauris arcu auctor tortor, non feugiat felis mauris eu tellus. In hac habitasse platea dictumst. Phasellus condimentum nulla a orci varius placerat. Integer vitae orci tristique, convallis ligula ac, sodales dui. Morbi pharetra eros ut semper egestas. Donec ornare velit vel felis tempor tempor. Nullam egestas rhoncus elit et rhoncus.
</p>
</section>
<section id="three" data-magellan-target="three">
<h1>Section Three</h1>
<p>
This section has two corresponding links in the menu. Both should get the active class.
</p>
<p>
Cras in nunc ultricies, eleifend nisl ut, volutpat ipsum. In a neque nulla. Donec varius tempus fringilla. Nunc massa tellus, lobortis a imperdiet vel, placerat quis leo. Pellentesque vel accumsan lacus, aliquam tristique eros. Proin bibendum purus quis feugiat egestas. Vivamus facilisis libero tortor, ut finibus eros lobortis sed. Donec a blandit erat. Morbi et purus urna. Ut orci libero, sodales dapibus molestie id, pretium quis mi. Nam et lacinia quam.
</p>
</section>
<section id="five" data-magellan-target="five">
<h1>Section Five</h1>
<p>
This section comes fourth in the page because Section Four is missing. The Section Four link should not get the active class. Instead, the corresponding Section Five link should.
</p>
<p>
Donec aliquet dictum mauris nec volutpat. Nunc id mauris neque. Aenean venenatis, massa laoreet fermentum convallis, purus tellus luctus tellus, nec pharetra quam nisi non dolor. Aliquam quam mi, aliquam non leo eu, tincidunt aliquam nibh. Sed malesuada, ligula at maximus imperdiet, risus arcu hendrerit dolor, ac rutrum elit leo nec dolor. Nulla eu dolor eget sapien eleifend pulvinar finibus ac nisl. Nulla augue lorem, ullamcorper id felis sit amet, pretium viverra lectus. Praesent ullamcorper orci sed convallis pulvinar. Sed accumsan orci vel blandit sodales. Duis lobortis sem at fermentum scelerisque. Cras sed turpis at est sollicitudin sollicitudin dignissim vel libero. Maecenas sit amet mauris elementum, tincidunt sem vitae, pharetra ex. Curabitur viverra erat ut ipsum cursus mattis. Vestibulum consectetur, ligula id gravida tristique, nisi lorem gravida ex, in imperdiet risus turpis eget neque.
</p>
</section>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/media-object/media-object-mixins-flex-mode.html
Generated Vendored Executable
+56
View File
@@ -0,0 +1,56 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Media Object: Mixins In Flex Mode</h1>
<p>Media Object created using <code>media-object-container</code> and <code>media-object-section</code> mixins with <code>$global-flexbox: true</code> should behave the same as Media Object created using <code>foundation-media-object</code> mixin with <code>$global-flexbox: true</code>.</p>
<h3>Default</h3>
<div class="media-object">
<div class="media-object-section">
<div class="thumbnail">
<img src= "http://via.placeholder.com/100x100">
</div>
</div>
<div class="media-object-section">
<h4>Dreams feel real while we're in them.</h4>
<p>I'm going to improvise. Listen, there's something you should know about me... about inception. An idea is like a virus, resilient, highly contagious. The smallest seed of an idea can grow. It can grow to define or destroy you.</p>
</div>
</div>
<h3>Stack on Small</h3>
<div class="media-object stack-for-small">
<div class="media-object-section">
<div class="thumbnail">
<img src= "http://via.placeholder.com/600x300">
</div>
</div>
<div class="media-object-section">
<h4>I Can Stack.</h4>
<p>Shrink the browser width to see me stack. I do tricks for dog treats, but I'm not a dog.</p>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/active-menu-flex.html
Generated Vendored Executable
+75
View File
@@ -0,0 +1,75 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>All Foundation Menu Options - Flexbox</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Active Menu (is-active)</h1>
<div class="example">
<ul class="menu">
<li><a href="#">One</a></li>
<li class="is-active"><a href="#">Two (.active)</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h1>Active Menu (active)</h1>
<div class="example">
<ul class="menu">
<li><a href="#">One</a></li>
<li class="active"><a href="#">Two (.active)</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/active-menu-float.html
Generated Vendored Executable
+72
View File
@@ -0,0 +1,72 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>All Foundation Menu Options - Flexbox</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation-float.css" rel="stylesheet" />
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<h1>Active Menu (is-active)</h1>
<div class="example">
<ul class="menu">
<li><a href="#">One</a></li>
<li class="is-active"><a href="#">Two (.active)</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h1>Active Menu (active)</h1>
<div class="example">
<ul class="menu">
<li><a href="#">One</a></li>
<li class="active"><a href="#">Two (.active)</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/advanced-nested-menu-flex.html
Generated Vendored Executable
+149
View File
@@ -0,0 +1,149 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style type="text/css">
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Advanced Nested Menu's</h1>
<h3>Nested Form within Accordion Menu</h3>
<div class="example" style="max-width: 450px">
<ul class="menu vertical accordion-menu" data-accordion-menu>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li>
<a href="#">Form</a>
<ul class="menu nested vertical">
<li>
<div class="card">
<div class="card-section">
<label> Your Name
<input type="text" placeholder="Enter your Cool Name">
</label>
<select>
<option value="husker">Husker</option>
<option value="starbuck">Starbuck</option>
<option value="hotdog">Hot Dog</option>
<option value="apollo">Apollo</option>
</select>
<button class="button">Submit</button>
<p><a href="#">Learn More</a>
</div>
</div>
</li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Nested Form within Dropdown Menu</h3>
<div class="example" style="max-width: 450px">
<ul class="menu vertical dropdown" data-dropdown-menu>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li>
<a href="#">Form</a>
<ul class="menu nested vertical">
<li>
<div class="card">
<div class="card-section">
<label> Your Name
<input type="text" placeholder="Enter your Cool Name">
</label>
<select>
<option value="husker">Husker</option>
<option value="starbuck">Starbuck</option>
<option value="hotdog">Hot Dog</option>
<option value="apollo">Apollo</option>
</select>
<button class="button">Submit</button>
<p><a href="#">Learn More</a>
</div>
</div>
</li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Nested Form within Drilldown Menu</h3>
<div class="example" style="max-width: 450px">
<ul class="menu vertical drilldown" data-drilldown>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li>
<a href="#">Form</a>
<ul class="menu nested vertical">
<li>
<div class="card">
<div class="card-section">
<label> Your Name
<input type="text" placeholder="Enter your Cool Name">
</label>
<select>
<option value="husker">Husker</option>
<option value="starbuck">Starbuck</option>
<option value="hotdog">Hot Dog</option>
<option value="apollo">Apollo</option>
</select>
<button class="button">Submit</button>
<p><a href="#">Learn More</a>
</div>
</div>
</li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/advanced-nested-menu-float.html
Generated Vendored Executable
+139
View File
@@ -0,0 +1,139 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation-float.css" rel="stylesheet" />
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="row column">
<h1>Advanced Nested Menu's</h1>
<h3>Nested Form within Accordion Menu</h3>
<div class="example" style="max-width: 450px">
<ul class="menu vertical accordion-menu" data-accordion-menu>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li>
<a href="#">Form</a>
<ul class="menu nested vertical">
<li>
<div class="card">
<div class="card-section">
<label> Your Name
<input type="text" placeholder="Enter your Cool Name">
</label>
<select>
<option value="husker">Husker</option>
<option value="starbuck">Starbuck</option>
<option value="hotdog">Hot Dog</option>
<option value="apollo">Apollo</option>
</select>
<button class="button">Submit</button>
<p><a href="#">Learn More</a>
</div>
</div>
</li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Nested Form within Dropdown Menu</h3>
<div class="example" style="max-width: 450px">
<ul class="menu vertical dropdown" data-dropdown-menu>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li>
<a href="#">Form</a>
<ul class="menu nested vertical">
<li>
<div class="card">
<div class="card-section">
<label> Your Name
<input type="text" placeholder="Enter your Cool Name">
</label>
<select>
<option value="husker">Husker</option>
<option value="starbuck">Starbuck</option>
<option value="hotdog">Hot Dog</option>
<option value="apollo">Apollo</option>
</select>
<button class="button">Submit</button>
<p><a href="#">Learn More</a>
</div>
</div>
</li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Nested Form within Drilldown Menu</h3>
<div class="example" style="max-width: 450px">
<ul class="menu vertical drilldown" data-drilldown>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li>
<a href="#">Form</a>
<ul class="menu nested vertical">
<li>
<div class="card">
<div class="card-section">
<label> Your Name
<input type="text" placeholder="Enter your Cool Name">
</label>
<select>
<option value="husker">Husker</option>
<option value="starbuck">Starbuck</option>
<option value="hotdog">Hot Dog</option>
<option value="apollo">Apollo</option>
</select>
<button class="button">Submit</button>
<p><a href="#">Learn More</a>
</div>
</div>
</li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/basic-menu-flex.html
Generated Vendored Executable
+84
View File
@@ -0,0 +1,84 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>All Foundation Menu Options - Flexbox</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Basic Menus</h1>
<h3>Default Menu</h3>
<div class="example">
<ul class="menu">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Horizontal Menu</h3>
<div class="example">
<ul class="menu horizontal">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Vertical Menu</h3>
<div class="example">
<ul class="menu vertical">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/basic-menu-float.html
Generated Vendored Executable
+82
View File
@@ -0,0 +1,82 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>All Foundation Menu Options - Flexbox</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation-float.css" rel="stylesheet" />
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<h1>Basic Menus</h1>
<h3>Default Menu</h3>
<div class="example">
<ul class="menu">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Horizontal Menu</h3>
<div class="example">
<ul class="menu horizontal">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Vertical Menu</h3>
<div class="example">
<ul class="menu vertical">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/expanded-menu-flex.html
Generated Vendored Executable
+63
View File
@@ -0,0 +1,63 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>All Foundation Menu Options - Flexbox</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Expanded Menu</h1>
<div class="example">
<ul class="menu expanded">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/expanded-menu-float.html
Generated Vendored Executable
+61
View File
@@ -0,0 +1,61 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>All Foundation Menu Options - Flexbox</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation-float.css" rel="stylesheet" />
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<h1>Expanded Menu</h1>
<div class="example">
<ul class="menu expanded">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/horizontal-dropdownmenu-alignment-flex.html
Generated Vendored Executable
+90
View File
@@ -0,0 +1,90 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>All Foundation Menu Options - Flexbox</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Horizontal Dropdown Menu Alignment</h1>
<h3>Left Aligned Dropdown Menu (Default) - Horizontal</h3>
<div class="example">
<ul class="horizontal menu dropdown" data-dropdown-menu>
<li><a href="#">One</a></li>
<li>
<a href="#">Two</a>
<ul class="menu horizontal nested">
<li><a href="#">Two A</a></li>
<li><a href="#">Two B</a></li>
<li><a href="#">Two C</a></li>
<li><a href="#">Two D</a></li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Right Aligned Dropdown Menu - Horizontal</h3>
<div class="example float-right">
<ul class="horizontal menu dropdown align-right" data-dropdown-menu>
<li><a href="#">One</a></li>
<li>
<a href="#">Two</a>
<ul class="menu horizontal nested">
<li><a href="#">Two A</a></li>
<li><a href="#">Two B</a></li>
<li><a href="#">Two C</a></li>
<li><a href="#">Two D</a></li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/horizontal-dropdownmenu-alignment-float.html
Generated Vendored Executable
+88
View File
@@ -0,0 +1,88 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>All Foundation Menu Options - Flexbox</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation-float.css" rel="stylesheet" />
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<h1>Horizontal Dropdown Menu Alignment</h1>
<h3>Left Aligned Dropdown Menu (Default) - Horizontal</h3>
<div class="example">
<ul class="horizontal menu dropdown" data-dropdown-menu>
<li><a href="#">One</a></li>
<li>
<a href="#">Two</a>
<ul class="menu horizontal nested">
<li><a href="#">Two A</a></li>
<li><a href="#">Two B</a></li>
<li><a href="#">Two C</a></li>
<li><a href="#">Two D</a></li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Right Aligned Dropdown Menu - Horizontal</h3>
<div class="example float-right">
<ul class="horizontal menu dropdown align-right" data-dropdown-menu>
<li><a href="#">One</a></li>
<li>
<a href="#">Two</a>
<ul class="menu horizontal nested">
<li><a href="#">Two A</a></li>
<li><a href="#">Two B</a></li>
<li><a href="#">Two C</a></li>
<li><a href="#">Two D</a></li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/horizontal-menu-alignment-flex.html
Generated Vendored Executable
+88
View File
@@ -0,0 +1,88 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>All Foundation Menu Options - Flexbox</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Horizontal Menu Alignment</h1>
<div class="primary callout">
<p>This example test case also works without adding <code>horizontal</code> class as horizontal is the default. But we have added <code>horizontal</code> in the below examples.</p>
</div>
<h3>Left Aligned Menu (Default) - Horizontal</h3>
<div class="example">
<ul class="menu horizontal">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Right Aligned Menu - Horizontal</h3>
<div class="example">
<ul class="menu horizontal align-right">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Centered Menu - Horizontal</h3>
<div class="example">
<ul class="menu horizontal align-center">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/horizontal-menu-alignment-float.html
Generated Vendored Executable
+86
View File
@@ -0,0 +1,86 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>All Foundation Menu Options - Flexbox</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation-float.css" rel="stylesheet" />
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<h1>Horizontal Menu Alignment</h1>
<div class="primary callout">
<p>This example test case also works without adding <code>horizontal</code> class as horizontal is the default. But we have added <code>horizontal</code> in the below examples.</p>
</div>
<h3>Left Aligned Menu (Default) - Horizontal</h3>
<div class="example">
<ul class="menu horizontal">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Right Aligned Menu - Horizontal</h3>
<div class="example">
<ul class="menu horizontal align-right">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Centered Menu - Horizontal</h3>
<div class="example">
<ul class="menu horizontal align-center">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>

Some files were not shown because too many files have changed in this diff Show More