Error202
/
yii2-bootstrap
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Finished bootstrap Widget and Modal.

tags/2.0.0-beta
Qiang Xue 12 years ago
parent
7f9cc39797
commit
04a825f462
3 changed files with 202 additions and 281 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      yii/base/View.php
  2. 354
      yii/bootstrap/Modal.php
  3. 127
      yii/bootstrap/Widget.php

2
yii/base/View.php
Unescape View File

@ -741,7 +741,7 @@ class View extends Component
$lines[] = Html::script(implode("\n", $this->js[self::POS_END]), array('type' => 'text/javascript')); $lines[] = Html::script(implode("\n", $this->js[self::POS_END]), array('type' => 'text/javascript'));
} }
if (!empty($this->js[self::POS_READY])) { if (!empty($this->js[self::POS_READY])) {
$js = "jQuery(document).ready(function(){\n{" . implode("\n", $this->js[self::POS_READY]) . "}\n});"; $js = "jQuery(document).ready(function(){\n" . implode("\n", $this->js[self::POS_READY]) . "\n});";
$lines[] = Html::script($js, array('type' => 'text/javascript')); $lines[] = Html::script($js, array('type' => 'text/javascript'));
} }
return empty($lines) ? '' : implode("\n", $lines) . "\n"; return empty($lines) ? '' : implode("\n", $lines) . "\n";

354
yii/bootstrap/Modal.php
Unescape View File

