Image gallery fixes and add-on specific js and css files
authorChuck Scott <cscott@gaslightmedia.com>
Tue, 29 Dec 2015 21:36:08 +0000 (16:36 -0500)
committerChuck Scott <cscott@gaslightmedia.com>
Tue, 29 Dec 2015 21:36:08 +0000 (16:36 -0500)
controllers/admin.php
controllers/front.php
css/admin.css
defines.php
js/admin.js
js/imageUpload/imageUpload.js
views/admin/member/memberInfo.html

index e909140..451d3b4 100644 (file)
@@ -275,19 +275,33 @@ class glmMembersAdmin extends GlmPluginSupport
 
         wp_enqueue_media();
 
-        // Scripts included with this plugin
-        wp_register_script('glm-members-admin-js',
-                GLM_MEMBERS_PLUGIN_URL . 'js/admin.js',
-                array(
-                    'jquery'
-                ));
-        wp_enqueue_script('glm-members-admin-js');
+        // Register any admin.js files in the js directory of any glm members plugin
+        reset($this->config['addOns']);
+        foreach ($this->config['addOns'] as $a) {
+            $jsFile = GLM_MEMBERS_WORDPRESS_PLUGIN_PATH.$a['slug'].'/js/admin.js';
+            if (is_file($jsFile)) {
+                $jsName = $a['slug'].'-admin-js';
+                wp_register_script(
+                    $jsName,
+                    GLM_MEMBERS_WORDPRESS_PLUGIN_URL.'/'.$a['slug'].'/js/admin.js'
+                );
+                wp_enqueue_script($jsName);
+            }
+        }
 
-        // A simple set of styles for things I haven't found as a WordPress
-        // default yet
-        wp_register_style('glmMembersAdminStyle',
-                GLM_MEMBERS_PLUGIN_URL . 'css/admin.css');
-        wp_enqueue_style('glmMembersAdminStyle');
+        // Register any admin.css files in the css directory of any glm members plugin
+        reset($this->config['addOns']);
+        foreach ($this->config['addOns'] as $a) {
+            $cssFile = GLM_MEMBERS_WORDPRESS_PLUGIN_PATH.$a['slug'].'/css/admin.css';
+            if (is_file($cssFile)) {
+                $cssName = $a['slug'].'-admin-css';
+                wp_register_style(
+                    $cssName,
+                    GLM_MEMBERS_WORDPRESS_PLUGIN_URL.'/'.$a['slug'].'/css/admin.css'
+                );
+                wp_enqueue_style($cssName);
+            }
+        }
 
         // Image Upload scripts and css for Member DB and perhaps other
         wp_register_script('glm-members-admin-image-upload',
index a863b57..5c8986a 100644 (file)
@@ -143,22 +143,32 @@ class glmMembersFront extends GlmPluginSupport
         wp_enqueue_script('jquery-ui-dialog');
         wp_enqueue_style("wp-jquery-ui-dialog");
 
-        // Front end script
-        wp_register_script(
-            'glm-members-front-js',
-            GLM_MEMBERS_PLUGIN_URL . 'js/front.js',
-            array(
-                'jquery'
-            )
-        );
-        wp_enqueue_script('glm-members-front-js');
+        // Register any front.js files in the js directory of any glm members plugin
+        reset($this->config['addOns']);
+        foreach ($this->config['addOns'] as $a) {
+            $jsFile = GLM_MEMBERS_WORDPRESS_PLUGIN_PATH.$a['slug'].'/js/front.js';
+            if (is_file($jsFile)) {
+                $jsName = $a['slug'].'-front-js';
+                wp_register_script(
+                    $jsName,
+                    GLM_MEMBERS_WORDPRESS_PLUGIN_URL.'/'.$a['slug'].'/js/front.js'
+                );
+                wp_enqueue_script($jsName);
+            }
+        }
 
-        // A simple set of styles for things I haven't found as a WordPress
-        wp_register_style(
-            'glmMembersFrontStyle',
-            GLM_MEMBERS_PLUGIN_URL . 'css/front.css'
-        );
-        wp_enqueue_style('glmMembersFrontStyle');
+        // Register any front.css files in the css directory of any glm members plugin
+        foreach ($this->config['addOns'] as $a) {
+            $cssFile = GLM_MEMBERS_WORDPRESS_PLUGIN_PATH.$a['slug'].'/css/front.css';
+            if (is_file($cssFile)) {
+                $cssName = $a['slug'].'-front-css';
+                wp_register_style(
+                    $cssName,
+                    GLM_MEMBERS_WORDPRESS_PLUGIN_URL.'/'.$a['slug'].'/css/front.css'
+                );
+                wp_enqueue_style($cssName);
+            }
+        }
 
     }
 
