Implement max width for modal via data attribute

This commit adds a max-width aka. different width per modal.
Just add the modal-maxwidth plugin to your code and
`data-cssmodal-maxwidth` with the value of a pixel-based max-width.

Reference #68.

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## HEAD
 
+* Implement max width for modal via data attribute
+
 * Fix vertical resizing for large pictures
 * Fix margins around modal in resize plugin
 

README.md

@@ -128,6 +128,7 @@ We have a couple for the modal to enhance it:
 * Resize - Resizes modal to size of input elements
 * Gallery - A lightbox plugin (in connection with resize)
 * HTML5 Video - Load videos within the modal
+* Maximum Width - Set a custom maximum width on a per-modal basis
 
 
 ## Bug reports and feature requests

index.html

@@ -40,6 +40,7 @@ <h2>Examples</h2>
  <li><a href="#modal-html5video" title="Clicking this link shows a modal with HTML5 Video content">Demo HTML5Video</a></li>
  <li><a href="#modal-image" title="Clicking this link shows a modal with image content">Demo Image</a></li>
  <li><a href="#modal-image2" title="Clicking this link shows a modal with image content">Demo Image 2</a></li>
+ <li><a href="#modal-max-width" title="Clicking this link shows a modal with a max width">Maximum width</a></li>
  <li><a href="#modal-gallery" title="Clicking this link shows a modal with a gallery">Demo Gallery (with captions)</a></li>
  <li><a href="#modal-gallery-boring/1" title="Clicking this link shows a modal with a gallery">Demo Gallery (2nd image active)</a></li>
  </ul>
@@ -228,6 +229,19 @@ <h2 id="label-zoomout">A zoomed out modal</h2>
  data-dismiss="modal">×</a>
  </section>
 
+ <section class="modal--show" id="modal-max-width" tabindex="-1"
+ data-cssmodal-maxwidth="400"
+ role="dialog" aria-labelledby="modal-label" aria-hidden="true">
+ <div class="modal-inner">
+ <div class="modal-content">
+ Modal with max-width.
+ </div>
+ </div>
+
+ <a href="#!" class="modal-close" title="Close this modal" data-close="Close"
+ data-dismiss="modal">×</a>
+ </section>
+
  <!-- A modal with some images -->
  <section class="modal modal--gallery" id="modal-gallery" tabindex="-1"
  role="dialog" aria-labelledby="modal-label" aria-hidden="true"
@@ -386,6 +400,7 @@ <h2 id="label-zoomout">A zoomed out modal</h2>
 
  <!-- Plugins -->
  <script src="plugins/html5video.js"></script>
+ <script src="plugins/modal-maxwidth.js"></script>
  <script src="plugins/modal-resize.js"></script>
  <script src="plugins/gallery.js"></script>
  </body>

plugins/modal-maxwidth.js

@@ -0,0 +1,97 @@
+/*
+ * CSS Modal Plugin for setting a max-width for modals
+ *
+ * @author Hans Christian Reinl
+ * @date 2014-05-27
+ *
+ */
+(function (global) {
+ 'use strict';
+
+ /**
+ * Main modal object
+ */
+ var CSSModal;
+
+ /**
+ * Include styles into the DOM
+ * @param {string} rule Styles to inject into the DOM
+ * @param {string} id Unique ID for styles
+ */
+ var _injectStyles = function (rule, id) {
+ var element = document.createElement('div');
+
+ id = 'modal__rule' + (id || '');
+
+ // Remove all current rules
+ if (document.getElementById(id)) {
+ document.getElementById(id).parentNode.removeChild(document.getElementById(id));
+ }
+
+ element.id = id;
+ element.innerHTML = '<style>' + rule + '</style>';
+
+ // Append a new rule
+ document.body.appendChild(element);
+ };
+
+ /**
+ * Scale the modal according to its custom width
+ */
+ var _scale = function () {
+ var element = CSSModal.activeElement;
+ var maxWidth = element.getAttribute('data-cssmodal-maxwidth');
+
+ if (maxWidth) {
+ _injectStyles('[data-cssmodal-maxwidth] .modal-inner {' +
+ 'max-width: ' + parseInt(maxWidth, 10) + 'px;' +
+ 'margin-left: -' + (parseInt(maxWidth, 10) / 2) + 'px;' +
+ '}' +
+
+ '[data-cssmodal-maxwidth] .modal-close:after {' +
+ 'margin-right: -' + (parseInt(maxWidth, 10) / 2) + 'px !important;' +
+ '}', element.id);
+ }
+ };
+
+ /**
+ * Plugin API
+ */
+ var _api = {
+ scaleMaxSize: _scale
+ };
+
+ /**
+ * Initial call
+ */
+ var init = function (modal) {
+ CSSModal = modal;
+
+ /*
+ * Assign basic event handlers
+ */
+ CSSModal.on('cssmodal:show', document, _scale);
+
+ // Public API
+ return _api;
+ };
+
+ /*
+ * AMD, module loader, global registration
+ */
+
+ // Expose modal for loaders that implement the Node module pattern.
+ if (typeof module === 'object' && module && typeof module.exports === 'object') {
+ module.exports = _api;
+
+ // Register as an AMD module
+ } else if (typeof define === 'function' && define.amd) {
+
+ define(['CSSModal'], init);
+
+ // Export CSSModal into global space
+ } else if (typeof global === 'object' && typeof global.document === 'object') {
+ init(global.CSSModal);
+ }
+
+}(window));

