Changeset 1545989

Timestamp:

12/05/2016 04:01:48 PM (9 years ago)

Author:

timph

Message:

adding color controls and wp 4.7 compat code

Location:

customizer-social-icons/trunk

Files:

• assets/css/customizer-social-icons-controls.css (added)
• assets/js/customizer-social-icons-display-colors.js (added)
• assets/js/customizer-social-icons-live-preview.js (modified) (5 diffs)
• autoload.php (added)
• class-customizer-social-icons.php (deleted)
• customizer-social-icons.php (modified) (1 diff)
• includes (added)
• includes/class-customizer-social-icons-configs.php (added)
• includes/class-customizer-social-icons-customizer-menus.php (added)
• includes/class-customizer-social-icons-customizer.php (added)
• includes/class-customizer-social-icons-loader.php (added)
• includes/class-customizer-social-icons-menus.php (added)
• includes/class-customizer-social-icons-util.php (added)
• includes/class-customizer-social-icons.php (added)
• includes/configs (added)
• includes/configs/base.config.php (added)
• includes/configs/html.config.php (added)
• includes/configs/i18n.config.php (added)
• includes/configs/icon-sizes.config.php (added)
• includes/configs/networks.config.php (added)
• includes/interface-customizer-social-icons-configs.php (added)
• readme.txt (modified) (5 diffs)

customizer-social-icons/trunk/assets/js/customizer-social-icons-live-preview.js

@@ -13 +13 @@
     var self = CustomizerSocialIcons.LivePreview;
 
+
     /**
      * Initialize Social Media Icon Controls.
      *
-     * @since 1.1.0 
+     * @since 0.1
      */
     self.initialize = function() {
+        $( document ).ready( self.onReady );
         self.iconSize();
         self.iconText();
+        self.iconColor();
+        self.iconColorSecondary();
+        self.iconHoverColor();
+        self.iconHoverColorSecondary();
         self.iconSpacing();
+
+    };
+
+    self.onReady = function() {
+        self.getSettings();
+    };
+
+    self.getSettings = function() {
+        wp.customize.bind( 'ready', _.defer( function() {
+            self.configs = {
+                iconStyle : api( 'customizer_social_icons_type_setting' )(),
+                hoverColor : api( 'customizer_social_icons_hover_color_setting' )(),
+                hoverColorSecondary : api( 'customizer_social_icons_hover_color_secondary_setting' )(),
+                currentColor : api( 'customizer_social_icons_color_setting' )(),
+                currentColorSecondary : api( 'customizer_social_icons_color_secondary_setting' )(),
+            };
+        } ) );
+    };
+
+    /**
+     * Listen for hover.
+     *
+     * @since 0.3
+     */
+    self.hover = function() {
+        $( '.menu-social' );
+        var $icons, $stack, $openStack, selector, currentColor;
+        // Define selector for stacks or standard icons.
+        $icons = $( '.menu-social a' );
+        $stack = $( '.menu-social' ).find( 'span.stack-closed' ).parent( 'a' );
+        $openStack = $( '.menu-social' ).find( 'span.stack-open' ).parent( 'a' );
+        if ( $stack.length ) {
+            selector = $stack;
+            selector.hover(
+                function( e ) {
+                    // Set hover color.
+                    $( e.currentTarget ).find( '.fa-inverse' ).css( 'color', self.configs.hoverColor );
+                    // Set hover color.
+                    $( e.currentTarget ).find( 'i.fa:first-child' ).css( 'color', self.configs.hoverColorSecondary );
+                },
+                function( e ) {
+                    // Reassign to the current secondary color.
+                    $( e.currentTarget ).find( '.fa-inverse' ).css( 'color', self.configs.currentColor );
+                    // Set hover color.
+                    $( e.currentTarget ).find( 'i.fa:first-child' ).css( 'color', self.configs.currentColorSecondary );
+                }
+            );
+            return;
+        }
+        selector = $icons;
+        if ( $openStack.length ) selector = $openStack;
+        selector.hover(
+            function( e ) {
+                // Set hover color.
+                $( e.currentTarget ).find( 'i.fa' ).css( 'color', self.configs.hoverColor );
+            },
+            function( e ) {
+                // Reassign to the current color.
+                $( e.currentTarget ).find( 'i.fa' ).css( 'color', self.configs.currentColor );
+            }
+        );
     };
 
@@ -27 +94 @@
      * Adjust Social Media Icon Size.
      *
