it('should be added', (done) => {
let checkbox1 = el.getElementsByTagName('input')[0]
let checkbox2 = el.getElementsByTagName('input')[1]
let div = el.getElementsByTagName('div')[0]
let cls = classes(div)
assert(!cls.has('valid'))
assert(cls.has('invalid'))
assert(!cls.has('touched'))
assert(cls.has('untouched'))
assert(cls.has('pristine'))
assert(!cls.has('dirty'))
assert(!cls.has('modified'))
checkbox1.checked = true
trigger(checkbox1, 'change')
trigger(checkbox1, 'blur')
vm.$nextTick(() => {
assert(!cls.has('valid'))
assert(cls.has('invalid'))
assert(cls.has('touched'))
assert(!cls.has('untouched'))
assert(!cls.has('pristine'))
assert(cls.has('dirty'))
assert(cls.has('modified'))
checkbox2.checked = true
trigger(checkbox2, 'change')
trigger(checkbox2, 'blur')
vm.$nextTick(() => {
assert(cls.has('valid'))
assert(!cls.has('invalid'))
assert(cls.has('touched'))
assert(!cls.has('untouched'))
assert(!cls.has('pristine'))
assert(cls.has('dirty'))
assert(cls.has('modified'))
done()
})
})
})
function hilo() {
var cl = classes(document.body),
state = {
top: cl.has('top'),
bottom: cl.has('bottom')
};
function on() {
var cur = {
top: window.pageYOffset <= 0,
bottom: window.pageYOffset + window.innerHeight >= document.body.scrollHeight
};
['bottom', 'top'].forEach(function(prop) {
if(state[prop] !== cur[prop]) {
cl.toggle(prop);
state[prop] = cur[prop];
}
});
}
bind(window, "scroll", on);
}
it('should delegate events on the root', function () {
var DelegateRoot = component({
onClick: function(event){
this.setState({ active: true });
},
render: function (props, state) {
return dom('div', { class: { active: state.active }, onClick: this.onClick }, [
dom('a', 'link')
]);
}
});
var scene = DelegateRoot.render(el);
scene.update();
// Click the link
var first = el.querySelectorAll('a')[0];
trigger(first, 'click');
scene.update();
assert(classes(first.parentNode).has('active') === true);
scene.remove();
});
Select.prototype.select = function(name){
var opt = this.get(name);
// state
if (!this.classes.has('selected')) {
this.classes.add('selected');
}
// select
this.emit('select', opt);
opt.selected = true;
// hide
opt.el.setAttribute('hidden', '');
classes(opt.el).add('selected');
// multiple
if (this._multiple) {
this.box.add(opt.label);
this._selected.push(opt);
this.input.value = '';
this.dehighlight();
this.change();
this.hide();
return this;
}
// single
var prev = this._selected[0];
if (prev) this.deselect(prev.name);
this._selected = [opt];
this.input.value = opt.label;
this.hide();
this.change();
return this;
};
AccordionPane.prototype.removeCollapse = function(){
this.isCollapsed = false;
classes(this.el).remove('collapsed');
this.context.emit('remove-collapse', this);
};
var timeout = setTimeout(function () {
classes(element).add('loading');
}, delay);
AccordionPane.prototype.collapse = function(){
this.isCollapsed = true;
classes(this.el).add('collapsed');
this.context.emit('collapse', this);
};
const cssAnimation = (node, transitionName, endCallback) => {
const nameIsObj = typeof transitionName === 'object';
const className = nameIsObj ? transitionName.name : transitionName;
const activeClassName = nameIsObj ? transitionName.active : `${transitionName}-active`;
let end = endCallback;
let start;
let active;
const nodeClasses = classes(node);
if (endCallback && Object.prototype.toString.call(endCallback) === '[object Object]') {
end = endCallback.end;
start = endCallback.start;
active = endCallback.active;
}
if (node.rcEndListener) {
node.rcEndListener();
}
node.rcEndListener = (e) => {
if (e && e.target !== node) {
return;
}
if (node.rcAnimTimeout) {
clearTimeout(node.rcAnimTimeout);
node.rcAnimTimeout = null;
}
clearBrowserBugTimeout(node);
nodeClasses.remove(className);
nodeClasses.remove(activeClassName);
Event.removeEndEventListener(node, node.rcEndListener);
node.rcEndListener = null;
// Usually this optional end is used for informing an owner of
// a leave animation and telling it to remove the child.
if (end) {
end();
}
};
Event.addEndEventListener(node, node.rcEndListener);
if (start) {
start();
}
nodeClasses.add(className);
node.rcAnimTimeout = setTimeout(() => {
node.rcAnimTimeout = null;
nodeClasses.add(activeClassName);
if (active) {
setTimeout(active, 0);
}
fixBrowserByTimeout(node);
// 30ms for firefox
}, 30);
return {
stop() {
if (node.rcEndListener) {
node.rcEndListener();
}
},
};
};
Select.prototype.dehighlight = function(){
if (!this.active) return this;
classes(this.active).remove('highlighted');
this.active = null;
return this;
};
var click = function(star, i) {
this.emit("click", star, i, self.disabled);
if (!self.disabled)
self.rate(i);
classes(star).toggle('clicked');
}
return function () {
clearTimeout(timeout);
classes(element).remove('loading');
};
Zoom.prototype.loading = function(){
classes(this.thumb).add('loading');
};
Rating.prototype.enable = function Rating_enable() {
this.disabled = false;
classes(this.el).remove('disabled');
};
Autocomplete.prototype.formatOption = function (option, el) {
Classes(option.el = el).add('Autocomplete-option')
el.setAttribute('data-Autocomplete-id', option.id)
return option
}
function Autocomplete(el, menu) {
if (!(this instanceof Autocomplete))
return new Autocomplete(el, menu)
this.el = el
el.setAttribute('autocomplete', 'off')
// you can set your own menu element
if (!menu) {
menu = document.createElement('div')
el.parentNode.insertBefore(menu, el)
}
// hidden on initialization
this.classes = Classes(this.menu = menu)
.add('Autocomplete-menu')
.add('Autocomplete-hidden')
// current options
this.options = []
// currently highlighted option
this.highlighted = null
// setup stuff
var self = this
// search when the user changes the search text
// debounced search
var search = debounce(function () {
self.query(el.value)
}, 300)
// setup complement methods
this._onblur()
this._setupoptions()
// show the menu when the input is focused
el.addEventListener('focus', function (e) {
e.stopPropagation()
self.show()
}, false)
el.addEventListener('keydown', function (e) {
switch (keyname(e.which)) {
case 'down':
stop(e)
self.show()
self.next()
return
case 'up':
stop(e)
self.show()
self.previous()
return
case 'esc':
stop(e)
self.hide()
return
case 'enter':
// select the current option
self.select(self.highlighted)
return
case 'tab':
case 'capslock':
case 'right':
case 'left':
case 'meta':
case 'shift':
case 'ctrl':
case 'alt':
case 'meta':
case 'pageup':
case 'pagedown':
case 'end':
case 'home':
case 'ins':
case 'del':
// ignore these keys from toggling anything
return
}
search()
})
// manipulate the menu
menu.addEventListener('keydown', function (e) {
stop(e)
switch (keyname(e.which)) {
case 'down':
self.show()
self.next()
self.highlighted.el.focus()
return
case 'up':
if (self.get(0) === self.highlighted) return self.el.focus()
self.show()
self.previous()
self.highlighted.el.focus()
return
case 'esc':
self.hide()
return
case 'enter':
self.select(self.find(e.target))
return
}
})
// highlight an option if the user somehow focuses on it
menu.addEventListener('focus', function (e) {
self.highlight(self.find(e.target))
}, true)
}
function hide(el,trans){
trans = trans.split(' ');
var css = classes(el);
for (var i=0;i<trans.length;++i) css.remove(trans[i]);
css.add('hide');
}
dom.classes = function (el) {
el = raw(el)
return classes(el)
}
setTimeout( function() {
ReactDom.unmountComponentAtNode( document.getElementById( 'tertiary' ) );
classes( document.documentElement ).remove( 'overlay-is-front' );
}, 400 );
Zoom.prototype.finishLoading = function(){
classes(this.thumb).remove('loading');
};
this.forEach(function (ci) {
classes(ci)
.remove('carousel-next')
.remove('carousel-prev')
.remove('carousel-active');
});
Rating.prototype.disable = function Rating_disable() {
this.disabled = true;
classes(this.el).add('disabled');
};
BlockControls.prototype.onactive = function(e){
if (classes(e.target).has('control')) {
var action = dataset(e.target, 'action');
this.set(action);
}
};
Client.prototype.receiveEvent = function(eventName, args){
eventName = eventName.toString().toLowerCase().replace(/^on/, '');
var domClasses;
if (this.domElement) {
domClasses = classes(this.domElement);
}
// special behavior for certain events
switch (eventName) {
case 'load':
// movie claims it is loaded, but in IE this isn't always the case...
// bug fix: Cannot extend EMBED DOM elements in Firefox, must use traditional function
this.movie = document.getElementById(this.movieId);
if (!this.movie) {
var self = this;
setTimeout(function(){ self.receiveEvent('load', null); }, 1);
return;
}
// Firefox on Windows needs a "kick" in order to set these in certain cases
if (!this.loaded && navigator.userAgent.match(/Firefox/) && navigator.userAgent.match(/Windows/)) {
var self = this;
setTimeout(function(){ self.receiveEvent('load', null); }, 100);
this.loaded = true;
return;
}
this.loaded = true;
this.movie.setText(this._text);
this.movie.setHandCursor(this._cursor);
break;
case 'mouseover':
if (domClasses) {
domClasses.add('hover');
if (this.recoverActive) {
domClasses.add('active');
}
}
break;
case 'mouseout':
if (domClasses) {
this.recoverActive = false;
if (domClasses.has('active')) {
domClasses.remove('active');
this.recoverActive = true;
}
domClasses.remove('hover');
}
break;
case 'mousedown':
if (domClasses) {
domClasses.add('active');
}
break;
case 'mouseup':
if (domClasses) {
domClasses.remove('active');
this.recoverActive = false;
}
break;
}
// emit the event
var a;
if ('string' == typeof args) {
a = [eventName, args]; // "args" is only a string
} else if (args) {
a = args.slice(0); // "args" is actually an array
a.unshift(eventName);
} else {
a = [eventName];
}
this.emit.apply(this, a);
};
return this.forEach(function(el) {
el._classes = el._classes || classes(el);
el._classes.remove(name);
});
clear: function() {
for (var i = 0, il = buttons.els.length; i < il; i++) {
classes(buttons.els[i]).remove('asc');
classes(buttons.els[i]).remove('desc');
}
},
return this.forEach(function(el) {
el._classes = el._classes || classes(el);
el._classes[fn](name);
})
AccordionPane.prototype.removeActive = function(){
this.isActive = false;
classes(this.el).remove('active');
this.context.emit('inactive', this);
};
AccordionPane.prototype.makeActive = function(){
this.isActive = true;
classes(this.el).add('active');
this.context.emit('active', this);
};
return function (editor) {
var currentCommand;
var justChanged = false;
var activeMode = dataset(button, 'active');
var inactiveButton = button.innerHTML;
var buttonClasses = classes(button);
// initialize the `tip`
var tip = editor.tip(content);
tip.position('bottom');
function onshow (target) {
debug('onshow(%o)', target);
setTimeout(function () {
tip.addClickOutside();
}, 50);
}
function onclick (e) {
debug('onclick(%o)', e);
if (activeMode && currentCommand) {
debug('executing %o command', currentCommand);
editor.execute(currentCommand);
} else {
tip.toggle(button);
}
}
function checkState () {
// check the inside of the Tip for any "active" button
var active = query('.active', tip.inner);
if (active) {
var command = dataset(active, 'commandName');;
if (currentCommand !== command) {
debug('setting button state to %o', command);
button.innerHTML = active.innerHTML;
if (activeMode) {
debug('adding "active"');
buttonClasses.add('active');
}
if (!justChanged) {
tip.hide();
}
currentCommand = command;
}
} else if (currentCommand) {
debug('setting button to "inactive" state');
button.innerHTML = inactiveButton;
if (activeMode) {
debug('removing "active"');
buttonClasses.remove('active');
}
currentCommand = null;
tip.hide();
}
justChanged = false;
}
function oninnerclick (e) {
debug('oninnerclick');
justChanged = true;
}
tip.on('show', onshow);
// show the Tip upon a "click" event on the `button`
event.bind(button, 'click', onclick);
event.bind(tip.inner, 'click', oninnerclick);
// set up the Tip's `.inner` div to be the editor plugin toolbar
editor.use(EditorToolbar(tip.inner));
var check = throttle(checkState);
editor.on('contentchange', check);
editor.on('selectionchange', check);
};
function setupToolbar(me) {
var toolbar = me.toolbar;
// buttons in toolbar with binding events
function createButton(name, title, func) {
// button will not lose caret selection
var button = document.createElement('button');
button.className = 'ed-button ed-icon-' + name + ' ed-button-' + name;
if (title) {
button.title = title;
}
button.name = name;
events.bind(button, 'click', function(e) {
e.preventDefault();
if (func) {
func(e);
} else {
format(name);
}
});
toolbar.appendChild(button);
return button;
}
var input = document.createElement('input');
input.className = 'ed-link-input';
input.type = 'url';
input.placeholder = 'http://';
toolbar._class = classes(toolbar);
createButton('a', 'Insert a link', function() {
if (!toolbar._class.has('ed-link-input-active')) {
toolbar._class.add('ed-link-input-active');
var node = me.caret.parent();
if (node.tagName.toLowerCase() === 'a') {
input.value = node.href;
} else {
input.value = '';
format.a('/');
}
me.caret.save();
input.focus();
}
});
toolbar.appendChild(input);
createButton('bold');
createButton('italic');
createButton('strike');
createButton('blockquote', 'Blockquote text');
createButton('ul', 'Unordered List');
createButton('ol', 'Ordered List');
createButton('h2', 'Heading');
var fileInput = createFileInput();
createButton('img', 'Insert an image', function() {
fileInput.onchange = function(e) {
var files = fileInput.files;
for (var i = 0; i < files.length; i++) {
(function(file) {
me.upload(file);
})(files[i]);
}
};
fileInput.click();
});
function linky(e) {
if (!e.keyCode || e.keyCode === 13) {
e.preventDefault();
toolbar._class.remove('ed-link-input-active');
me.caret.restore();
var url = input.value;
var node = me.caret.parent();
if (url) {
if (!/https?:\/\//.test(url)) {
url = 'http://' + url;
}
if (node.tagName.toLowerCase() === 'a') {
node.href = url;
} else {
format.a(url);
}
} else {
format.unlink();
}
}
}
events.bind(input, 'blur', linky);
events.bind(input, 'keydown', linky);
}