plugins/modal-maxwidth.scss

@@ -0,0 +1,20 @@
+/**
+ * Custom maximum width for a modal
+ *
+ * Usage: Set `data-cssmodal-maxwidth` with a pixel-based max-width as a value.
+ */
+[data-cssmodal-maxwidth] {
+ .modal-inner {
+ width: 100%;
+ }
+
+ @media screen and (max-width: $modal-max-width + 40) {
+ .modal-inner {
+ left: 50%;
+ }
+
+ .modal-close:after {
+ right: 50% !important;
+ }
+ }
+}

test/modal.css

@@ -790,23 +790,23 @@ html {
  *
  * @since 1.1.0alpha
  */
-[data-cssmodal-resize] .modal-inner {
+[data-cssmodal-resize] .modal-inner, [data-cssmodal-maxwidth] .modal-inner {
  -webkit-transition: none;
  transition: none;
 }
 @media screen and (max-width: 690px) {
- [data-cssmodal-resize] .modal-inner {
+ [data-cssmodal-resize] .modal-inner, [data-cssmodal-maxwidth] .modal-inner {
  right: auto !important;
  }
- [data-cssmodal-resize] .modal-inner img {
+ [data-cssmodal-resize] .modal-inner img, [data-cssmodal-maxwidth] .modal-inner img {
  max-width: 100% !important;
  }
- [data-cssmodal-resize] .modal-close:after {
+ [data-cssmodal-resize] .modal-close:after, [data-cssmodal-maxwidth] .modal-close:after {
  right: 50%;
  }
 }
 @media screen and (max-width: 30em) {
- [data-cssmodal-resize] .modal-inner {
+ [data-cssmodal-resize] .modal-inner, [data-cssmodal-maxwidth] .modal-inner {
  left: 0 !important;
  right: 0 !important;
  margin-left: 0 !important;
@@ -818,6 +818,23 @@ html {
  display: block;
 }
 
+/**
+ * Custom maximum width for a modal
+ *
+ * Usage: Set `data-cssmodal-maxwidth` with a pixel-based max-width as a value.
+ */
+[data-cssmodal-maxwidth] .modal-inner {
+ width: 100%;
+}
+@media screen and (max-width: 690px) {
+ [data-cssmodal-maxwidth] .modal-inner {
+ left: 50%;
+ }
+ [data-cssmodal-maxwidth] .modal-close:after {
+ right: 50% !important;
+ }
+}
+
 /*
  * CSS Modal Plugin for displaying an image gallery
  *

test/modal.scss

@@ -8,6 +8,7 @@
 // Include Modal
 @import "../modal";
 @import "../plugins/modal-resize";
+@import "../plugins/modal-maxwidth";
 @import "../plugins/gallery";
 @import "../plugins/spinner";
 
@@ -48,6 +49,10 @@
  @extend %modal--resize;
 }
 
+[data-cssmodal-maxwidth] {
+ @extend %modal--resize;
+}
+
 .spinner {
  @extend %spinner;
 }