Changeset 29756 for other-projects/nz-flag-design/trunk/main-form/svg-edit-local/ext-advanced.js

Timestamp:

2015-02-20T16:46:36+13:00 (9 years ago)

Author:

davidb

Message:

Latest version of extension developed by Jojo. Was originally committed to a different folder, which didn't link in with the INSTALL.sh script.

File:

• other-projects/nz-flag-design/trunk/main-form/svg-edit-local/ext-advanced.js (modified) (3 diffs)

other-projects/nz-flag-design/trunk/main-form/svg-edit-local/ext-advanced.js

@@ -9 +9 @@
  *
  */
- 
-/* 
-    This is a very basic SVG-Edit extension. It adds a "Hello World" button in
-    the left panel. Clicking on the button, and then the canvas will show the
-    user the point on the canvas that was clicked on.
-*/
- 
-svgEditor.addExtension("Advanced", function() {'use strict';
+var advancedClicked = false;
 
+svgEditor.addExtension("Advanced", function() {'use strict';                                     
+                                               
         return {
             name: "Advanced",
-            // For more notes on how to make an icon file, see the source of
-            // the helloworld-icon.xml
+            // The icon for 'advanced features'
             svgicons: svgEditor.curConfig.extPath + "advanced-icon.xml",
             
             // Multiple buttons can be added in this array
             buttons: [{
-                // Must match the icon ID in helloworld-icon.xml
+                // Must match the icon ID in advanced-icon.xml
                 id: "advanced", 
                 
-                // This indicates that the button will be added to the "mode"
-                // button panel on the left side
-                type: "mode", 
+                // This indicates that the button will be added independently to the buttons in the button
+                // panel on the left side (it will not be unselected when one of the other buttons is selected)
+                type: "context",
+                panel: "tools_left",
                 
                 // Tooltip text
-                title: "Show Advanced Options", 
+                title: "Show/Hide Advanced Features", 
                 
                 // Events
                 events: {
                     'click': function() {
-                        // The action taken when the button is clicked on.
-                        // For "mode" buttons, any other button will 
-                        // automatically be de-pressed.
-                        if (svgCanvas.getMode() != "advanced") {
-                          svgCanvas.setMode("advanced");
+                        // Toggle the advanced button
+                        if (advancedClicked == true)
+                        {
+                            advancedClicked = false;
+                            // Hide advanced features
+                            advancedButton(advancedClicked);
                         }
-                        else {
-                          
+                        else
+                        {
+                            advancedClicked = true; 
+                            // Hide advanced features
+                            advancedButton(advancedClicked);
                         }
                     }
@@ -54 +53 @@
             // on the editor canvas (not the tool panels)
             mouseDown: function() {
-                // Check the mode on mousedown
-                if(svgCanvas.getMode() == "advanced") {
-                
-                    // The returned object must include "started" with 
-                    // a value of true in order for mouseUp to be triggered
-                    return {started: true};
-                }
+                advancedButton(advancedClicked);
+
+                // The returned object must include "started" with 
+                // a value of true in order for mouseUp to be triggered
+                return {started: true};
             },
             
@@ -66 +63 @@
             // to true (see above). Note that "opts" is an object with event info
             mouseUp: function(opts) {
-                // Check the mode on mouseup
-                if(svgCanvas.getMode() == "advanced") {
-                    var zoom = svgCanvas.getZoom();
-                    
-                    // Get the actual coordinate by dividing by the zoom value
-                    var x = opts.mouse_x / zoom;
-                    var y = opts.mouse_y / zoom;
-                    
-                    var text = "These are advanced features!\n\nYou clicked here: " 
-                        + x + ", " + y;
-                        
-                    // Show the text using the custom alert function
-                    $.alert(text);
-                }
-            }
+                //advancedButton(advancedClicked);
+            },
+            
+            elementChanged: function(opts)
+            {
+                advancedButton(advancedClicked);
+            },
+            
+            callback: function(opts) {
+                advancedClicked = false;
+                advancedButton(advancedClicked);
+            }
         };
 });
 
+// Function: advancedButton
+// Unless advanced button is selected, advanced features will be hidden
+this.advancedButton = function() {
+    
+    // 'Advanced feature' elements
+    var elements = ['sidepanels', 'editor_panel', 'tool_move_top', 'tool_move_bottom', 'tool_topath', 'tool_reorient', 'tool_make_link', 'idLabel', 'tool_angle', 'tool_blur', 'tool_position', 'xy_panel', 'rect_width_tool', 'rect_height_tool', 'cornerRadiusLabel'];
+
+    // Toggle the display attributes of the selected advanced elements
+    for (var i = 0; i < elements.length; i++) {
+        if (advancedClicked == false) {
+            document.getElementById(elements[i]).style.display = 'none';
+        }
+        else {
+            document.getElementById(elements[i]).style.display = 'block';
+        }
+    }
+    
+    // Remove strange extra 'tool_seps' when advanced features is not selected
+    if (advancedClicked == false)
+    {
+        $("#selected_panel :first-child").find(".tool_sep").css("display", "none")
+    }
+}