Opening a SqueezeBox iframe with javascript?

[ewel]

After searching for some time to find the files, I looked into modal.js and behaviour.php and I searched this forum and the web, but the only way I have found explained to use the Lightbox-like popup (also used in the back-end for example for the Parameters in Article Manager) is as follows:

First you need to include the modal script.
JHTML::_('behavior.modal');
The you define the link like this
Your text
This opens up a new window, like the mediamanager with size 640x200.

However I need to do this from a javascript that is activated by the submission of a small form, and I would like to open a url with Squeezebox where now I have window.open(myurl); in my javascript.

Does anyone know how to do this? It seems lightbox can be used from javascript with something like lighbox.open but I have not found any information on the equivalent for the modal.js Squeezebox installed with Joomla 1.5.

[idealists]

I would also very much like a response to this.
As I would like to be able to open an iFrame squeezebox 10seconds after the page has loaded (using settimeout).

[idealists]

I've created a bit of a hack that works for me in FF (Windows). Haven't tested it much.

In the .js file, I created the following function (just before initialize: function(options) { line)

loadModal: function(modalUrl) {
this.setContent('iframe',modalUrl);
},

And then within the "window.addEvent('domready', function() {" function, I added the following:
setTimeout("SqueezeBox.loadModal('http://www.google.com')",10000); //Loads google in an iFrame 10 seconds after page loads

I just hacked this together, head butted my way though it.  I don't know if there is a better or more correct way of doing it.
I would like to make the X,Y attributes configurable too - at the moment it is just usinbg the default that is defined in the .js file.

[idealists]

Ok

I have updated my custom mod:

Code: Select all

loadModal: function(modalUrl,handler,x,y) {
		 this.initialize();		 
		 
		 var options = $merge(options || {}, Json.evaluate("{handler: '" + handler + "', size: {x: " + x +", y: " + y + "}}"));		
		
		 this.setOptions(this.presets, options);
		 this.assignOptions();
		 this.setContent(handler,modalUrl);
		 
	},

and moved it after the initialize function:

Code: Select all

initialize: function(options) { ....... }

Then when I call it, I call it like so:

Code: Select all

<script type="text/javascript">
			window.addEvent('domready', function() {

			SqueezeBox.initialize({});					
			
			SqueezeBox.loadModal('http://www.google.com','iframe',650,400);
			 
		});
</script>

Again, just head banged my way to make this solution. Would love more experienced peoples feedback, improvements.

[ewel]

I see you answered your own question
For me unfortunately this does not work, as I need it for a plugin and I cannot rely on users hacking their Joomla installation. Unless perhaps it is possible to put part of your code in a plugin's code?

The way I see it, for Squeezebox to be really useful as a Joomla feature it needs to allow calls from a) form submissions passing the url, and b) javascript or php functions in modules and plugins.
It could be that this is already is the case, but I do not understand enough of the code to see how.

I do think that once it is built in Squeezebox should be a feature instead of merely being a tool for the back-end. Having this and then also installing something like Slimbox seems a waste.

[ewel]

Just had a thought.. seeing what you did, and that you are modifying a class, and remembering that I have seen things like x extends class y (not that I know exactly what that means!), would it be possible to do what you do by way of extending the class and placing the code extending the class into a module or plugin?

[ewel]

I would still like to have the built-in ability to activate Squeezebox from javascript and with a submit button, but I managed to solve my immediate problem.

So, for those who are interested, here is how I managed to get a form to work with Squeezebox using a workaround. Basically I replaced the submit button by a link.

Code: Select all

    <script type="text/javascript"><!-- 
        myfunction() {
            some stuff to change the target url based on form input
        }
    //---></script>
    <form method="POST" name="MyForm" onSubmit="javascript:void(0);" action="#">
      <span id="prompt">$prompt </span>
      <input type="text" name="textfield" onkeyup="myfunction();" onchange="myfunction();" onBlur="myfunction();"> 
      <a class="modal" href="http://targetdomain.com" rel="{handler: 'iframe', size: {x: 800, y: 600}}" id="link">[ $buttonTxt ]</a>
    </form>

The drawback of using a link is that pressing the key does not result in pressing the submit button, obviously. However it is possible to make the enter button simulate the clicking of the link. To make this work, this must be added in the text field: onKeyPress="return entertolink(event);". Then the following must be added to the javascript:

