Skip to content
This repository has been archived by the owner on Dec 12, 2024. It is now read-only.

Add Event collapse. Fix #1496 #1524

Merged
merged 13 commits into from
Jul 21, 2015
Merged

Add Event collapse. Fix #1496 #1524

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
3dea78d
starting events in the collapse
deividmarques Jul 10, 2015
47a1bd2
add event trigger
deividmarques Jul 10, 2015
329381e
removing eventDispatcher
deividmarques Jul 10, 2015
a627284
add event when collapse is opened and closed
deividmarques Jul 10, 2015
7c752bc
removing jasmine test to eventDispatcher
deividmarques Jul 10, 2015
0379a8b
fix events of collapse
deividmarques Jul 10, 2015
6a4fee6
add the collapse testing events
deividmarques Jul 10, 2015
cc20766
add event on the collapse
deividmarques Jul 14, 2015
16d79ef
add jasmine tests of event on the collapse
deividmarques Jul 14, 2015
d22a88b
add documentation of event on the collapse
deividmarques Jul 14, 2015
ad65792
improvement function ariaCollapse
deividmarques Jul 14, 2015
5a1c5a0
removing unnecessary code
deividmarques Jul 15, 2015
42a5fc8
removing eventDispatcher of the documentation
deividmarques Jul 21, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 18 additions & 29 deletions source/assets/javascripts/locastyle/_collapse.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,6 @@ locastyle.collapse = (function() {
close : 'ls-collapse-close',
opened : 'ls-collapse-opened',
alwaysOpened : 'ls-collapse-opened-always'
}, dispatcherOpen: {
open : 'ls-collapse-open',
opened: 'ls-collapse-opened'
}, dispatcherClose: {
close : 'ls-collapse-close',
closed: 'ls-collapse-closed'
}
};