@ -8,279 +8,219 @@
namespace yii\bootstrap; namespace yii\bootstrap;
use Yii; use Yii;
use yii\helpers\Html;
use yii\helpers\ArrayHelper; use yii\helpers\ArrayHelper;
use yii\helpers\Html;
/** /**
* Modal renders a bootstrap modal on the page for its use on your application. * Modal renders a modal window that can be toggled by clicking on a button.
* *
* Basic usage: * For example,
* *
* ```php * ~~~php
* $this->widget(Modal::className(), array( * echo Modal::widget(array(
* 'id' => 'myModal', * 'header' => '<h2>Hello world</h2>',
* 'header' => 'Modal Heading', * 'body' => 'Say hello...',
* 'content' => '<p>One fine body...</p>', * 'toggleButton' => array(
* 'footer' => 'Modal Footer', * 'label' => 'click me',
* // if we wish to display a modal button * ),
* 'buttonOptions' => array(
* 'label' => 'Show Modal',
* 'class' => 'btn btn-primary'
* )
* )); * ));
* ``` * ~~~
*
* The following example will show the content enclosed between the [[begin()]]
* and [[end()]] calls within the modal window:
*
* ~~~php
* Modal::begin(array(
* 'header' => '<h2>Hello world</h2>',
* 'toggleButton' => array(
* 'label' => 'click me',
* ),
* ));
*
* echo 'Say hello...';
*
* Modal::end();
* ~~~
*
* @see http://twitter.github.io/bootstrap/javascript.html#modals * @see http://twitter.github.io/bootstrap/javascript.html#modals
* @author Antonio Ramirez <amigo.cobos@gmail.com> * @author Antonio Ramirez <amigo.cobos@gmail.com>
* @author Qiang Xue <qiang.xue@gmail.com>
* @since 2.0 * @since 2.0
*/ */
class Modal extends Widget class Modal extends Widget
{ {
/** /**
* @var array The additional HTML attributes of the button that will show the modal. If empty array, only * @var string the header content in the modal window.
* the markup of the modal will be rendered on the page, so users can easily call the modal manually with their own
* scripts. The following special attributes are available:
* <ul>
* <li>label: string, the label of the button</li>
* </ul>
*
* For available options of the button trigger, see http://twitter.github.com/bootstrap/javascript.html#modals.
*/
public $buttonOptions = array();
/**
* @var boolean indicates whether the modal should use transitions. Defaults to 'true'.
*/ */
public $fade = true; public $header;
/**
* @var bool $keyboard, closes the modal when escape key is pressed.
*/
public $keyboard = true;
/**
* @var bool $show, shows the modal when initialized.
*/
public $show = false;
/**
* @var mixed includes a modal-backdrop element. Alternatively, specify `static` for a backdrop which doesn't close
* the modal on click.
*/
public $backdrop = true;
/**
* @var mixed the remote url. If a remote url is provided, content will be loaded via jQuery's load method and
* injected into the .modal-body of the modal.
*/
public $remote;
/**
* @var string a javascript function that will be invoked immediately when the `show` instance method is called.
*/
public $onShow;
/**
* @var string a javascript function that will be invoked when the modal has been made visible to the user
* (will wait for css transitions to complete).
*/
public $onShown;
/**
* @var string a javascript function that will be invoked immediately when the hide instance method has been called.
*/
public $onHide;
/**
* @var string a javascript function that will be invoked when the modal has finished being hidden from the user
* (will wait for css transitions to complete).
*/
public $onHidden;
/**
* @var string[] the Javascript event handlers.
*/
protected $events = array();
/** /**
* @var array $pluginOptions the plugin options. * @var string the body content in the modal window. Note that anything between
* the [[begin()]] and [[end()]] calls of the Modal widget will also be treated
* as the body content, and will be rendered before this.
*/ */
protected $pluginOptions = array(); public $body;
/** /**
* @var string * @var string the footer content in the modal window.
*/ */
public $closeText = '&times;'; public $footer;
/** /**
* @var string header content. Header can also be a path to a view file. * @var array the options for rendering the close button tag.
* The close button is displayed in the header of the modal window. Clicking
* on the button will hide the modal window. If this is null, no close button will be rendered.
*
* The following special options are supported:
*
* - tag: string, the tag name of the button. Defaults to 'button'.
* - label: string, the label of the button. Defaults to '&times;'.
*
* The rest of the options will be rendered as the HTML attributes of the button tag.
* Please refer to the [Modal plugin help](http://twitter.github.com/bootstrap/javascript.html#modals)
* for the supported HTML attributes.
*/ */
public $header; public $closeButton = array();
/** /**
* @var string body of modal. Body can also be a path to a view file. * @var array the options for rendering the toggle button tag.
* The toggle button is used to toggle the visibility of the modal window.
* If this property is null, no toggle button will be rendered.
*
* The following special options are supported:
*
* - tag: string, the tag name of the button. Defaults to 'button'.
* - label: string, the label of the button. Defaults to 'Show'.
*
* The rest of the options will be rendered as the HTML attributes of the button tag.
* Please refer to the [Modal plugin help](http://twitter.github.com/bootstrap/javascript.html#modals)
* for the supported HTML attributes.
*/ */
public $content; public $toggleButton;
/**
* @var string footer content. Content can also be a path to a view file.
*/
public $footer;
/** /**
* Widget's init method * Initializes the widget.
*/ */
public function init() public function init()
{ {
parent::init(); parent::init();
$this->name = 'modal'; $this->options = array_merge(array(
'class' => 'modal hide',
$this->defaultOption('id', $this->getId()); ), $this->options);
$this->addCssClass($this->options, 'modal');
$this->defaultOption('role', 'dialog');
$this->defaultOption('tabindex', '-1'); $this->pluginOptions = array_merge(array(
'show' => false,
$this->addClassName('modal'); ), $this->pluginOptions);
$this->addClassName('hide');
if ($this->closeButton !== null) {
if ($this->fade) $this->closeButton = array_merge(array(
$this->addClassName('fade'); 'data-dismiss' => 'modal',
'aria-hidden' => 'true',
$this->initPluginOptions(); 'class' => 'close',
$this->initPluginEvents(); ), $this->closeButton);
} }
/** if ($this->toggleButton !== null) {
* Initialize plugin events if any $this->toggleButton = array_merge(array(
*/ 'data-toggle' => 'modal',
public function initPluginEvents() ), $this->toggleButton);
{ if (!isset($this->toggleButton['data-target']) && !isset($this->toggleButton['href'])) {
foreach (array('onShow', 'onShown', 'onHide', 'onHidden') as $event) { $this->toggleButton['data-target'] = '#' . $this->options['id'];
if ($this->{$event} !== null) {
$modalEvent = strtolower(substr($event, 2));
if ($this->{$event} instanceof JsExpression)
$this->events[$modalEvent] = $this->$event;
else
$this->events[$modalEvent] = new JsExpression($this->{$event});
} }
} }
}
/**
* Initialize plugin options.
* ***Important***: The display of the button overrides the initialization of the modal bootstrap widget.
*/
public function initPluginOptions()
{
if (null !== $this->remote)
$this->pluginOptions['remote'] = Html::url($this->remote);
foreach (array('backdrop', 'keyboard', 'show') as $option) { ob_start();
$this->pluginOptions[$option] = isset($this->pluginOptions[$option]) ob_implicit_flush(false);
? $this->pluginOptions[$option]
: $this->{$option};
}
} }
/** /**
* Widget's run method * Renders the widget.
*/ */
public function run() public function run()
{ {
$this->renderModal(); $this->body = ob_get_clean() . $this->body;
$this->renderButton();
$this->registerScript();
}
/** echo $this->renderToggleButton();
* Renders the button that will open the modal if its options have been configured
*/
public function renderButton()
{
if (!empty($this->buttonOptions)) {
$this->buttonOptions['data-toggle'] = isset($this->buttonOptions['data-toggle'])
? $this->buttonOptions['data-toggle']
: 'modal';
if ($this->remote !== null && !isset($this->buttonOptions['data-remote']))
$this->buttonOptions['data-remote'] = Html::url($this->remote);
$label = ArrayHelper::remove($this->buttonOptions, 'label', 'Button'); $html = $this->renderHeader() . "\n"
$name = ArrayHelper::remove($this->buttonOptions, 'name'); . $this->renderBody() . "\n"
$value = ArrayHelper::remove($this->buttonOptions, 'value'); . $this->renderFooter();
echo Html::tag('div', "\n" . $html . "\n", $this->options);
$attr = isset($this->buttonOptions['data-remote']) $this->registerPlugin('modal');
? 'data-target'
: 'href';
$this->buttonOptions[$attr] = isset($this->buttonOptions[$attr])
? $this->buttonOptions[$attr]
: '#' . ArrayHelper::getValue($this->options, 'id');
echo Html::button($label, $name, $value, $this->buttonOptions);
}
} }
/** /**
* Renders the modal markup * Renders the header HTML markup of the modal
* @return string the rendering result
*/ */
public function renderModal() protected function renderHeader()
{ {
echo Html::beginTag('div', $this->options); $button = $this->renderCloseButton();
if ($button !== null) {
$this->renderModalHeader(); $this->header = $button . "\n" . $this->header;
$this->renderModalBody(); }
$this->renderModalFooter(); if ($this->header !== null) {
return Html::tag('div', "\n" . $this->header . "\n", array('class' => 'modal-header'));
echo Html::endTag('div'); } else {
return null;
}
} }
/** /**
* Renders the header HTML markup of the modal * Renders the HTML markup for the body of the modal
* @return string the rendering result
*/ */
public function renderModalHeader() protected function renderBody()
{ {
echo Html::beginTag('div', array('class'=>'modal-header')); return Html::tag('div', $this->body, array('class' => 'modal-body'));
if ($this->closeText)
echo Html::button($this->closeText, null, null, array('data-dismiss' => 'modal', 'class'=>'close'));
echo $this->header;
echo Html::endTag('div');
} }
/** /**
* Renders the HTML markup for the body of the modal * Renders the HTML markup for the footer of the modal
* @return string the rendering result
*/ */
public function renderModalBody() protected function renderFooter()
{ {
echo Html::beginTag('div', array('class'=>'modal-body')); if ($this->footer !== null) {
echo $this->content; return Html::tag('div', $this->footer, array('class' => 'modal-footer'));
echo Html::endTag('div'); } else {
return null;
}
} }
/** /**
* Renders the HTML markup for the footer of the modal * Renders the toggle button.
* @return string the rendering result
*/ */
public function renderModalFooter() protected function renderToggleButton()
{ {
if ($this->toggleButton !== null) {
echo Html::beginTag('div', array('class'=>'modal-footer')); $tag = ArrayHelper::remove($this->toggleButton, 'tag', 'button');
echo $this->footer; $label = ArrayHelper::remove($this->toggleButton, 'label', 'Show');
echo Html::endTag('div'); if ($tag === 'button' && !isset($this->toggleButton['type'])) {
$this->toggleButton['type'] = 'button';
}
return Html::tag($tag, $label, $this->toggleButton) . "\n";
} else {
return null;
}
} }
/** /**
* Registers client scripts * Renders the close button.
* @return string the rendering result
*/ */
public function registerScript() protected function renderCloseButton()
{ {
// do we render a button? If so, bootstrap will handle its behavior through its if ($this->closeButton !== null) {
// mark-up, otherwise, register the plugin. $tag = ArrayHelper::remove($this->closeButton, 'tag', 'button');
if(empty($this->buttonOptions)) $label = ArrayHelper::remove($this->closeButton, 'label', '&times;');
$this->registerPlugin('modal', $this->pluginOptions); if ($tag === 'button' && !isset($this->closeButton['type'])) {
$this->closeButton['type'] = 'button';
// register events }
$this->registerEvents($this->events); return Html::tag($tag, $label, $this->closeButton);
} else {
return null;
}
} }
}
}

