Changeset 2500440

Timestamp:

03/21/2021 03:06:39 PM (5 years ago)

Author:

xsvet

Message:

Dark mode feature

Location:

mobiloud-mobile-app-plugin/trunk

Files:

• assets/js/mobiloud-forms.js (modified) (1 diff)
• class.mobiloud-admin.php (modified) (2 diffs)
• config.php (modified) (1 diff)
• views/settings_settings.php (modified) (1 diff)

mobiloud-mobile-app-plugin/trunk/assets/js/mobiloud-forms.js

@@ -225 +225 @@
             })
         }
+
+        // current page can have only 1 item of this type.
+        if ( jQuery('.upload-logo-block').length) { // Dark mode block.
+            jQuery('.upload-logo-block').each(function( i, block ) {
+            ( function( $ ) {
+                var $block = $(block);
+                var $button = $block.find('.upload-logo-button');
+                var $input = $block.find('.upload-logo-input');
+                var $clean = $block.find('.upload-logo-clean');
+                var $view = $block.find('.upload-logo-view');
+                var _orig_send_attachment = wp.media.editor.send.attachment;
+                var timer = null;
+
+                var icon_preview = function( url ) {
+                    if ( timer ) {
+                        clearTimeout( timer );
+                    }
+                    timer = setTimeout( function() {
+                        $view.attr( 'src', url );
+                        if ( '' !== url ) {
+                            $view.parent().parent().show();
+                        } else {
+                            $view.parent().parent().hide();
+                        }
+                        }, 200 );
+                }
+                var icon_clear = function() {
+                    $view.attr( 'src', '' );
+                    $view.parent().parent().hide();
+                }
+
+                $input.on('keyup change paste', function() {
+                    icon_preview( $input.val() );
+                })
+                $clean.click(
+                    function(e) {
+                        $input.val('');
+                        icon_clear();
+                        return false;
+                    }
+                );
+
+                $button.on('click',
+                    function(e) {
+                        var send_attachment_bkp         = wp.media.editor.send.attachment;
+                        _custom_media                   = true;
+                        wp.media.editor.send.attachment = function(props, attachment) {
+                            wp.media.editor.send.attachment = send_attachment_bkp;
+                            if (_custom_media) {
+                                var url = attachment.url;
+                                $input.val( url ).trigger('change');
+                                icon_preview( url );
+                                _custom_media = false;
+                            } else {
+                                return _orig_send_attachment.apply( this, [props, attachment] );
+                            }
+                        };
+                        wp.media.editor.open( $button );
+                        return false;
+                    }
+                )
+            } )( jQuery);
+            })
+        }
     }
 );

mobiloud-mobile-app-plugin/trunk/class.mobiloud-admin.php

@@ -1011 +1011 @@
 
             case 'settings':
+                self::enqueue_codemirror( [ 'text/css' ] );
                 wp_register_script( 'mobiloud-settings', MOBILOUD_PLUGIN_URL . '/assets/js/mobiloud-settings.js', array( 'jquery' ) );
                 wp_enqueue_script( 'mobiloud-settings' );
@@ -1149 +1150 @@
                         Mobiloud::set_option( 'ml_ignore_shortcodes', [] );
                     }
