Changeset 647959 for wpide

Timestamp:

01/04/2013 06:43:46 PM (12 years ago)

Author:

WPsites

Message:

2.0.13

Location:

wpide/trunk

Files:

• WPide.php (modified) (18 diffs)
• images/color-wheel.png (added)
• jqueryFileTree.js (modified) (3 diffs)
• js/ImageColorPicker.js (added)
• js/autocomplete (added)
• js/autocomplete/php.js (added)
• js/autocomplete/wordpress.js (added)
• js/jquery-ui-1.9.2.custom.min.js (added)
• js/load-editor.js (modified) (6 diffs)
• readme.txt (modified) (7 diffs)
• screenshot-4.jpg (added)
• wpide.css (modified) (2 diffs)

wpide/trunk/WPide.php

@@ -4 +4 @@
 Plugin URI: https://.com/WPsites/WPide
 Description: WordPress code editor with auto completion of both WordPress and PHP functions with reference, syntax highlighting, line numbers, tabbed editing, automatic backup.
-Version: 2.0.12
+Version: 2.0.13
 Author: Simon Dunton
 Author URI: http://www.wpsites.co.uk
@@ -50 +50 @@
                
                
-            //force local file method for testing - you could force other methods 'direct', 'ssh', 'ftpext' or 'ftpsockets'
+            // force local file method until I've worked out how to implement the other methods
+            // main problem being password wouldn't/isn't saved between requests
+            // you could force other methods 'direct', 'ssh', 'ftpext' or 'ftpsockets'
             $this->override_fs_method('direct');
 
@@ -71 +73 @@
             //setup ajax function for startup to get some debug info, checking permissions etc
             add_action('wp_ajax_wpide_startup_check', array( $this, 'wpide_startup_check' ) );
-           
-       
+           
+            //add a warning when navigating away from WPide
+            //it has to go after WordPress scripts otherwise WP clears the binding
+            add_action('admin_print_footer_scripts', array( $this, 'add_admin_nav_warning' ), 99 );
+           
         }
        
@@ -100 +105 @@
     }
 
-    public static function add_admin_head()
+    public static function add_admin_nav_warning()
     {
-   
+        ?>
+            <script type="text/javascript">
+           
+                jQuery(document).ready(function($) {
+                    window.onbeforeunload = function() {
+                      return 'You are attempting to navigate away from WPide. Make sure you have saved any changes made to your files otherwise they will be forgotten.' ;
+                    }
+                });
+   
+            </script>
+        <?php
     }
 
@@ -124 +139 @@
             wp_enqueue_script('ace-theme', plugins_url("ace-0.2.0/src/theme-dawn.js", __FILE__ ) );//monokai is nice
             // wordpress-completion tags
-            wp_enqueue_script('wpide-wordpress-completion', plugins_url("js/autocomplete.wordpress.js", __FILE__ ) );
+            wp_enqueue_script('wpide-wordpress-completion', plugins_url("js/autocomplete/wordpress.js", __FILE__ ) );
             // php-completion tags
-            wp_enqueue_script('wpide-php-completion', plugins_url("js/autocomplete.php.js", __FILE__ ) );
+            wp_enqueue_script('wpide-php-completion', plugins_url("js/autocomplete/php.js", __FILE__ ) );
             // load editor
             wp_enqueue_script('wpide-load-editor', plugins_url("js/load-editor.js", __FILE__ ) );
@@ -133 +148 @@
            
              // load jquery ui 
-            wp_enqueue_script('jquery-ui', plugins_url("js/jquery-ui-1.8.20.custom.min.js", __FILE__ ), array('jquery'),  '1.8.20');
+            wp_enqueue_script('jquery-ui', plugins_url("js/jquery-ui-1.9.2.custom.min.js", __FILE__ ), array('jquery'),  '1.9.2');
+   
+            // load color picker 
+            wp_enqueue_script('ImageColorPicker', plugins_url("js/ImageColorPicker.js", __FILE__ ), array('jquery'),  '0.3');
            
-           
    
    
@@ -169 +186 @@
         //setup wp_filesystem api
         global $wp_filesystem;
+        $url = wp_nonce_url('admin.php?page=wpide','plugin-name-action_wpidenonce');
+        $form_fields = null; // for now, but at some point the login info should be passed in here
+        if (false === ($creds = request_filesystem_credentials($url, FS_METHOD, false, false, $form_fields) ) ) {
+             // no credentials yet, just produced a form for the user to fill in
+            return true; // stop the normal page form from displaying
+        }
+       
         if ( ! WP_Filesystem($creds) )
             return false;
        
         $_POST['dir'] = urldecode($_POST['dir']);