127
yii/bootstrap/Widget.php
Unescape View File

@ -9,19 +9,20 @@ namespace yii\bootstrap;
use Yii; use Yii;
use yii\base\View; use yii\base\View;
use yii\helpers\Json;
/** /**
* Bootstrap is the base class for bootstrap widgets. * \yii\bootstrap\Widget is the base class for all bootstrap widgets.
* *
* @author Antonio Ramirez <amigo.cobos@gmail.com> * @author Antonio Ramirez <amigo.cobos@gmail.com>
* @author Qiang Xue <qiang.xue@gmail.com>
* @since 2.0 * @since 2.0
*/ */
class Widget extends \yii\base\Widget class Widget extends \yii\base\Widget
{ {
/** /**
* @var bool whether to register the asset * @var boolean whether to use the responsive version of Bootstrap.
*/ */
public static $responsive = true; public static $responsive = true;
@ -29,95 +30,75 @@ class Widget extends \yii\base\Widget
* @var array the HTML attributes for the widget container tag. * @var array the HTML attributes for the widget container tag.
*/ */
public $options = array(); public $options = array();
/** /**
* Initializes the widget. * @var array the options for the underlying Bootstrap JS plugin.
* Please refer to the corresponding Bootstrap plugin Web page for possible options.
* For example, [this page](http://twitter.github.io/bootstrap/javascript.html#modals) shows
* how to use the "Modal" plugin and the supported options (e.g. "remote").
*/ */
public function init() public $pluginOptions = array();
{
// ensure bundle
$this->registerBundle(static::$responsive);
}
/** /**
* Registers plugin events with the API. * @var array the event handlers for the underlying Bootstrap JS plugin.
* @param string $selector the CSS selector. * Please refer to the corresponding Bootstrap plugin Web page for possible events.
* @param string[] $events the JavaScript event configuration (name=>handler). * For example, [this page](http://twitter.github.io/bootstrap/javascript.html#modals) shows
* @return boolean whether the events were registered. * how to use the "Modal" plugin and the supported events (e.g. "shown").
* @todo To be discussed
*/ */
protected function registerEvents($selector, $events = array()) public $pluginEvents = array();
{
if (empty($events))
return;
$script = '';
foreach ($events as $name => $handler) {
$handler = ($handler instanceof JsExpression)
? $handler
: new JsExpression($handler);
$script .= ";jQuery('{$selector}').on('{$name}', {$handler});";
}
if (!empty($script))
$this->view->registerJs($script);
}
/** /**
* Registers a specific Bootstrap plugin using the given selector and options. * Initializes the widget.
* * This method will register the bootstrap asset bundle. If you override this method,
* @param string $name the name of the javascript widget to initialize * make sure you call the parent implementation first.
* @param array $options the Javascript options for the plugin
*/ */
public function registerPlugin($name, $options = array()) public function init()
{ {
$selector = '#' . ArrayHelper::getValue($this->options, 'id'); parent::init();
$options = !empty($options) ? Json::encode($options) : ''; if (!isset($this->options['id'])) {
$script = ";jQuery('{$selector}').{$name}({$options});"; $this->options['id'] = $this->getId();
$this->view->registerJs($script); }
} }
/** /**
* Registers bootstrap bundle * Registers a specific Bootstrap plugin and the related events
* @param bool $responsive * @param string $name the name of the Bootstrap plugin
*/ */
public function registerBundle($responsive = false) protected function registerPlugin($name)
{ {
$bundle = $responsive ? 'yii/bootstrap-responsive' : 'yii/bootstrap'; $id = $this->options['id'];
$this->view->registerAssetBundle($bundle); $view = $this->getView();
}
$bundle = static::$responsive ? 'yii/bootstrap-responsive' : 'yii/bootstrap';
$view->registerAssetBundle($bundle);
/** if ($this->pluginOptions !== false) {
* Adds a new class to options. If the class key does not exists, it will create one, if it exists it will append $options = empty($this->pluginOptions) ? '' : Json::encode($this->pluginOptions);
* the value and also makes sure the uniqueness of them. $js = "jQuery('#$id').$name($options);";
* $view->registerJs($js);
* @param string $class }
* @return array
*/ if (!empty($this->pluginEvents)) {
protected function addClassName($class) $js = array();
{ foreach ($this->pluginEvents as $event => $handler) {
if (isset($this->options['class'])) { $js[] = "jQuery('#$id').on('$event', $handler);";
if (!is_array($this->options['class'])) }
$this->options['class'] = explode(' ', $this->options['class']); $view->registerJs(implode("\n", $js));
$this->options['class'][] = $class; }
$this->options['class'] = array_unique($this->options['class']);
$this->options['class'] = implode(' ', $this->options['class']);
} else
$this->options['class'] = $class;
return $this->options;
} }
/** /**
* Sets the default value for an item if not set. * Adds a CSS class to the specified options.
* @param string $key the name of the item. * This method will ensure that the CSS class is unique and the "class" option is properly formatted.
* @param mixed $value the default value. * @param array $options the options to be modified.
* @return array * @param string $class the CSS class to be added
*/ */
protected function defaultOption($key, $value) protected function addCssClass(&$options, $class)
{ {
if (!isset($this->options[$key])) if (isset($options['class'])) {
$this->options[$key] = $value; $classes = preg_split('/\s+/', $options['class'] . ' ' . $class, -1, PREG_SPLIT_NO_EMPTY);
return $this->options; $options['class'] = implode(' ', array_unique($classes));
} else {
$options['class'] = $class;
}
} }
} }

Write Preview
Loading…
Cancel
Save