index c38319e..c468fdb 100644 (file)
@@ -71,7 +71,7 @@
     padding: 0px 8px 4px 8px !important;
 }
 .nav-tab-active {
-    font-weight: bold;                var_dump($memberData);
+    font-weight: bold; 
     font-size: 1.1vw !important;
     text-decoration: none;
     border: 2px #ccc solid;
@@ -265,7 +265,6 @@ td.glm-nowrap {
 .glm-imageGalleryContainer
 {
     border: 1px #ddd solid !important;
-    draggable
 }
 .glm-galleryImage
 {
index bd02415..de45129 100644 (file)
@@ -54,6 +54,7 @@ define('GLM_MEMBERS_PLUGIN_CONFIG_PATH', GLM_MEMBERS_PLUGIN_PATH.'/config');
 
 $pluginsPath = str_replace(GLM_MEMBERS_PLUGIN_SLUG, '', GLM_MEMBERS_PLUGIN_PATH);
 define('GLM_MEMBERS_WORDPRESS_PLUGIN_PATH', $pluginsPath);
+define('GLM_MEMBERS_WORDPRESS_PLUGIN_URL', WP_PLUGIN_URL);
 
 // Database defines
 global $wpdb;
index 17d8de5..cf96727 100644 (file)
@@ -1,44 +1,5 @@
-
-// Other needed JS code
-
-jQuery(document).ready(function($){
-
-    /*
-     * Use media uploaded for all file/image uploads
-     */
-
-    var custom_uploader;
-
-    $('.glm-protp-upload-button').click(function(e) {
-
-        e.preventDefault();
-
-        var id = $(this).attr('data-id');
-
-        //If the uploader object has already been created, reopen the dialog
-        if (custom_uploader) {
-            custom_uploader.open();
-            return;
-        }
-
-        //Extend the wp.media object
-        var custom_uploader = wp.media.frames.file_frame = wp.media({
-            title: 'Choose the desired image below or select "Upload Files" to select a new image.',
-            button: {
-                text: 'Choose Image'
-            },
-            multiple: false
-        });
-
-        //When a file is selected, grab the URL and set it as the text field's value
-        custom_uploader.on('select', function() {
-            attachment = custom_uploader.state().get('selection').first().toJSON();
-            $('#' + id).val(attachment.url);
-        });
-
-        //Open the uploader dialog
-        custom_uploader.open();
-
-    });
-
-});
\ No newline at end of file
+/*
+ * 
+ *  Other needed Admin JS code
+ * 
+ */
index 8a17cf2..e32a4fb 100644 (file)
@@ -75,8 +75,8 @@ jQuery(document).ready(function($) {
         allowedTypes = drop.attr("data-allowedTypes");
 
         uploadStatusTemplate = drop.children('.glm-imageUploadStatusTemplate').html();
-        imageDataTemplate = drop.children('.glm-galleryDataTemplate').html();
-        galleryImages = drop.parent().parent().children('.glm-galleryItems');
+        imageDataTemplate = drop.children('.glm-galleryImageDataTemplate').html();
+        galleryImages = drop.parent().parent().children('.glm-galleryImages');
 
         // Change drop destination appearance only when dragging over a file.
         drop.on('dragenter', function(e){
@@ -182,8 +182,10 @@ jQuery(document).ready(function($) {
                     processFile();
 
                 } else {
+                    
                     // When status has faded in, Send the files
                     sendFileToServer(fd, status);
+
                 }
 
             });
@@ -228,6 +230,7 @@ jQuery(document).ready(function($) {
             // Using a copy of the supplied template, add file information
             // to statusbar
             statusbar = uploadStatusTemplate;
+            statusbar = statusbar.replace('bust-stupid-ngg-image-selection', 'img');
             statusbar = statusbar.replace('{ thisFile }', curFile);
             statusbar = statusbar.replace('{ numbFiles }', lastFile);
             statusbar = statusbar.replace('{ fileImage }', e.target.result);
@@ -249,7 +252,7 @@ jQuery(document).ready(function($) {
 
             // If a large file, notify user it will take time.
             if (file.size > 100000 && file.type == 'image/png') {
-               sizeStr += ' -- NOTE: Processing for this image may be slow!';
+                sizeStr += ' -- NOTE: Processing for this image may be slow!';
             }
 
             statusbar = statusbar.replace('{ fileSize }', sizeStr);
@@ -277,7 +280,7 @@ jQuery(document).ready(function($) {
     }
 
     /*
-     * Sends file to image plugin via AJAX submission targeting WordPress AJAX
+     * Uploads the image via AJAX submission targeting WordPress AJAX
      * handler.
      */
     function sendFileToServer(fd, status)
@@ -321,6 +324,7 @@ jQuery(document).ready(function($) {
 
                         // Using a copy of the supplied template, add image information
                         imageData = imageDataTemplate;
+                        imageData = imageData.replace(/bust-stupid-ngg-image-selection/g, 'img');
                         imageData = imageData.replace(/{ id }/g, fileData.files[i].id);
                         imageData = imageData.replace(/\{ filename \}/g, fileData.files[i].newFileName);
                         galleryImages.prepend(imageData);
@@ -335,10 +339,10 @@ jQuery(document).ready(function($) {
 
                 } else {
                     alert("Upload Failed\nReason: " + fileData.message);
-                    }
+                }
 
-                },
-                complete: function() {
+            },
+            complete: function() {
 
                 // When status area has faded
                 statusArea.fadeOut( function() {
index 86f002d..1255ba8 100644 (file)
                             <div class="glm-imageUploadStatusTemplate glm-imageItemHidden">
                                 
                                 <!-- Start of upload status pop-up template - Parameters are of the form "[name]" -->
-                                <b><u>Uploading Image [thisFile] of [numbFiles]</u></b>
+                                <b><u>Uploading Image { thisFile } of { numbFiles }</u></b>
                                 <table class="glm-statusTable">
-                                    <tr><td class="glm-statusImageTD" rowspan="5"><div class="glm-statusImageContainer"><img src="{ fileImage }"></div></td></tr>
                                     <tr>
-                                        <div style="float: right; margin: .2em .2em 0 0;" id="imageUploadCancel" class="button-primary glm-right">Cancel Upload</div>
+                                        <td class="glm-statusImageTD" rowspan="5">
+                                            <div class="glm-statusImageContainer">
+                                                <bust-stupid-ngg-image-selection src="{ fileImage }"></bust-stupid-ngg-image-selection>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td></b><div style="float: right; margin: .2em .2em 0 0;" id="imageUploadCancel" class="button-primary glm-right">Cancel Upload</div></td>
                                         <td class="glm-statusPrompt">Name: </td><td class="glm-statusValue">{ fileName }</td>
                                     </tr>
                                     <tr><td class="glm-statusPrompt">Type: </td><td class="glm-statusValue">{ fileType }</td></tr>
                                                 <td><input id="galleryImage_caption_{ id }" type="text" name="galleryImage_caption[{ id }]" value="" class="glm-form-text-input-medium" disabled></td>
                                                 <td rowspan="2">
                                                     <table>
-                                                        <tr><th>Delete:</th><td><input type="checkbox"z name="galleryImage_delete[{ id }]" disabled></td></tr>
+                                                        <tr><th>Delete:</th><td><input type="checkbox" name="galleryImage_delete[{ id }]" disabled></td></tr>
                                                         <tr><th>Selected Image:</th><td><input type="radio" name="galleryImage_selected" value="{ id }"></td></tr>
                                                         <tr><th>Featured Image:</th><td><input type="checkbox" name="galleryImage_featured[{ id }]"></td></tr>
                                                         <tr><th colspan="2" class="glm-notice" style="font-size: 1.2em;">New Upload</th></tr>
                                         </table>
                                     </div>
                                     <div class="glm-galleryImage" data-id="{ id }">
-                                        <img src="{$glmPluginMediaURL}/images/small/{ filename }">
+                                        <bust-stupid-ngg-image-selection src="{$glmPluginMediaURL}/images/small/{ filename }"></bust-stupid-ngg-image-selection>
                                     </div>
                                 </li>
-                                <div id="glm-galleryImageLarger2_{ id }" class="glm-imageDialog"><img src="{$glmPluginMediaURL}/images/large/{ filename }"></div>
+                                <div id="glm-galleryImageLarger2_{ id }" class="glm-imageDialog">
+                                    <bust-stupid-ngg-image-selection src="{$glmPluginMediaURL}/images/large/{ filename }" /></bust-stupid-ngg-image-selection>
+                                </div>
                                 <!-- End of template -->
                                 
                             </div>