Expand All @@ -33,49 +27,45 @@ locastyle.collapse = (function() {
function bind() {
$(config.trigger).each(function(index, element) {
if (!$(element).hasClass(config.classes.alwaysOpened)) {
$(element).on('click.ck', function() {
$(element).on('click.ls', function() {
groupCollapse($(this));
// get target
var target = $(this).data('target');
toggle(target);
// set aria's attributes
ariaCollapse($(this));
// set event
eventsHandler($(this), target);

});
// if click on ck-collapse-body no action happens
$(config.classes.content).on('click.ck', function(event) {
$(config.classes.content).on('click.ls', function(event) {
event.stopPropagation();
});
}
});
}

// if have collapses in group "accordeon"
function groupCollapse($collapse) {
var $group = $($collapse).parents(config.classes.groupContainer);
function groupCollapse(collapse) {
var $group = collapse.parents(config.classes.groupContainer);
if ($group[0]) {
$group.find(config.trigger).not($($collapse)).removeClass(config.classes.opened).find(config.classes.content).slideUp();
$group.find(config.trigger).not(collapse).removeClass(config.classes.opened).find(config.classes.content).slideUp();
}
}

function toggle(target) {
checkVisible(target, config.dispatcherClose.close, config.dispatcherOpen.open);
$(target).slideToggle(function() {
$(target).parent().toggleClass(config.classes.opened);
checkVisible(target, config.dispatcherOpen.opened, config.dispatcherClose.closed);
});
}

// Set dispatchet according state
function checkVisible(target, dispatcher1, dispatcher2) {
if($(target).is(':visible')) {
locastyle.eventDispatcher.trigger(dispatcher1);
}else{
locastyle.eventDispatcher.trigger(dispatcher2);
function eventsHandler(el, target) {
if($(target).parent().hasClass(config.classes.opened)) {
$(target).parent().removeClass(config.classes.opened);
el.trigger('collapse:closed');
} else {
$(target).parent().addClass(config.classes.opened);
el.trigger('collapse:opened');
}
}


function ariaCollapse(elem) {
if($(elem).hasClass('ls-collapse-open')){
if($(elem).hasClass(config.classes.open)){
$(config.classes.header).attr({ 'aria-expanded' : true });
$(config.classes.content).attr({ 'aria-hidden' : false });
}else{
Expand All @@ -85,8 +75,7 @@ locastyle.collapse = (function() {
}

return {
init: init,
toggle: toggle
init: init
};

}());
67 changes: 34 additions & 33 deletions source/documentacao/componentes/collapse.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,39 +90,6 @@ type: component



<h2 class="doc-title-3">Dispatchers</h2>
<% code("javascript") do %>locastyle.eventDispatcher.eventSubscribe('trigger', fn)<% end %>
<table class="ls-table">
<thead>
<tr>
<th>Trigger</th>
<th>Descrição</th>
</tr>
</thead>
<tbody>
<tr>
<td>ls-collapse-open</td>
<td>É disaparado esse evento assim que o bind é feito no elemento</td>
</tr>
<tr>
<td>ls-collapse-opened</td>
<td>É disaparado esse evento assim que o collapse termina de abrir</td>
</tr>
<tr>
<td>ls-collapse-close</td>
<td>É disaparado esse evento assim que o bind de fechar é feito</td>
</tr>
<tr>
<td>ls-collapse-closed</td>
<td>É disaparado esse evento assim que o collapse termina de fechar</td>
</tr>
</tbody>
</table>
<% code("javascript") do %>
locastyle.eventDispatcher.eventSubscribe('ls-collapse-open', function() {
console.log('Abrir collapse');
})
<% end %>
<hr>
<div class="ls-box-demo">
<button type="button" class="ls-btn-primary" data-ls-module="collapse" data-target="#010">Abre/Fecha o <i>collapse</i></button>
Expand All @@ -142,5 +109,39 @@ locastyle.eventDispatcher.eventSubscribe('ls-collapse-open', function() {
</div>
<% code("html") do %><%= partial('documentacao/shared/collapse/collapse', :locals => { :id => "acordeon", :quant => 2, :header => "Título", content: (lorem.paragraphs 1) }) %><% end %>


<h2 class="doc-title-3">Eventos</h2>
<p>Você pode escutar eventos de abre e fecha nos elementos de collapse, veja a referência abaixo.</p>
<table class="ls-table">
<thead>
<tr>
<th width="200">Evento</th>
<th>Descrição</th>
</tr>
</thead>
<tbody>
<tr>
<th>collapse:opened</th>
<td><p>Quando um collapse abre, o evento <code>collapse:opened</code> é disparado no elemento do módulo. Veja exemplo abaixo.</p></td>
</tr>
<tr>
<th>collapse:closed</th>
<td><p>Quando um collapse fecha, o evento <code>collapse:closed</code> é disparado no elemento do módulo. Veja exemplo abaixo.</p></td>
</tr>
</tbody>
</table>
<p>Exemplo: </p>
<% code("javascript") do %>
// Um collapse específico
$("#id-collapse").on('collapse:opened', function(){
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's better use the event example in the standard established with @RenatoCN

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@itumoraes you mean the option to listen the "body" and use scope to find the element? It is not a standard, is just an option to people be able to listen events in elements created after the page load. The two options are valid.

// do something
})

// Todos os elementos de collapse
$(".ls-collapse").on('collapse:closed', function(){
// do something
})
<%end%>

</section>

34 changes: 12 additions & 22 deletions spec/javascripts/collapse_spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
describe('Collapse:', function() {

beforeEach(function() {
loadFixtures('collapse_fixture.html');
locastyle.collapse.init();

window.test = {
eventFunctionTest: function() {
// fake function
}
};

spyOnEvent(window, 'ls-collapse-open');
spyOnEvent($('#myCollapse4 a'), 'click');
spyOn(window.test, "eventFunctionTest");

ls.eventDispatcher.eventSubscribe('ls-collapse-open', window.test.eventFunctionTest);

});

describe('When click to open collapse', function() {
it('should target be visible', function() {
$('#myCollapse1 [data-ls-module="collapse"]').trigger('click');
expect($('#collapse1')).toBeVisible();
});

it("should trigger the event collapse:opened", function() {
var spyEvent = spyOnEvent(document, 'collapse:opened');
$('#myCollapse1 [data-ls-module="collapse"]').trigger("click");
expect('collapse:opened').toHaveBeenTriggeredOn(document);

var spyEvent = spyOnEvent(document, 'collapse:closed');
$('#myCollapse1 [data-ls-module="collapse"]').trigger("click");
expect('collapse:closed').toHaveBeenTriggeredOn(document);
});

});

describe('When collapse have a class ls-collapse-opened', function() {
Expand All @@ -37,16 +37,6 @@ describe('Collapse:', function() {
});
});

describe('When click to open collapse', function() {
it('should shoot eventDispatcher', function() {
$('#myCollapse4 a').on('click', function(){
ls.eventDispatcher.trigger('ls-collapse-open');
});
$('#myCollapse4 a').trigger('click');
expect('ls-collapse-open').toHaveBeenTriggeredOn(window);
expect(window.test.eventFunctionTest).toHaveBeenCalled()
});
});

describe('Group / Accordeon', function() {

Expand Down