-     * @since 1.1.0 
+     * @since 0.2
      */
     self.iconSize = function() {
@@ -34 +101 @@
             value.bind( function( to ) {
                 var $icons, $stack, selector;
-
                 // Define selector for stacks or standard icons.
                 $icons = $( '.menu-social' ).find( 'i.fa' );
@@ -58 +124 @@
      * Hide or Show Social Media Icon Text.
      *
-     * @since 1.1.0 
+     * @since 0.2
      */
     self.iconText = function() {
@@ -82 +148 @@
 
     /**
+     * Adjust Social Media Icon Color.
+     *
+     * @since 0.3
+     */
+    self.iconColor = function() {
+        // Set logo letter spacing on site title text live
+        api( 'customizer_social_icons_color_setting', function( value ) {
+            value.bind( function( to ) {
+                self.configs.currentColor = to;
+                var $icons = self.configs.iconStyle, selector;
+
+                if ( $icons === 'icon' ) {
+                    selector = $( '.menu-social' ).find( 'i.fa' );
+                } else if ( $icons === 'icon-square' || $icons === 'icon-circle' ) {
+                    selector = $( '.menu-social' ).find( 'span.stack-closed > .fa-inverse' );
+                } else {
+                    selector = $( '.menu-social' ).find( 'span.fa-stack' );
+                }
+
+                // Add color to selector.
+                selector.css( 'color', to );
+                self.hover();
+            } );
+        } );
+    };
+
+    self.iconColorSecondary = function() {
+        // Set logo letter spacing on site title text live
+        api( 'customizer_social_icons_color_secondary_setting', function( value ) {
+            value.bind( function( to ) {
+                self.configs.currentColorSecondary = to;
+                var $icons = self.configs.iconStyle, selector;
+                selector = $( '.menu-social' ).find( 'span.stack-closed > i.fa:not(.fa-inverse)' );
+
+                // Add color to selector.
+                selector.css( 'color', to );
+                self.hover();
+            } );
+        } );
+    };
+
+    /**
+     * Adjust Social Media Icon Hover Color.
+     *
+     * @since 0.3
+     */
+    self.iconHoverColor = function() {
+        // Set logo letter spacing on site title text live
+        api( 'customizer_social_icons_hover_color_setting', function( value ) {
+            value.bind( function( to ) {
+                // Update hover color.
+                self.configs.hoverColor = to;
+                self.hover();
+            } );
+        } );
+    };
+
+    /**
+     * Adjust Social Media Icon Hover Color.
+     *
+     * @since 0.3
+     */
+    self.iconHoverColorSecondary = function() {
+        // Set logo letter spacing on site title text live
+        api( 'customizer_social_icons_hover_color_secondary_setting', function( value ) {
+            value.bind( function( to ) {
+                // Update hover color.
+                self.configs.hoverColorSecondary = to;
+                self.hover();
+            } );
+        } );
+    };
+
+    /**
      * Adjust Social Media Icon Spacing.
      *
-     * @since 1.1.0 
+     * @since 0.2
      */
     self.iconSpacing = function() {

customizer-social-icons/trunk/customizer-social-icons.php

@@ -28 +28 @@
  * @package CustomizerSocialIcons
  */
+// Include the autoloader
+include_once wp_normalize_path( plugin_dir_path( __FILE__ ) . '/autoload.php' );
 
-require_once __DIR__ . '/class-customizer-social-icons.php';
-new Customizer_Social_Icons();
+$customizer_social_icons = new Customizer_Social_Icons();
+$customizer_social_icons->run();

customizer-social-icons/trunk/readme.txt

@@ -4 +4 @@
 Tags: customizer, social media icons, social icons, social media, social, customize, customize social
 Requires at least: 4.3
-Tested up to: 4.6
-Stable tag: 0.2
+Tested up to: 4.7
+Stable tag: 0.3
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
@@ -15 +15 @@
 Customizer Social Icons aims to bring one of the most implemented features across websites into your WordPress Customizer.  It helps to bridge the gap of not having a native Social Media Icon tool available in WordPress directly, and gives you the features you need without the overhead of a clunky non-native interface.
 
-You can control the style, size, and spacing of your icons to fit your website's needs hassle free inside of the WordPress Customizer.  Any of your social media network urls found in your menus will automatically be transformed into the corresponding social media icons for you.
+You can control the style of icon, colors, size, and spacing of your icons to fit your website's needs hassle free inside of the WordPress Customizer.  Any of your social media network urls found in your menus will automatically be transformed into the corresponding social media icons for you.
 
 Available Social Media Icons:
@@ -85 +85 @@
 1. Click on "Customize" to get to the WordPress Customizer.
 2. Click on the tab that says "Menus".
-3. Next, click on "Menu Locations," and you will see a new panel slide in that will display all of your theme's available menu locations.  The menu locations are locations your theme has designated as being locations you can stick a menu inside.  These will be the locations you can add Social Media Icons to with this plugin.  
+3. Next, click on "Menu Locations," and you will see a new panel slide in that will display all of your theme's available menu locations.  The menu locations are locations your theme has designated as being locations you can stick a menu inside.  These will be the locations you can add Social Media Icons to with this plugin.
 4. Click on "Edit Menu" if you have a menu assigned to a location, or select a menu from the dropdown to add icons to that.
 5. Press "Add Items," and a panel will slide out with some options of things you can add.
@@ -96 +96 @@
 
 **A**: Yes! This plugin has a configuration filter, so you can just inspect the 'networks' array for how to prepare the data and filter to suit your needs!
-
 
 = Q: How can I add this to my own theme and set defaults? =
@@ -110 +109 @@
 5. **Social Icon Styles** - Various Icon Styles are available to make the icons fit better with your overall design.
 6. **Social Icon Sizes** - You can change the size of your social icons right in the customizer to give a different look to your chosen icons.
+7. **Social Icon Colors** - Colors can be changed for your social icons in the WordPress customizer controls as well.
 
 == Changelog ==
+
+= 0.3 =
+* New Feature: Added color selections for icons in customizer.
+* Update: Changed control styles to look more modern.
+* Update: Added and checked compatibility for WordPress 4.7.
+* Update: Classes now use autoloader, expanded configs.
 
 = 0.2 =