-        $root = WP_CONTENT_DIR;
+        $root = apply_filters( 'wpide_filesystem_root', WP_CONTENT_DIR );
        
         if( $wp_filesystem->exists($root . $_POST['dir']) ) {
@@ -215 +239 @@
         //setup wp_filesystem api
         global $wp_filesystem;
+        $url = wp_nonce_url('admin.php?page=wpide','plugin-name-action_wpidenonce');
+        $form_fields = null; // for now, but at some point the login info should be passed in here
+        if (false === ($creds = request_filesystem_credentials($url, FS_METHOD, false, false, $form_fields) ) ) {
+             // no credentials yet, just produced a form for the user to fill in
+            return true; // stop the normal page form from displaying
+        }
         if ( ! WP_Filesystem($creds) )
             return false;
        
          
-        $root = WP_CONTENT_DIR;
+        $root = apply_filters( 'wpide_filesystem_root', WP_CONTENT_DIR );
         $file_name = $root . stripslashes($_POST['filename']);
         echo $wp_filesystem->get_contents($file_name);
@@ -247 +277 @@
         //setup wp_filesystem api
         global $wp_filesystem;
+        $url = wp_nonce_url('admin.php?page=wpide','plugin-name-action_wpidenonce');
+        $form_fields = null; // for now, but at some point the login info should be passed in here
+        if (false === ($creds = request_filesystem_credentials($url, FS_METHOD, false, false, $form_fields) ) ) {
+            // no credentials yet, just produced a form for the user to fill in
+            return true; // stop the normal page form from displaying
+        }
         if ( ! WP_Filesystem($creds) )
             return false;
        
-        $root = WP_CONTENT_DIR;
+        $root = apply_filters( 'wpide_filesystem_root', WP_CONTENT_DIR );
        
         //check all required vars are passed
@@ -303 +339 @@
         //setup wp_filesystem api
         global $wp_filesystem;
+        $url = wp_nonce_url('admin.php?page=wpide','plugin-name-action_wpidenonce');
+        $form_fields = null; // for now, but at some point the login info should be passed in here
+        if (false === ($creds = request_filesystem_credentials($url, FS_METHOD, false, false, $form_fields) ) ) {
+            // no credentials yet, just produced a form for the user to fill in
+            return true; // stop the normal page form from displaying
+        }
         if ( ! WP_Filesystem($creds) )
             echo "Cannot initialise the WP file system API";
        
         //save a copy of the file and create a backup just in case
-        $root = WP_CONTENT_DIR;
+        $root = apply_filters( 'wpide_filesystem_root', WP_CONTENT_DIR );
         $file_name = $root . stripslashes($_POST['filename']);
        
@@ -348 +390 @@
             //setup wp_filesystem api
             global $wp_filesystem;
-           
+            $url = wp_nonce_url('admin.php?page=wpide','plugin-name-action_wpidenonce');
+            $form_fields = null; // for now, but at some point the login info should be passed in here
+            if (false === ($creds = request_filesystem_credentials($url, FS_METHOD, false, false, $form_fields) ) ) {
+                // no credentials yet, just produced a form for the user to fill in
+                return true; // stop the normal page form from displaying
+            }
             if ( ! WP_Filesystem($creds) )
                 echo "Cannot initialise the WP file system API";
            
             //save a copy of the file and create a backup just in case
-            $root = WP_CONTENT_DIR;
+            $root = apply_filters( 'wpide_filesystem_root', WP_CONTENT_DIR );
             $file_name = $root . stripslashes($_POST['filename']);
            
@@ -386 +433 @@
         global $wp_filesystem, $wp_version;
        
-        echo "\n\n\n\nWPIDE STARUP CHECKS \n";
+        echo "\n\n\n\nWPIDE STARTUP CHECKS \n";
         echo "___________________ \n\n";
        
@@ -407 +454 @@
         //setup wp_filesystem api
         $wpide_filesystem_before = $wp_filesystem;
+       
+        $url = wp_nonce_url('admin.php?page=wpide','plugin-name-action_wpidenonce');
+        $form_fields = null; // for now, but at some point the login info should be passed in here
+    ob_start();
+        if (false === ($creds = request_filesystem_credentials($url, FS_METHOD, false, false, $form_fields) ) ) {
+            // if we get here, then we don't have credentials yet,
+            // but have just produced a form for the user to fill in,
+            // so stop processing for now
+            //return true; // stop the normal page form from displaying
+        }
+    ob_end_clean();
         if ( ! WP_Filesystem($creds) ) {
            
@@ -417 +475 @@
        
 
-        $root = WP_CONTENT_DIR;
-        
+        $root = apply_filters( 'wpide_filesystem_root', WP_CONTENT_DIR );
+        if ( isset($wp_filesystem) ){
            
         //Running webservers user and group
@@ -451 +509 @@
         echo "The wp-content/themes folder ". ( $wp_filesystem->is_readable( $root."/themes" )==1 ? "IS":"IS NOT" ) ." readable and ". ( $wp_filesystem->is_writable( $root."/themes" )==1 ? "IS":"IS NOT" ) ." writable by this method \n";
      
-        
+        }
        
         echo "___________________ \n\n\n\n";
@@ -504 +562 @@
 
             var wpide_app_path = "<?php echo plugin_dir_url( __FILE__ ); ?>";
+            //dont think this is needed any more.. var wpide_file_root_url = "<?php echo apply_filters("wpide_file_root_url", WP_CONTENT_URL );?>";
            
             function the_filetree() {
@@ -581 +640 @@
             }
            
+         
+           
             jQuery(document).ready(function($) {
+                 
                 // Handler for .ready() called.
                 the_filetree() ;
                
-               
-           
-               
-               
+                //inialise the color assist
+                $("#wpide_color_assist img").ImageColorPicker({
+                    afterColorSelected: function(event, color){
+                        jQuery("#wpide_color_assist_input").val(color);
+                    }
+                });
+                $("#wpide_color_assist").hide(); //hide it until it's needed
+               
+                $("#wpide_color_assist_send").click(function(e){
+                    e.preventDefault();
+                    editor.insert( jQuery("#wpide_color_assist_input").val().replace('#', '') );
+                   
+                    $("#wpide_color_assist").hide(); //hide it until it's needed again
+                });
+               
+                $(".close_color_picker a").click(function(e){
+                    e.preventDefault();
+                    $("#wpide_color_assist").hide(); //hide it until it's needed again
+                });
+               
+       
+               
                
             });
         </script>
        
-        <?php
-        $url = wp_nonce_url('admin.php?page=wpide','plugin-name-action_wpidenonce');
-        if ( ! WP_Filesystem($creds) ) {
-            request_filesystem_credentials($url, '', true, false, null);
-            return;
-        }
-        ?>
+
        
         <div id="poststuff" class="metabox-holder has-right-sidebar">
@@ -605 +679 @@
             <div id="side-info-column" class="inner-sidebar">
                
-                <div id="wpide_info"><div id="wpide_info_content"></div> </div>
+            <div id="wpide_info">
+                <div id="wpide_info_content"></div>
+            </div>
+            <br style="clear:both;" />
+                 <div id="wpide_color_assist">
+                    <div class="close_color_picker"><a href="close-color-picker">x</a></div>
+                    <h3>Colour Assist</h3>
+                    <img src='<?php echo plugins_url("images/color-wheel.png", __FILE__ ); ?>' />
+                    <input type="button" class="button" id="wpide_color_assist_send" value="&lt; Send to editor" />
+                    <input type="text" id="wpide_color_assist_input" name="wpide_color_assist_input" value="" />
+                   
+                </div>
+               
+                 
        
                 <div id="submitdiv" class="postbox ">

wpide/trunk/jqueryFileTree.js

@@ -57 +57 @@
                         if( o.root == t ) $(c).find('UL:hidden').show(); else $(c).find('UL:hidden').slideDown({ duration: o.expandSpeed, easing: o.expandEasing });
                         bindTree(c);
+                       
+                           //make files draggable
+                            $("li.file", $("#wpide_file_browser") ).draggable({
+                                cursor: "move",
+                                 handle: "a",
+                                cursorAt: { top: 20, left: 20 },
+                                helper: function( event ) {
+                                    return $( "<div>Image Path</div>" );
+                                }
+                            });
+               
                     });
                 }
