non minified js

Permalink Browser Info Environment
Hello,

I need to add additional functionality to the block.
Can you please provide the unminified version of the JS?
I need to add a function that automatically scrolls through all the pages.

i.e. go to Next page every 5seconds. At the end, go to page #1, repeat.

Or alternatively, do you have a block that does this?

Type: Discussion
Status: Resolved
wholeo
View Replies:
JohntheFish replied on at Permalink Reply
JohntheFish
You don't need to get inside the block javascript to do this.

You can run your timer script from an HTML block (or jQuickie block) and operate on the pagination elements that are already created by FELM, triggering a click event on each pagination element in turn and then looping back to the first element.

Its probably best to not even start your processing until the first 5s have run after ready and then trigger a click on the next 'page number' in the FELM pagination elements. That will make sure that the web page is fully initialised before you start simulating clicks. To make doubly sure, you should also check that the appropriate FELM marker classes are in place before triggering a pagination click.

You would also need to block any of your timed pagination clicks when a user has front end edit access or things could get really messy. You can do that by testing for the appropriate FELM edit elements being on the page.

A further benefit of this approach is that by leaving the FELM code alone and simply interacting with it through triggering DOM events you will not have to maintain changes through any updates I may make to the block and the block will continue to be supported.
wholeo replied on at Permalink Reply
wholeo
Where can I get more info about FELM?

Is there a sample code (in jQuickie or FELM) for this available?
JohntheFish replied on at Permalink Reply
JohntheFish
There is no sample code to do what you want or instructions for doing such in the FELM documentation because such functionality is outside the intended scope of the addon.

I assume that because you asked about getting inside the script source that you are a fairly experienced JavaScript developer.

The javascript function you need is:
setInterval() (if you want an exact time to repeat)
or
setTimeout() (if you want the code to run and then re-schedule itself)
http://www.w3schools.com/js/js_timing.asp...

The timer loop structure is different depending on which of the above you use.

For the classes and DOM to select and then trigger click events on, you can see them by inspecting the ordinary user view of FELM in firebug or the developer console and looking at the pagination links generated. You can also see the pagination structure generated by FELM at line 53 of the default block view.php, or line 50 of the mark_prev_next_when_active template's view.php.

For a class or element to detect that front end access is enabled, see /elements/jl_felm_block_common_view.php.
Pretty much any of the classes in that file can be used to flag whether front end access is enabled.
wholeo replied on at Permalink Reply 1 Attachment
wholeo
@JohntheFish - Thanks for the feedback.
I am familiar with JavaScripts' interval/timeout feature. I can figure this bit out.

I'm just having some trouble figuring out how to access the function(s) of the pagination.
i.e. what is the name of the function for "Next>"

Would viewing the non-minified version help me figure what to call?
JohntheFish replied on at Permalink Reply
JohntheFish
You don't need to call a function, you just need to trigger a click event on the 'next' link.
wholeo replied on at Permalink Reply
wholeo
Ok thanks, I will try to figure that out.

But wouldn't it be easier if the API was exposed? So that I can call the Next Function, Then Loop when at the end.

I dont need to GUI (next, numbers, prev, etc..). I just need to call the functions. Kind of like a slide show.
JohntheFish replied on at Permalink Reply
JohntheFish
If you don't want the prev/next & numbers to show, you can add a display:none to it.

The FELM javascript was not designed to have an api you can use externally. It is all wrapped in a closure and no functions are visible externally, either directly or through objects such as jQuery. FELM handles events on the dom elements it works with. This type of interface is much more robust than exposing function calls.
wholeo replied on at Permalink Reply
wholeo
I've figured it out, here is my solution:

- call the 'Next' button on interval
- call the '#1' button at the end

$(document).ready(function () {

var currentPosition = 0;
var slideWidth = 500;
var slides = $('.jl_felm_paginate_outer');
var numberOfSlides = slides.length;
var speed = 6000;
var slideShowInterval;

slideShowInterval = null;
slideShowInterval = setInterval(changePosition, speed);

function changePosition() {
if (currentPosition == numberOfSlides) {
currentPosition = 0;
$("[data-jl_felm_page='1']").trigger( "click" );
} else {
currentPosition++;
$( ".jl_felm_next_inner" ).trigger( "click" );
}

}

});
JohntheFish replied on at Permalink Reply
JohntheFish
Yes, that looks about right.

The only little extra you may find useful is to add a check for FELM being in its front end editing state - you don't want the paginator playing about while you are trying to manipulate the list.

You should be able to detect that by looking for the editing controls being active, something like:
if( $('.jl_felm_edit_enable input').is(':checked')){
  // stop the timer and end
}


For c5 being in page/block edit mode, you can simply test at the beginning of the ready handler:
if (CCM_EDIT_MODE){
  return;
}
// rest of your code

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You have not specified a license for this support ticket. You must have a valid license assigned to a support ticket to request a refund.