Skip to content

Commit

Permalink
Release v1.0.3
Browse files Browse the repository at this point in the history
  • Loading branch information
@LukyVj
LukyVj committed May 29, 2016
1 parent 0c5fe61 commit 003472a
Show file tree
Hide file tree
Showing 15 changed files with 567 additions and 248 deletions.
305 changes: 155 additions & 150 deletions source/javascripts/all.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
'use strict';

window.onload = function(){
getNbSamples()
childManager()
childIndex();
modalizer()
mixPattern(50)
getNbSamples()
childManager()
childIndex();
modalizer();
mixPattern(50);
}

document.getElementById('pattern').onclick = function(){
Expand All @@ -18,7 +18,7 @@ function mixPattern(num) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

var pattern = document.getElementById('pattern');
var pattern = document.getElementById('pattern');
pattern.innerHTML = '';

for (var i = 0; i < num; i++) {
Expand All @@ -27,177 +27,182 @@ function mixPattern(num) {
pattern.appendChild(item)
}

var pItems = pattern.children;
var pItems = pattern.children;

for (var i = 0; i < pItems.length; i++ ) {
position(pItems[i])
}

function position(el){
var py = getRandomInt(1, 100);
var px = getRandomInt(1, 100);
var size = getRandomInt(1, 100);
var blur = getRandomInt(1,5);
for (var i = 0; i < pItems.length; i++ ) {
position(pItems[i])
}

el.style.width = size + 'px';
el.style.height = size + 'px';
el.style.top = py + '%';
el.style.left = px + '%';
el.style.webkitFilter = 'blur('+blur + 'px)';
function position(el){
var py = getRandomInt(1, 100);
var px = getRandomInt(1, 100);
var size = getRandomInt(1, 100);
var blur = getRandomInt(1,5);

el.style.width = size + 'px';
el.style.height = size + 'px';
el.style.top = py + '%';
el.style.left = px + '%';
el.style.webkitFilter = 'blur('+blur + 'px)';
el.style.filter = 'blur('+blur + 'px)';
}
}
}

function getNbSamples(){
var n = document.getElementById('amount');
var ex = document.querySelectorAll('.doc ul').length;
n.textContent = ex;
var n = document.getElementById('amount');
var ex = document.querySelectorAll('.doc ul').length;
n.textContent = ex;
}

// Generate li incrementer
function childManager(){
var families = document.querySelectorAll('.doc ul');
var controlTpl = `<button class="add-item btn btn-blue w-icon">add child <svg><use xlink:href="#icon-add"></use></svg></button> <button class="remove-item btn btn-blue w-icon">remove child <svg><use xlink:href="#icon-remove"></use></svg></button>`;
var orderTpl = `<button class="btn btn-blue w-icon" data-state-a="current direction\: forward" data-state-b="current direction\: backward" data-state></button>`;

for ( var i = 0; i < families.length; i++) {
addControls(families[i], i);
}

function addControls(set, num) {
var controls = document.createElement('div');
var controlsId = "controls-" + num;

if(set.getAttribute('data-controls') == 'order') {
controls.id = 'order-' + controlsId;
controls.innerHTML = orderTpl;
set.parentNode.children[0].appendChild(controls)
} else {
controls.id = controlsId;
controls.innerHTML = controlTpl;
set.parentNode.children[0].appendChild(controls)
}
performControls(controlsId, num)
}

function performControls(id, num) {
if(document.querySelector('[id="controls-'+i+'"]')) {
var add = document.querySelector('#'+id+' .add-item') || false;
var remove = document.querySelector('#'+id+' .remove-item') || false;

add.addEventListener('click', function(){
var familyClass = this.parentNode.parentNode.parentNode.children[2].className;
var item = document.createElement('li');
document.querySelector('.'+familyClass).appendChild(item)
childNum(familyClass);
})

remove.addEventListener('click', function(){
var familyClass = this.parentNode.parentNode.parentNode.children[2].className;
var familyList = document.querySelector('.'+familyClass);
var lastItem = familyList.lastElementChild;
familyList.removeChild(lastItem)
childNum(familyClass);
})
}
}

function childNum(listId) {
var lists = document.querySelectorAll('div > ul.'+listId);

for (var i = 0; i < lists.length; i++) {
giveIds(lists[i])
}

function giveIds(list) {
var childsLength = list.children.length;
list.lastElementChild.textContent = childsLength
}
}

addState()
var families = document.querySelectorAll('.doc ul');
var controlTpl = `<button class="add-item btn btn-blue w-icon">add child <svg><use xlink:href="#icon-add"></use></svg></button> <button class="remove-item btn btn-blue w-icon">remove child <svg><use xlink:href="#icon-remove"></use></svg></button>`;
var orderTpl = `<button class="btn btn-blue w-icon" data-state-a="current direction\: forward" data-state-b="current direction\: backward" data-state></button>`;

for ( var i = 0; i < families.length; i++) {
addControls(families[i], i);
}

function addControls(set, num) {
var controls = document.createElement('div');
var controlsId = "controls-" + num;

if(set.getAttribute('data-controls') == 'order') {
controls.id = 'order-' + controlsId;
controls.innerHTML = orderTpl;
set.parentNode.children[0].appendChild(controls)
} else {
controls.id = controlsId;
controls.innerHTML = controlTpl;
set.parentNode.children[0].appendChild(controls)
}
performControls(controlsId, num)
}

function performControls(id, num) {
if(document.querySelector('[id="controls-'+i+'"]')) {
var add = document.querySelector('#'+id+' .add-item') || false;
var remove = document.querySelector('#'+id+' .remove-item') || false;

add.addEventListener('click', function(){
var familyClass = this.parentNode.parentNode.parentNode.children[2].className;
var item = document.createElement('li');
document.querySelector('.'+familyClass).appendChild(item)
childNum(familyClass);
})

remove.addEventListener('click', function(){
var familyClass = this.parentNode.parentNode.parentNode.children[2].className;
var familyList = document.querySelector('.'+familyClass);
var lastItem = familyList.lastElementChild;
familyList.removeChild(lastItem)
childNum(familyClass);
})
}
}

function childNum(listId) {
var lists = document.querySelectorAll('div > ul.'+listId);

for (var i = 0; i < lists.length; i++) {
giveIds(lists[i])
}

function giveIds(list) {
var childsLength = list.children.length;
list.lastElementChild.textContent = childsLength
}
}

addState()
}


// Controls for the child-index property demo
function childIndex(){
var item = document.querySelector('ul.child-index');
var button = item.parentNode.children[0].children[2].children[0];
button.addEventListener('click', function(){
var v = this.textContent;
if ( v == 'current direction: forward') {
indexem(item, 'forward')
} else {
indexem(item, 'backward')
}

function indexem(parent, direction) {
var children = parent.children;
var styleHolder = document.querySelector('#style-child-index');
styleHolder.innerHTML = 'ul.child-index li{ z-index: 0}';

for ( var i = 0; i < children.length; i++) {
applyIndex(children[i], direction, i)
}

function applyIndex(el, dir, id) {
var z = window.getComputedStyle(el,null).getPropertyValue('z-index');
var id = parseInt(id) + 1;
if( dir == 'forward' ) {
document.querySelector('#demo-index').innerHTML = 'forward'
styleHolder.innerHTML += `
var item = document.querySelector('ul.child-index');
var button = item.parentNode.children[0].children[2].children[0];
button.addEventListener('click', function(){
var v = this.textContent;
if ( v == 'current direction: forward') {
indexem(item, 'forward')
} else {
indexem(item, 'backward')
}

function indexem(parent, direction) {
var children = parent.children;
var styleHolder = document.querySelector('#style-child-index');
styleHolder.innerHTML = 'ul.child-index li{ z-index: 0}';

for ( var i = 0; i < children.length; i++) {
applyIndex(children[i], direction, i)
}

function applyIndex(el, dir, id) {
var z = window.getComputedStyle(el,null).getPropertyValue('z-index');
var id = parseInt(id) + 1;
if( dir == 'forward' ) {
document.querySelector('#demo-index').innerHTML = 'forward'
styleHolder.innerHTML += `
ul.child-index li:nth-child(${id}){ z-index: ${id} !important;}`;
} else {
document.querySelector('#demo-index').innerHTML = 'backward'
styleHolder.innerHTML += `
} else {
document.querySelector('#demo-index').innerHTML = 'backward'
styleHolder.innerHTML += `
ul.child-index li:nth-last-child(${id}){ z-index: ${id} !important;}`;
}
}
}
})
}
}
}
})
}


