Added jQuery and jQuery-UI as a bundled package

Module.php

@@ -47,6 +47,17 @@ public function getViewHelperConfig()
                     $viewHelper->setService($locator->get('ContentEditable'));
                     $viewHelper->setParams($params);
 
+                    return $viewHelper;
+                },
+                'getContentEditableContent' => function ($sm) {
+                    $locator = $sm->getServiceLocator();
+                    $config = $locator->get('Configuration');
+                    $params = $config['ContentEditable']['params'];
+
+                    $viewHelper = new View\Helper\ContentEditable();
+                    $viewHelper->setService($locator->get('ContentEditable'));
+                    $viewHelper->setParams($params);
+
                     return $viewHelper;
                 },
             ),

config/module.config.php

@@ -5,8 +5,14 @@
 return array(
     __NAMESPACE__ => array(
         'params' => array(
-            'js_source_path' => '/js/ContentEditable.js',
-            'css_source_path' => '/css/ContentEditable.css'
+            // ContentEditable related
+            'js_source_path'           => '/js/ContentEditable.js',
+            'css_source_path'          => '/css/ContentEditable.css',
+
+            // jQuery related
+            'jquery_js_source_path'    => '/js/jquery-1.8.0.min.js',
+            'jquery-ui_js_source_path' => '/js/jquery-ui-1.8.23.custom.min.js',
+            'jquery_ui_css_path'       => '/css/ui-lightness/jquery-ui-1.8.23.custom.css',
             ),
     ),
     'asset_manager' => array(

public/js/ContentEditable.js

@@ -12,6 +12,13 @@ $(document).ready(function() {
     var CE_active           = false; 
 
     function tagClicked() {
+
+        // Init variables on each click
+        CE_attrsHtml        = "";
+        CE_editableUrl      = "";
+        CE_editableTag      = "";
+        CE_editableOriginal = "";
+
         var tagHtml = $(this).html();
         var height = $(this).height();
 
@@ -26,14 +33,16 @@ $(document).ready(function() {
         });
 
         if (!CE_editableUrl) {
-            alert("Attribute data-url is missing!");
+            $('#notification').find('p').html("Attribute data-url is missing!");
+            $("#notification").dialog();
             return;
         }
 
         CE_attrsHtml = CE_attrs.join(' ');
 
         var editableText = $("<textarea class=\"editabler\" style=\"height: " + height + "px\"/>");
         editableText.val(tagHtml);
+
         CE_editableOriginal = tagHtml;
 
         if (CE_active == false) {
@@ -47,20 +56,38 @@ $(document).ready(function() {
     function editableTextBlurred() {
         var html = $(this).val();
         var viewableText = $("<" + CE_editableTag + " " + CE_attrsHtml + ">");
-        var answer = confirm("Do you really want to update this content?")
-        if (answer){
-            viewableText.html(html);
-            $.ajax({
-                type:  'POST',
-                url:   CE_editableUrl,
-                data:  "editable_content=" + html,
-                error: function(XMLHttpRequest, textStatus, errorThrown) {
-                    alert("Content has not been saved due to an error: " + errorThrown);
+
+        $('#notification').find('p').html("Please select action:");
+        $( "#notification" ).dialog({
+            resizable: false,
+            height:140,
+            modal: true,
+            buttons: {
+                "Save": function() {
+                    viewableText.html(html);
+                    $.ajax({
+                        type:  'POST',
+                        url:   CE_editableUrl,
+                        data:  "editable_content=" + html,
+                        success: function() {
+                            $(this).dialog( "close" );
+                        },
+                        error: function(XMLHttpRequest, textStatus, errorThrown) {
+                            $('#notification').find('p').html("There was an error: " + errorThrown);
+                        }
+                    });
+                },
+                "Preview": function() {
+                    viewableText.html(html);
+                    $(this).dialog( "close" );
+                },
+                Cancel: function() {
+                    viewableText.html(CE_editableOriginal);
+                    $(this).dialog( "close" );
                 }
-            });
-        } else {
-            viewableText.html(CE_editableOriginal);
-        }
+            }
+        });
+
         CE_active = false;
         $(this).replaceWith(html);
         viewableText.click(tagClicked);

src/ContentEditable/Manager.php

@@ -23,23 +23,31 @@ public function __construct($params) {
         $this->params = $params;
     }
 
-    public function get($type) 
+    public function get($type, $option) 
     {
         if ($type == 'css') {
-            return $this->getCss();
+            return $this->getCss($option);
         }
-        if ($type == 'js') {
-            return $this->getJavascript();
+        elseif ($type == 'js') {
+            return $this->getJavascript($option);
+        }
+        elseif ($type == 'dialog') {
+            return $this->getContent($option);
         }
     }
 
     /**
      * Generate JS inclusion HTML code
      */
-    public function getJavascript()
+    public function getJavascript($includeBundledJquery = false)
     {
-        $link = '<script type="text/javascript" src="' . $this->params['js_source_path'] . '"></script>';
-        return $link;
+        $links = array();
+        if ($includeBundledJquery === true) {
+            $links[] = '<script type="text/javascript" src="' . $this->params['jquery_js_source_path'] . '"></script>';
+        }
+        $links[] = '<script type="text/javascript" src="' . $this->params['jquery-ui_js_source_path'] . '"></script>';
+        $links[] = '<script type="text/javascript" src="' . $this->params['js_source_path'] . '"></script>';
+        return implode("", $links);
     }
 
     /**
@@ -50,8 +58,41 @@ public function getJavascript()
      */
     public function getCss($media = 'screen')
     {
-        $link = '<link href="' . $this->params['css_source_path'] . '" media="'. $media .'" rel="stylesheet" type="text/css" />';
-        return $link;
+        $links = array();
+        $links[] = '<link href="' . $this->params['css_source_path'] . '" media="'. $media .'" rel="stylesheet" type="text/css" />';
+        $links[] = '<link href="' . $this->params['jquery_ui_css_path'] . '" rel="stylesheet" type="text/css" />';
+
+        return implode("", $links);
+    }
+
+    /**
+     * Create DIV section for the jQuery-UI dialog
+     * 
+     * @return string 
+     */
+    public function getContent($options)
+    {
+        $id = '';
+        $title = '';
+        $content = '';
+
+        if (!empty($options['id'])) {
+            $id = $options['id'];
+        }
+        if (!empty($options['title'])) {
+            $title = $options['title'];
+        }
+        if (!empty($options['content'])) {
+            $content = $options['content'];
+        }
+
+        $html =  '<div class="CE_dialog" id="' . $id . '" title="' . $title . '">';
+        $html .= '    <p id="content">' . $content . '</p>';
+        $html .= '</div>';
+
+        return $html;
     }
 
+
+
 }

src/ContentEditable/View/Helper/ContentEditable.php

@@ -23,9 +23,9 @@ class ContentEditable extends AbstractHelper
      * @param integer $id
      * @return ContentEditable\Helper
      */
-    public function __invoke($type)
+    public function __invoke($type, $option = null)
     {
-        $link = $this->service->get(strtolower($type));
+        $link = $this->service->get(strtolower($type), $option);
         return $link;
     }