@@ -80 +91 @@
                             h($(this).parent(), $(this).attr('rel'));
                         }
+                       
+ 
+       
                         return false;
                     });
@@ -91 +105 @@
                 showTree( $(this), escape(o.root) );
                 jQuery.ajaxSetup({async:true}); //enable async again
+               
+
                
                 //if nothing returned then let user know something wrong with permissions

wpide/trunk/js/load-editor.js

@@ -87 +87 @@
    
     range.end.column = editor.getSession().getSelection().getCursor().column +1;//set end column as cursor pos
-   
+
     //console.log("[ \.] based: " + editor.getSession().doc.getTextRange(range));
    
@@ -311 +311 @@
     //clear the text in the command help panel
     //jQuery("#wpide_info_content").html("");
+}
+
+function selectionChanged(e)  {
+    var selected_text = editor.getSession().doc.getTextRange(editor.getSelectionRange());
+   
+    //check for hex colour match
+    if ( selected_text.match('^#?([a-f]|[A-F]|[0-9]){3}(([a-f]|[A-F]|[0-9]){3})?$')  != null ){
+       
+        var therange = editor.getSelectionRange();
+        therange.end.column = therange.start.column;
+        therange.start.column = therange.start.column-1;
+
+        // only show color assist if the character before the selection indicates a hex color (#)
+        if ( editor.getSession().doc.getTextRange( therange ) == "#" ){
+            jQuery("#wpide_color_assist").show();
+        }
+       
+    }
 }
 