Code: Select all

      if (!document.all) {
        HTMLElement.prototype.click = function() {
          var evt = this.ownerDocument.createEvent('MouseEvents');
          evt.initMouseEvent('click', true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
          this.dispatchEvent(evt);
        }
      }
function entertolink(evt) {
 if (window.event) {
  varkeyCode = event.keyCode;
 } else if (evt.which) {
  varkeyCode = evt.which;
 } else if (e || e.which) {
 varkeyCode = e.which;
 }
 if (varkeyCode == 13) {
  document.getElementById('maplink').click();
  return false;
 }
}

[fidoboy]

I'm not sure to understand your solution, currently i want that my js uses the sqeezebox instead the new window. Right now, i've a function in my .js file like this:

Code: Select all

function create_form(d,txt,lang,gn,tgt){
fx_2g=d.createElement('form');
d.body.appendChild(fx_2g);
fx_2g.target=tgt;
fx_2g.method='POST';
fx_2g.action='http://myserver.com/catchit.php';
//text
t=d.createElement('input');
t.name='text';
t.type='hidden';
t.value=txt;
fx_2g.appendChild(t);
//lang
l=d.createElement('input');
l.name='lang';
l.type='hidden';
l.value=lang;
fx_2g.appendChild(l);
//gn
g=d.createElement('input');
g.name='gn';
g.type='hidden';
g.value=gn;
fx_2g.appendChild(g);
//interface
i=d.createElement('input');
i.name='interface';
i.type='hidden';
i.value='full';
fx_2g.appendChild(i);
//submit
window.open('', tgt, 'width=350,height=170,scrollbars=no,location=no,menubar=no,resizable=no,status=no,toolbar=no'); 
fx_2g.submit();
delete fx_2g;
return false;
}

How can i replace the window.open to show a modal window (sqeezebox)??

thanks in advance, regards

[ewel]

I think you would have to give the solution of idealists a try.

[fidoboy]

May be that you are right, but i don't know where to put the code proposed by idealist...

regards,

[ewel]

I think it would be media/system/js/modal.js

[fidoboy]

Ok, it works, now... but there is a problem, i need to post data from a form into another domain that is opened in the modal window...

Code: Select all

function create_form(d,txt,lang,gn,tgt){
fx_2g=d.createElement('form');
d.body.appendChild(fx_2g);
fx_2g.target=tgt;
fx_2g.method='POST';
fx_2g.action='http://otherdomain.com/catchit.php';
//text
t=d.createElement('input');
t.name='text';
t.type='hidden';
t.value=txt;
fx_2g.appendChild(t);

window.open('', tgt, width=350,height=170,scrollbars=no,location=no,menubar=no,resizable=no,status=no,toolbar=no');

fx_2g.submit();
delete fx_2g;
return false;
}

as you can see, the code creates a form and posts the contents into another site, i want a modal window to open the target, and i can't figure how to do it...

regards,

[ewel]

Creating a form on the fly is beyond my abilities but I did manage to open Squeezebox using a form as you can see above, by using a submission link instead of a button.

[fidoboy]

Well, may be that the solution is as simple as create the form into the SqueezeBox, but i don't know how... is there any documentation available for SqueezeBox? How can i create my form into the iframe?

regards,

[oc666]

To open page in squeezebox add the code.

Code: Select all

<a rel="{handler: 'iframe', size: {x: width, y: height}}" href="address" class="modal">link name</a>

replace the width, height and the href (your page link).
I just try to manipulate data from the iframe to the page which opened the iframe and I cannot do this. I try window.opener or parent objects but I got failed to do this.

[ewel]

I have made a little progress again... or so I thought.

Instead of the GHOP document explaining that the <hear> tag needs to have a javascript SqueezeBox.initialise script I used this line of code to initialise Squeezebox in my php:

Code: Select all

JHTML::_( 'behavior.modal');

In my javascript, I have something like this:

Code: Select all

function makeSqueezeBoxlink(alink) {
	alink.className = 'modal';
	alink.setAttribute("rel", '{handler: \'iframe\', size: {x:600, y:400}}');
}
var a = document.getElementsByTagName("a");
for (var i=0;i<a.length;i++){
	makeSqueezeBoxlink(a[i]);
}

Similarly, I could have done document write to make a link with the right class and rel. Anyway, like this all my links should open with SqueezeBox, but they don't.

What I do get in the view page source of my browser is as follows (aside from the mootools script tag which is also there).

Code: Select all

<link rel="stylesheet" href="/media/system/css/modal.css" type="text/css" />
<script type="text/javascript" src="/media/system/js/modal.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
	SqueezeBox.initialize({});
	$$('a.externalink').each(function(el) {
		el.addEvent('click', function(e) {
			new Event(e).stop();
			SqueezeBox.fromElement(el);
		});
	});
});
</script>

When I hardcode the rel attribute and class into the html links are opened with Squeezebox, so the initialisation works. When I check with alerts what the class and rel attribute is of links without hardcoded rel and class they are as they should be according to my javascript.

So, I am really puzzled why this does not work - perhaps modal.js does not recognise link attributes added by javascript? It seemed promising!

[sourli]

well,
i tried this today and the only changes i made was:

1. Added the

Code: Select all

JHTML::_('behavior.modal');

in my template's index.php

2. Added the

Code: Select all

<a rel="{handler: 'iframe', size: {x: width, y: height}}" href="address" class="modal">link name</a>

inside an article.


Everything is working perfect....

[ewel]

Sure, but the point of this thread is to find out how the same effect can be achieved through javascript instead of by adding frills to an html link.

[jpcabrales]

Code: Select all

loadModal: function(modalUrl,handler,x,y) {
		 this.initialize();		 
		 
		 var options = $merge(options || {}, Json.evaluate("{handler: '" + handler + "', size: {x: " + x +", y: " + y + "}}"));		
		
		 this.setOptions(this.presets, options);
		 this.assignOptions();
		 this.setContent(handler,modalUrl);
		 
	},