+
+                    Mobiloud::set_option( 'ml_dark_mode_enabled', isset( $_POST['ml_dark_mode_enabled'] ) );
+                    Mobiloud::set_option( 'ml_dark_mode_logo', sanitize_text_field( $_POST['ml_dark_mode_logo'] ) );
+                    Mobiloud::set_option( 'ml_dark_mode_header_color', sanitize_hex_color( $_POST['ml_dark_mode_header_color'] ) );
+                    Mobiloud::set_option( 'ml_dark_mode_tabbed_navigation_color', sanitize_hex_color( $_POST['ml_dark_mode_tabbed_navigation_color'] ) );
+                    Mobiloud::set_option( 'ml_dark_mode_tabbed_navigation_icons_color', sanitize_hex_color( $_POST['ml_dark_mode_tabbed_navigation_icons_color'] ) );
+                    Mobiloud::set_option( 'ml_dark_mode_tabbed_navigation_active_icon_color', sanitize_hex_color( $_POST['ml_dark_mode_tabbed_navigation_active_icon_color'] ) );
+                    Mobiloud::set_option( 'ml_dark_mode_notification_switch_main_color', sanitize_hex_color( $_POST['ml_dark_mode_notification_switch_main_color'] ) );
+                    Mobiloud::set_option( 'ml_dark_mode_notification_switch_background_color', sanitize_hex_color( $_POST['ml_dark_mode_notification_switch_background_color'] ) );
+                    Mobiloud::set_option( 'ml_dark_mode_hamburger_menu_background_color', sanitize_hex_color( $_POST['ml_dark_mode_hamburger_menu_background_color'] ) );
+                    Mobiloud::set_option( 'ml_dark_mode_hamburger_menu_text_color', sanitize_hex_color( $_POST['ml_dark_mode_hamburger_menu_text_color'] ) );
+                    Mobiloud::set_option( 'ml_dark_mode_custom_css', wp_unslash( $_POST['ml_dark_mode_custom_css'] ) ); // phpcs:ignore WordPress.Security.ValidatedSanitizedInput.InputNotSanitized
+
                     Mobiloud::set_option( 'ml_related_posts', isset( $_POST['ml_related_posts'] ) );
                     if ( isset( $_POST['ml_related_header'] ) ) {

mobiloud-mobile-app-plugin/trunk/config.php

@@ -359 +359 @@
 $return_config['cache_busting_interval'] = get_option( 'ml_cache_busting_interval', '15' );
 
+$return_config['dark_mode_enabled']                              = (string) get_option( 'ml_dark_mode_enabled', false );
+$return_config['dark_mode_logo']                                 = (string) get_option( 'ml_dark_mode_logo', '' );
+$return_config['dark_mode_header_color']                         = (string) get_option( 'ml_dark_mode_header_color', '' );
+$return_config['dark_mode_tabbed_navigation_color']              = (string) get_option( 'ml_dark_mode_tabbed_navigation_color', '' );
+$return_config['dark_mode_tabbed_navigation_icons_color']        = (string) get_option( 'ml_dark_mode_tabbed_navigation_icons_color', '' );
+$return_config['dark_mode_tabbed_navigation_active_icon_color']  = (string) get_option( 'ml_dark_mode_tabbed_navigation_active_icon_color', '' );
+$return_config['dark_mode_notification_switch_main_color']       = (string) get_option( 'ml_dark_mode_notification_switch_main_color', '' );
+$return_config['dark_mode_notification_switch_background_color'] = (string) get_option( 'ml_dark_mode_notification_switch_background_color', '' );
+$return_config['dark_mode_hamburger_menu_background_color']      = (string) get_option( 'ml_dark_mode_hamburger_menu_background_color', '' );
+$return_config['dark_mode_hamburger_menu_text_color']            = (string) get_option( 'ml_dark_mode_hamburger_menu_text_color', '' );
+
+
+$return_config['dark_mode_custom_css'] = (string) get_option( 'ml_dark_mode_custom_css', '' );
+
+
 if ( ! empty( $return_config ) ) {
     foreach ( $return_config as $key => $val ) {

mobiloud-mobile-app-plugin/trunk/views/settings_settings.php

@@ -479 +479 @@
 
 <div class="ml2-block">
+    <div class="ml2-header"><h2>Dark mode</h2></div>
+    <div class="ml2-body upload-logo-block">
+
+        <div class='ml-col-row'>
+            <p>This setting determines if the dark mode option should be displayed in the app's settings screen or not. If disabled, dark mode should not be applied to the app at all, even if the user previously enabled it.</p>
+            <div class="ml-form-row ml-checkbox-wrap">
+                <input type="checkbox" id="ml_dark_mode_enabled" name="ml_dark_mode_enabled"
+                    value="true" <?php checked( Mobiloud::get_option( 'ml_dark_mode_enabled' ) ); ?>/>
+                <label for="ml_dark_mode_enabled">Enable Dark mode</label>
+            </div>
+        </div>
+
+        <h4>Dark mode logo</h4>
+        <div class="ml-col-row">
+            <div class="ml-col-half">
+                <p>Custom version of the logo used in the app's header when dark mode is enabled on the user device.</p>
+            </div>
+            <div class="ml-col-half">
+                <?php $logo = Mobiloud::get_option( 'ml_dark_mode_logo', '' ); ?>
+
+                <input type="text" size="36" name="ml_dark_mode_logo" class="upload-logo-input"
+                    value="<?php echo esc_url( $logo ); ?>"/>
+                <input type="button" value="Upload Image" class="browser button upload-logo-button"/>
+                <div class="clearfix"></div>
+                <div class="ml-col-half ml-preview-upload-image-row" <?php echo ( strlen( $logo ) === 0 ) ? 'style="display:none;"' : ''; ?>>
+                    <div class="ml-preview-image-holder">
+                        <img src="<?php echo esc_url( $logo ); ?>" class="upload-logo-view"/>
+                    </div>
+                    <a href="#" class="ml-preview-image-remove-btn upload-logo-clean">Remove logo</a>
+                </div>
+            </div>
+        </div>
+
+        <h4>Header color</h4>
+        <div class="ml-col-row ml-color">
+            <div class="ml-col-half">
+                <p>Custom color for the header background when dark mode is enabled.</p>
+            </div>
+            <div class="ml-col-half">
+                <input  class="color-picker" name="ml_dark_mode_header_color" type="text"
+                    value="<?php echo esc_attr( get_option( 'ml_dark_mode_header_color' ) ); ?>"/>
+            </div>
+        </div>
+
+        <h4>Tabbed navigation color</h4>
+        <div class="ml-col-row ml-color">
+            <div class="ml-col-half">
+                <p>Custom color for the tabbed navigation background when dark mode is enabled.</p>
+            </div>
+            <div class="ml-col-half">
+                <input  class="color-picker" name="ml_dark_mode_tabbed_navigation_color" type="text"
+                    value="<?php echo esc_attr( get_option( 'ml_dark_mode_tabbed_navigation_color' ) ); ?>"/>
+            </div>
+        </div>
+
+        <h4>Tabbed navigation icons color</h4>
+        <div class="ml-col-row ml-color">
+            <div class="ml-col-half">
+                <p>Custom color for the icons displayed in the tabbed navigation when dark mode is enabled</p>
+            </div>
+            <div class="ml-col-half">
+                <input  class="color-picker" name="ml_dark_mode_tabbed_navigation_icons_color" type="text"
+                    value="<?php echo esc_attr( get_option( 'ml_dark_mode_tabbed_navigation_icons_color' ) ); ?>"/>
+            </div>
+        </div>
+
+        <h4>Tabbed navigation active icon color</h4>
+        <div class="ml-col-row ml-color">
+            <div class="ml-col-half">
+                <p>Custom color for the tabbed navigation active icon color when dark mode is enabled</p>
+            </div>
+            <div class="ml-col-half">
+                <input  class="color-picker" name="ml_dark_mode_tabbed_navigation_active_icon_color" type="text"
+                    value="<?php echo esc_attr( get_option( 'ml_dark_mode_tabbed_navigation_active_icon_color' ) ); ?>"/>
+            </div>
+        </div>
+
+        <h4>Notification switch main color</h4>
+        <div class="ml-col-row ml-color">
+            <div class="ml-col-half">
+                <p>Custom color for the notification switch main color when dark mode is enabled</p>
+            </div>
+            <div class="ml-col-half">
+                <input  class="color-picker" name="ml_dark_mode_notification_switch_main_color" type="text"
+                    value="<?php echo esc_attr( get_option( 'ml_dark_mode_notification_switch_main_color' ) ); ?>"/>
+            </div>
+        </div>
+
+        <h4>Notification switch background color</h4>
+        <div class="ml-col-row ml-color">
+            <div class="ml-col-half">
+                <p>Custom color for the notification switch background color when dark mode is enabled</p>
+            </div>
+            <div class="ml-col-half">
+                <input  class="color-picker" name="ml_dark_mode_notification_switch_background_color" type="text"
+                    value="<?php echo esc_attr( get_option( 'ml_dark_mode_notification_switch_background_color' ) ); ?>"/>
+            </div>
+        </div>
+
+        <h4>Hamburger menu background color</h4>
+        <div class="ml-col-row ml-color">
+            <div class="ml-col-half">
+                <p>Custom color for the hamburger menu background color when dark mode is enabled</p>
+            </div>
+            <div class="ml-col-half">
+                <input  class="color-picker" name="ml_dark_mode_hamburger_menu_background_color" type="text"
+                    value="<?php echo esc_attr( get_option( 'ml_dark_mode_hamburger_menu_background_color' ) ); ?>"/>
+            </div>
+        </div>
+
+        <h4>Hamburger menu text color</h4>
+        <div class="ml-col-row ml-color">
+            <div class="ml-col-half">
+                <p>Custom color for the hamburger menu text color when dark mode is enabled</p>
+            </div>
+            <div class="ml-col-half">
+                <input  class="color-picker" name="ml_dark_mode_hamburger_menu_text_color" type="text"
+                    value="<?php echo esc_attr( get_option( 'ml_dark_mode_hamburger_menu_text_color' ) ); ?>"/>
+            </div>
+        </div>
+
+        <h4>Custom CSS</h4>
+        <div class="ml-col-row">
+            <label>Custom CSS to be injected in the app's content when dark mode is enabled, allowing us to customize the appearance of the content in dark mode specifically.</label>
+            <textarea class="ml-editor-area ml-editor-area-css ml-show" name="ml_dark_mode_custom_css"><?php echo esc_html( Mobiloud::get_option( 'ml_dark_mode_custom_css', '' ) ); ?></textarea>
+        </div>
+    </div>
+</div>
+
+<div class="ml2-block">
     <div class="ml2-header"><h2>Related Posts</h2></div>
     <div class="ml2-body">