@@ -472 +490 @@
             editor.getSession().on('change', onSessionChange);
            
+            editor.getSession().selection.on('changeSelection', selectionChanged);
+           
             editor.resize();
             editor.focus();
@@ -565 +585 @@
 jQuery(document).ready(function($) {
     $("#wpide_save").click(saveDocument);
-   
+
+    // drag and drop colour picker image
+    $("#wpide_color_assist").on('drop', function(e) {
+        e.preventDefault();
+        e.originalEvent.dataTransfer.items[0].getAsString(function(url){
+                 
+                $(".ImageColorPickerCanvas", $("#side-info-column") ).remove();
+                $("img", $("#wpide_color_assist")).attr('src', url );
+           
+        });
+    });
+   
+    $("#wpide_color_assist").on('dragover', function(e) {
+        $(this).addClass("hover");
+    }).on('dragleave', function(e) {
+        $(this).removeClass("hover");
+    });
 
    
     //add div for ace editor to latch on to
-    //$('#template').prepend("<div style='width:80%;height:500px;margin-right:0!important;' id='fancyeditordiv'></div>");
+    $('#template').prepend("<div style='width:80%;height:500px;margin-right:0!important;' id='fancyeditordiv'></div>");
     //create the editor instance
     editor = ace.edit("fancyeditordiv");
@@ -637 +673 @@
                 //show command help panel for this command
                 wpide_function_help();
-                console.log("handler is visible");
+                //console.log("handler is visible");
                
             }else if( document.getElementById('ac').style.display === 'block'  ) {
@@ -646 +682 @@
                     select.selectedIndex = select.selectedIndex-1;
                 }
-                 console.log("ac is visible");
+                 //console.log("ac is visible");
             } else {
                 var range = editor.getSelectionRange();

wpide/trunk/readme.txt

@@ -3 +3 @@
 Tags: code, theme editor, plugin editor, code editor
 Requires at least: 3.0
-Tested up to: 3.3.2
-Stable tag: 2.0.12
+Tested up to: 3.5
+Stable tag: 2.0.13
 
 WordPress code editor with auto completion of both WordPress and PHP functions with reference, syntax highlighting, line numbers, tabbed editing, automatic backup.
@@ -23 +23 @@
 *   Line numbers
 *   Code autocomplete for WordPress and PHP functions along with function description, arguments and return value where applicable
+*   Colour assist - a colour picker that only shows once you double click a hex colour code in the editor. You can also drag your own image into the colour picker to use instead of the default swatch (see other notes for info).
 *   Automatic backup of every file you edit. (one daily backup and one hourly backup of each file stored in plugins/WPide/backups/filepath)
 *   File tree allowing you to access and edit any file in your wp-content folder (plugins, themes, uploads etc)
@@ -31 +32 @@
 *   Tabbed interface for editing multiple files (editing both plugin and theme files at the same time)
 *   Using the WordPress filesystem API, although currently direct access is forced (edit WPide.php in the constructor to change this behaviour) ftp/ssh connections aren't setup yet, since WP will not remember a password need to work out how that will work. Maybe use modal to request password when you save but be able to click save all and save a batch with that password. Passwords defined in wp-config.php are persistent and would fix this problem but people don't generally add those details. Open to ideas here.
-*   Image editing/drawing (requires Flash -  will move over to HTML5 when there is a decent alternative)
+*   Image editing/drawing (this is currently not working..)
 
 = Feature ideas and improvements: =
@@ -44 +45 @@
 
 As with most plugins this one is open source. For issue tracking, further information and anyone wishing to get involved and help contribute to this project can do so over on https://.com/WPsites/WPide
-
-== Contributors ==
-
-Simon Dunton - http://www.wpsites.co.uk
-Thomas Wieczorek - http://www.wieczo.net
 
 
@@ -74 +70 @@
 2. Image editor in action
 3. Showing auto complete, function reference and file tree.
+4. Default colour picker image
 
 == Changelog ==
+
+= 2.0.13 =
+* Added colour assist - a colour picker that displays when you double click a hex colour code in the editor (see other notes for info).
+* Added a confirm box to stop you exiting the editor by mistake and losing unsaved chnages.
+* Added 'wpide_filesystem_root' filter (see other notes for info).
+* A number of bug fixes.
 
 = 2.0.12 =
@@ -146 +149 @@
 * Initial release.
 
-== DEV NOTES ==
+== Other Feature notes ==
+
+= You can modify the filesystem root using the 'wpide_filesystem_root' filter =
+
+So to restrict editing to the Twenty Eleven theme only you could do this:
+
+add_filter('wpide_filesystem_root', 'wpide_filesystem_root_override');
+function wpide_filesystem_root_override($path){
+    // the default path variable will be WP_CONTENT_DIR
+    return $path . "/themes/twentyeleven";
+}
+
+= Colour assist =
+
+The colour picker only shows if you double click a hex colour value in the editor (3 or 6 characters with a proceeding hash #FF0000)
+
+The default colour picker has limited colours. You can replace this image with an image of your own by dragging and dropping a new image onto the default one (due to security reasons this can only be an image from the same domain).
+
+Using this you can either create your own swatch of colours or just drag in your websites logo or header image.
+
+If you close the editor any custom colour picker image will be forgotten. We maybe thing about making this persist and also make the image uploadable as well as drag+drop.
+
+== Dev Notes ==
 
 Maybe some interesting things here we could implement to help with following the WordPress standard and more advanced code syntax checking
@@ -154 +179 @@
 Checkout the following WordPress plugin "WP Live CSS Editor" to work out how to do LIVE css editing. Combining a LESS compiler with live CSS editing/compile would be a dream.
 
+https://.com/lennie/git-webcommit/ may be a route to git functionality
+
+== Contributors ==
+
+Simon Dunton - http://www.wpsites.co.uk
+Thomas Wieczorek - http://www.wieczo.net

wpide/trunk/wpide.css

@@ -126 +126 @@
             background-color:#f4f4f4;
             color:#aaa;
+            z-index:999;
         }
     #wpide_save_container{
@@ -225 +226 @@
                 min-width:220px;
         }