Sweet. Just what I needed. Thanks!

[webmonkiee]

Ok, it works, now... but there is a problem, i need to post data from a form into another domain that is opened in the modal window...

Hey fidoboy, did you ever figure this out? I'm trying to post data from a form into an opened modal window too. It should be easy by setting the form target to the modal window, but to do that we need a way to target the modal window. Is there a way to assign the "name" attribute to a modal window when opening? We can set the size but that's about all I can find.

This is driving me crazy!

Thanks for any and all help.
Jonathan

*************SOLVED - Kinda****************

I added the iFrame "name" attribute in the media/js/modal.js file around line 360.

Problem now is targeting the iFrame AFTER the squeezebox is done generating it so I can pass in the POST variables.

[wallabyted]

Thanks for the code. This worked for me:

Initialise in PHP

Code: Select all

JHTML::_( 'behavior.modal');

My Javascript file:

Code: Select all

var MySqueezeBox = {
    
    loadModal: function(modalUrl,handler,x,y) {     
       var options = $merge(options || {}, Json.evaluate("{handler: '" + handler + "', size: {x: " + x +", y: " + y + "}}"));      
       this.setOptions(this.presets, options);
       this.assignOptions();
       this.setContent(handler,modalUrl);
   },

	extend: $extend
	
}
window.addEvent('domready', function() {
    MySqueezeBox.extend(SqueezeBox);
    MySqueezeBox.initialize({});
});

example usage:

Code: Select all

MySqueezeBox.loadModal('http://www.google.com','iframe',650,400);

[JBottero]

The modal.js hack above is GOLD!

[OC5]

Thanks for the code above.

Now I only would need to know, how to close the window from the page that's loaded into iframe?
I've disabled the close button and overlay closing function.

[impactmedia]

I also tried this solution ... works great but the close icon does not work. What did I miss ? Can anyone help ? Thank you !

[impactmedia]

Thanks for the code. This worked for me:

Initialise in PHP

Code: Select all

JHTML::_( 'behavior.modal');

My Javascript file:

Code: Select all

var MySqueezeBox = {
    
    loadModal: function(modalUrl,handler,x,y) {     
       var options = $merge(options || {}, Json.evaluate("{handler: '" + handler + "', size: {x: " + x +", y: " + y + "}}"));      
       this.setOptions(this.presets, options);
       this.assignOptions();
       this.setContent(handler,modalUrl);
   },

	extend: $extend
	
}
window.addEvent('domready', function() {
    MySqueezeBox.extend(SqueezeBox);
    MySqueezeBox.initialize({});
});

example usage:

Code: Select all

MySqueezeBox.loadModal('http://www.google.com','iframe',650,400);

Anyone having the issue that the close button does not work ?

[wallabyted]

Re: Close button not working

I was getting the same problem on a recent project. The only thing I could see that was different to my other working versions was the order that my js files were loaded.

When I used the JDocument::addScript method to include my custom js file, it started working again.

Code: Select all

            $document = JFactory::getDocument();
            $document->addScript('path/to/script.js');

I'm not completely sure on what the order needs to be, but by doing it this way you will ensure that your js file is loaded after the mootools library and that your domready event listener will be registered before the squeezebox domready event listener.

Hope this helps.

[rizariza]

I found somewhere else something along these lines, and this seems to work for me:

var dummylink = new Element('a', {
href: "http://www.google.com/" ,
rel: "{handler: 'iframe', size: {x: 650, y: 375}}"
});
SqueezeBox.fromElement(dummylink);

Is this what people are looking for?

[ewel]

Probably! I have to look into it...

[PtrNrs]

I found somewhere else something along these lines, and this seems to work for me:

var dummylink = new Element('a', {
href: "http://www.google.com/" ,
rel: "{handler: 'iframe', size: {x: 650, y: 375}}"
});
SqueezeBox.fromElement(dummylink);

Thank you rizariza, that fixes the close button problem brilliantly but I'm not clever enough in Javascript to know how to pass the URL, x & y to a javascript function to do the same thing.

Any ideas?

[ForkyD]

Ok

I have updated my custom mod:

Code: Select all

loadModal: function(modalUrl,handler,x,y) {
		 this.initialize();		 
		 
		 var options = $merge(options || {}, Json.evaluate("{handler: '" + handler + "', size: {x: " + x +", y: " + y + "}}"));		
		
		 this.setOptions(this.presets, options);
		 this.assignOptions();
		 this.setContent(handler,modalUrl);
		 
	},

and moved it after the initialize function:

Code: Select all

initialize: function(options) { ....... }

Then when I call it, I call it like so:

Code: Select all

<script type="text/javascript">
			window.addEvent('domready', function() {

			SqueezeBox.initialize({});					
			
			SqueezeBox.loadModal('http://www.google.com','iframe',650,400);
			 
		});
</script>

Again, just head banged my way to make this solution. Would love more experienced peoples feedback, improvements.

Been looking for a solution to this, THANK YOU!! <3