Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1

TOPIC:

Controlling the J-Cook Modal View scroll-bars 01 Sep 2013 22:04 #10940

  • vlemos
  • vlemos's Avatar Topic Author
  • Online
  • Elite Member
  • Elite Member
  • Posts: 295
  • Thank you received: 41
Hello Cooks

For those of us who have a great distaste for serving up their modal views with scrolls, here is a quick fix. Please note that you shouldn't be squeamish about jdom if you want to attempt this update.

Usage:
	<?php echo JDom::_('html.fly.file', array(
		.
		.
		.

		'modal_height' => 400,
		'modal_width' => 600,
		'scroll_options' => 'no',
		.
		.
		
	));?>


First we will edit /dom/html.php
class JDomHtml extends JDom
{
	.
	.
	.

	protected $scroll_options;


	function __construct($args)
	{
		.
		.
		.
		$this->arg('scroll_options', 	null, $args);
		.
	}

	protected function embedLink($html)
	{

		.
		.
		.

		if ((isset($this->href) || isset($this->target) ||  isset($this->task)) && (isset($this->dataValue)) && (!empty($this->dataValue)))
		{
			.
			.
			.

			$html = JDom::_("html.link", array(
				.
				.
				.

				'scroll_options' => (isset($this->scroll_options)?$this->scroll_options:null),
			));
		}

		return $html;
	}

}


Next we edit /dom/html/link.php
class JDomHtmlLink extends JDomHtml
{
	.
	.
	.

	protected $scroll_options;


	function __construct($args)
	{
		.
		.
		.

		$this->arg('scroll_options' , null, $args);

	}

		.
		.
		.

	function modalLink()
	{
		JHTML::_('behavior.modal');
		
		$this->addClass('modal');
		
		$rel = "{";
		$rel.= "handler: '" . ($this->handler?$this->handler:'') . "'";

		if ($this->modal_width && $this->modal_height)
		{
			$rel .=	", size: {x: " . ((int)$this->modal_width?(int)$this->modal_width:"null")
						. 	", y: " . ((int)$this->modal_height?(int)$this->modal_height:"null")
						. "}";
		}
		if ($this->scroll_options)
		{
			$options = array("auto", "no", "yes");
			if (!in_array(strtolower($this->scroll_options), $options))
				$this->scroll_options = "auto";
			
			$rel .=	", iframeOptions: {scrolling:'" . $this->scroll_options
						. "'}";
		}
		$rel.=	"}";
		
		$this->addSelector('rel', $rel);

	}

}

And that's all to it.

Now you can turn off the scrollbars on selected modal views anywhere in your j-cook component.

Hope this helps someone coding in this area.

Regards
v
The following user(s) said Thank You: admin

Please Log in or Create an account to join the conversation.

Controlling the J-Cook Modal View scroll-bars 02 Sep 2013 08:52 #10944

  • admin
  • admin's Avatar
  • Offline
  • Administrator
  • Administrator
  • Chef
  • Posts: 3711
  • Thank you received: 986
Thank you very much.
Good coding. Secure against misc injection.

K++

Only one suggestion :
change the name of the option:
scroll_options => modalScrolling

I think also I will clean 'rel' construction, using a JSON conversion of an object. (more flexible and more open)
Coding is now a piece of cake
The following user(s) said Thank You: vlemos

Please Log in or Create an account to join the conversation.

Controlling the J-Cook Modal View scroll-bars 02 Sep 2013 13:43 #10945

  • vlemos
  • vlemos's Avatar Topic Author
  • Online
  • Elite Member
  • Elite Member
  • Posts: 295
  • Thank you received: 41
Xcellent, done!!



Edited:
Or maybe even "modal_scrolling" to keep the convention established by the width and height modal parameters.
	'modal_scrolling' => 'no',

Please Log in or Create an account to join the conversation.

Last edit: by vlemos.
  • Page:
  • 1
Time to create page: 0.080 seconds

Although I found this tool some time ago I just started learning experimenting and building this first component on Monday and now on Thursday afternoon it's already online. Although I already had a working version done with another tool this is much easier to build and at the end you have the freedom to own your own component. Once you know how to use Cook you will boost your productivity as the learning curve is really moderate compared to many other tools.
Giori (Forum)

Get Started