modal library - added automatic setting of template renderer whether Handlebars is defined, defaults to pure html - fixed modal title issue (remove handlebars syntax from overlay template) - added a sample file for acceptance tests config - robo task to auto create acceptance tests config file based on sample

.gitignore

@@ -4,5 +4,5 @@ composer.phar
 vendor
 tests/_output/*
 bower_components/*
-tests/_output/*
 node_modules
+tests/*.suite.yml

README.md

@@ -48,6 +48,7 @@ Language files.
 - /lib
 MailPoet classes. All classes are autoloaded, under the MailPoet namespace.
 ```php
+// file: ./lib/models/subscriber.php
 namespace \MailPoet\Models;
 class Subscriber {}
 ```

RoboFile.php

@@ -14,13 +14,24 @@ class RoboFile extends \Robo\Tasks {
     $this->_exec('vendor/bin/codecept run unit');
   }
 
+  function testAcceptanceConfig() {
+    // create config file from sample unless a config file alread exists
+    return $this->_copy(
+      'tests/acceptance.suite.yml.sample',
+      'tests/acceptance.suite.yml',
+      true
+    );
+  }
+
   function testAcceptance() {
-    $this
-      ->taskExec('phantomjs --webdriver=4444')
-      ->background()
-      ->run();
-    sleep(2);
-    $this->_exec('vendor/bin/codecept run acceptance');
+    if($this->testAcceptanceConfig()) {
+      $this
+        ->taskExec('phantomjs --webdriver=4444')
+        ->background()
+        ->run();
+      sleep(2);
+      $this->_exec('vendor/bin/codecept run acceptance');
+    }
   }
 
   function testAll() {

assets/css/admin.css

@@ -12,17 +12,6 @@
 body.mailpoet_modal_opened {
   overflow: hidden;
 }
-.mailpoet_blur_overlay {
-  -webkit-filter: blur(1px);
-  -moz-filter: blur(1px);
-  -o-filter: blur(1px);
-  -ms-filter: blur(1px);
-  filter: blur(1px);
-  opacity: 0.8;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
-  filter: alpha(opacity=80);
-  pointer-events: none;
-}
 #mailpoet_modal_overlay {
   height: 100%;
   left: 0;

assets/css/src/modal.styl

@@ -8,16 +8,6 @@ overlay_background_color = alpha(#000, 60%)
 body.mailpoet_modal_opened
   overflow: hidden
 
-// experimental feature: iOS-like effect
-.mailpoet_blur_overlay
-  -webkit-filter: blur(1px)
-  -moz-filter: blur(1px)
-  -o-filter: blur(1px)
-  -ms-filter: blur(1px)
-  filter: blur(1px)
-  opacity: 0.8
-  pointer-events: none
-
 // overlay
 #mailpoet_modal_overlay
   height: 100%

assets/js/mailpoet_modal.js

@@ -5,7 +5,7 @@
         version: 0.8
         author: Jonathan Labreuille
         company: Wysija
-        dependencies: jQuery, Handlebars
+        dependencies: jQuery
 
 
     Options:
@@ -14,18 +14,22 @@
             // Modal window's title
             (string) title: 'Modal title'
 
-            // Handlebar template
-            (string) template: jQuery('#handlebars_template').html()
+            // template
+            (string) template:  jQuery('#handlebars_template').html() or
+                                literal html
 
         Optional:
-            // jQuery cached element object node to be displayed, instead of creating a new one
+            // jQuery cached element object node to be displayed,
+            // instead of creating a new one
             (object) element: jQuery(selector)
 
             // - data object that will be passed to the template when rendering
             (object) data: {},
 
-            // - data will be loaded via this url and passed to the template when rendering
-            // - if a "data" option was specified, it will be merged with the ajax's response data
+            // - data will be loaded via this url and passed to the template
+            // when rendering
+            // - if a "data" option was specified, it will be merged with the
+            // ajax's response data
             (string) url: '/url.json'
 
             // ajax method
@@ -54,7 +58,8 @@
             // callbacks
             (function) onInit: called when the modal is displayed
             (function) onSuccess: called by calling MailPoet_Guide.success()
-            (function) onCancel: called when closing the popup or by calling MailPoet_Guide.cancel()
+            (function) onCancel: called when closing the popup
+                                 or by calling MailPoet_Guide.cancel()
 
     Usage:
 
@@ -92,7 +97,7 @@
             type: null,
 
             // positionning
-            position: 'center',
+            position: 'right',
 
             // data sources
             data: {},
@@ -119,13 +124,14 @@
             onSuccess: null,
             onCancel: null
         },
+        renderer: 'html',
         options: {},
         templates: {
             overlay: '<div id="mailpoet_modal_overlay" style="display:none;"></div>',
             popup: '<div id="mailpoet_popup">'+
                         '<div class="mailpoet_popup_wrapper">'+
                             '<a href="javascript:;" id="mailpoet_modal_close"></a>'+
-                            '<div id="mailpoet_popup_title"><h2>{{ title }}</h2></div>'+
+                            '<div id="mailpoet_popup_title"><h2></h2></div>'+
                             '<div class="mailpoet_popup_body clearfix"></div>'+
                         '</div>'+
                     '</div>',
@@ -144,6 +150,16 @@
                         '<div class="mailpoet_panel_body clearfix"></div>'+
                     '</div>'
         },
+        setRenderer: function(renderer) {
+            this.renderer = (typeof(Handlebars) === "undefined") ? 'html' : 'handlebars';
+        },
+        compileTemplate: function(template) {
+            if(this.renderer = 'html') {
+                return function() { return template; };
+            } else {
+                return Handlebars.compile(template);
+            }
+        },
         init: function(options) {
             if(this.initialized === true) {
                 this.close();
@@ -152,6 +168,9 @@
             // merge options
             this.options = jQuery.extend({}, this.defaults, options);
 
+            // set renderer
+            this.setRenderer();
+
             // init overlay
             this.initOverlay();
 
@@ -161,9 +180,13 @@
             if(this.options.type !== null) {
                 // insert modal depending on its type
                 if(this.options.type === 'popup') {
-                    var modal = Handlebars.compile(this.templates[this.options.type]);
+                    var modal = this.compileTemplate(this.templates[this.options.type]);
+                    // create modal
                     jQuery('#mailpoet_modal_overlay').append(modal(this.options));
+                    // set title
+                    jQuery('#mailpoet_popup_title h2').html(this.options.title);
                 } else if(this.options.type === 'panel') {
+                    // create panel
                     jQuery('#mailpoet_modal_overlay').after(this.templates[this.options.type]);
                 }
 
@@ -186,7 +209,7 @@
                 }
 
                 // compile template
-                this.options.body_template = Handlebars.compile(this.options.template);
+                this.options.body_template = this.compileTemplate(this.options.template);
 
                 // setup events
                 this.setupEvents();

tests/_support/_generated/AcceptanceTesterActions.php

@@ -1,4 +1,4 @@
-<?php  //[STAMP] c5a9d7db770e0530a246c68fa630a7e4
+<?php  //[STAMP] b7decc66e5ef5eaba3d375be7320376b
 namespace _generated;
 
 // This class was automatically generated by build task

tests/acceptance.suite.yml.sample

@@ -10,4 +10,6 @@ modules:
         - WebDriver:
             url: 'http://127.0.0.1:8888'
             browser: phantomjs
+            wait: 1
+            restart: true
         - \Helper\Acceptance

views/index.html

@@ -44,7 +44,7 @@
       $(function() {
         $('#modal_popup').on('click', function() {
           MailPoet.Modal.popup({
-            title: "Testing 1 2...",
+            title: "Testing <strong>1 2...</strong>",
             template: "<h3>Hello World!</h3>"
           });
         });
@@ -52,7 +52,8 @@
           MailPoet.Modal.panel({
             title: "Testing 1 2...",
             template: "<h3>Hello World!</h3>",
-            width: "50%"
+            width: "40%",
+            overlay: true
           });
         });
       });

views/layout.html

@@ -21,4 +21,4 @@
 )}}
 
 <!-- todo: make it easier to load a dependency (loaded with Bower) -->
-<script type="text/javascript" src="{{ assets_url }}/../bower_components/handlebars/handlebars.min.js"></script>
+<!-- <script type="text/javascript" src="{{ assets_url }}/../bower_components/handlebars/handlebars.min.js"></script> -->