-       
-       
-       
-       
+
+/* color assist */
+.ImageColorPickerWrapper{
+    height: 300px;
+    width: 100%;
+    overflow: scroll;
+}
+#wpide_color_assist{
+    position:relative;
+    width: 100%;
+    background-color: whiteSmoke;
+    margin: auto;
+    border: 1px solid #CCC;
+    padding-right: 2px;
+    margin-left: -2px;
+    height: 380px;
+}
+#wpide_color_assist img, #wpide_color_assist canvas{
+    margin:auto;
+    display:block;
+}
+#wpide_color_assist canvas.ImageColorPickerCanvasColor{
+    position:absolute;
+    left:0;
+    top:0;
+}
+#wpide_color_assist input[type=button]{
+    float:left;
+    width:110px;
+    margin: 15px 5px;
+    font-size: 12px;
+}
+#wpide_color_assist_input{
+    float:left;
+    width:100px;
+    margin: 15px 5px;
+}
+
+.close_color_picker{
+    padding-bottom: 7px;
+    padding-left: 7px;
+    position: absolute;
+    right: 20px;   
+    top: 5px;
+}
+.close_color_picker a{
+    color: #575757;
+    font-style: normal;
+    text-decoration: none;
+    font-size: 16px;
+}
+
+#wpide_color_assist h3{
+    background-color: #F1F1F1;
+    background-image: -ms-linear-gradient(top,#F9F9F9,#ECECEC);
+    background-image: -moz-linear-gradient(top,#F9F9F9,#ECECEC);
+    background-image: -o-linear-gradient(top,#F9F9F9,#ECECEC);
+    background-image: -webkit-gradient(linear,left top,left bottom,from(#F9F9F9),to(#ECECEC));
+    background-image: -webkit-linear-gradient(top,#F9F9F9,#ECECEC);
+    background-image: linear-gradient(top,#F9F9F9,#ECECEC);
+   
+    -webkit-border-top-left-radius: 3px;
+    -webkit-border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+}
+
+.currentColor, .selectedColor {
+  border: 1px solid #000;
+  background-color: #fff;
+  width:30px;
+  height:30px;
+}
+
+.ImageColorPickerCanvas {
+    cursor:crosshair;
+}
+
+div.ImageColorPickerWrapper{
+ 
+}
+
+
+
+
+
+