// Used for the "Child-Index()" demo
// To indicate which direction is defined
function addState() {
var hasState = document.querySelectorAll('[data-state]');

for ( var i = 0; i < hasState.length; i++ ) {
writeState(hasState[i])
}

function writeState(el) {
var stateA = el.getAttribute('data-state-a');
var stateB = el.getAttribute('data-state-b');

el.innerHTML = stateA + '<svg><use xlink:href="#icon-arrow-right"></use></svg>';

el.addEventListener('click', function(){
var str = el.textContent;
if ( str == stateA ) {
el.innerHTML = stateB + '<svg><use xlink:href="#icon-arrow-left"></use></svg>'
} else {
el.innerHTML = stateA + '<svg><use xlink:href="#icon-arrow-right"></use></svg>'
}
})
}
var hasState = document.querySelectorAll('[data-state]');

for ( var i = 0; i < hasState.length; i++ ) {
writeState(hasState[i])
}

function writeState(el) {
var stateA = el.getAttribute('data-state-a');
var stateB = el.getAttribute('data-state-b');

el.innerHTML = stateA + '<svg><use xlink:href="#icon-arrow-right"></use></svg>';

el.addEventListener('click', function(){
var str = el.textContent;
if ( str == stateA ) {
el.innerHTML = stateB + '<svg><use xlink:href="#icon-arrow-left"></use></svg>'
} else {
el.innerHTML = stateA + '<svg><use xlink:href="#icon-arrow-right"></use></svg>'
}
})
}
};


// Simple modal toggler
function modalizer() {
var trigger = document.querySelector('[data-toggle-modal]');
var modal = document.querySelector('#about');
var backdropModal = document.querySelector('.modal-backdrop');
var closeModal = document.getElementById('close');
trigger.addEventListener('click', function(){
modal.classList.toggle('display');
backdropModal.classList.toggle('display');
});
closeModal.addEventListener('click', function(){
modal.classList.remove('display');
backdropModal.classList.remove('display');
})
var trigger = document.querySelector('[data-toggle-modal]');
var modal = document.querySelector('#about');
var backdropModal = document.querySelector('.modal-backdrop');
var closeModal = document.getElementById('close');
trigger.addEventListener('click', function(){
modal.classList.toggle('display');
backdropModal.classList.toggle('display');
});
closeModal.addEventListener('click', function(){
modal.classList.remove('display');
backdropModal.classList.remove('display');
})
}



window.addEventListener('DOMContentLoaded',function(){
let search = document.querySelector('.searchbox input'),
projectNames = document.querySelectorAll('.mixin h3'),
Expand Down

0 comments on commit 003472a

Please sign in to comment.