data-reset-data-dialog.php
6 years ago
palettes-edit-palette.php
10 months ago
privacy-ip-delete.php
6 years ago
palettes-edit-palette.php
282 lines
| 1 | <?php |
| 2 | /** |
| 3 | * Modal for editing or creating custom palettes. |
| 4 | * |
| 5 | * @package Hustle |
| 6 | * @since 4.0.4 |
| 7 | */ |
| 8 | |
| 9 | $palette_args = array( |
| 10 | 'is_settings_page' => true, |
| 11 | 'capitalize_singular' => __( 'Module', 'hustle' ), |
| 12 | ); |
| 13 | |
| 14 | ob_start(); |
| 15 | ?> |
| 16 | |
| 17 | <?php // STEP 1: Create Palette. ?> |
| 18 | <div id="hustle-edit-palette-first-step" style="margin-bottom: 0;"> |
| 19 | |
| 20 | <p id="customPaletteDesc" class="sui-description"><?php esc_html_e( "Let's start by giving your color palette a name and choosing a base palette. You can either begin with one of our default color palettes or import colors from one of your existing modules.", 'hustle' ); ?></p> |
| 21 | |
| 22 | <div class="sui-form-field"> |
| 23 | |
| 24 | <label for="hustle-palette-name" id="hustle-palette-name-label" class="sui-label"><?php esc_html_e( 'Name', 'hustle' ); ?></label> |
| 25 | |
| 26 | <input |
| 27 | type="text" |
| 28 | autocomplete="off" |
| 29 | name="palette_name" |
| 30 | value="" |
| 31 | placeholder="<?php esc_html_e( 'Custom Palette Name', 'hustle' ); ?>" |
| 32 | id="hustle-palette-name" |
| 33 | class="hustle-required-field sui-form-control" |
| 34 | aria-labelledby="hustle-palette-name-label" |
| 35 | aria-describedby="hustle-palette-name-error" |
| 36 | data-error-message="<?php esc_attr_e( 'The palette name is required.', 'hustle' ); ?>" |
| 37 | /> |
| 38 | |
| 39 | <span id="hustle-palette-name-error" class="sui-error-message" style="display: none;" aria-hidden="true" hidden></span> |
| 40 | |
| 41 | </div> |
| 42 | |
| 43 | <div class="sui-form-field"> |
| 44 | |
| 45 | <label id="hustle-base-palette-label" class="sui-label"><?php esc_html_e( 'Base Palette', 'hustle' ); ?></label> |
| 46 | |
| 47 | <div id="hustle-base-palette" class="sui-tabs sui-side-tabs" style="margin-top: 5px;"> |
| 48 | |
| 49 | <div role="tablist" class="sui-tabs-menu"> |
| 50 | |
| 51 | <label |
| 52 | id="hustle-palette-default-label" |
| 53 | for="hustle-palette-base-source-palette" |
| 54 | class="sui-tab-item active" |
| 55 | role="tab" |
| 56 | aria-controls="hustle-palette-default" |
| 57 | > |
| 58 | <input |
| 59 | tabindex="-1" |
| 60 | type="radio" |
| 61 | name="base_source" |
| 62 | value="palette" |
| 63 | id="hustle-palette-base-source-palette" |
| 64 | style="display: none;" |
| 65 | aria-hidden="true" |
| 66 | hidden |
| 67 | checked="checked" |
| 68 | data-tab-menu="default" |
| 69 | /> |
| 70 | <?php esc_html_e( 'Default Palettes', 'hustle' ); ?> |
| 71 | </label> |
| 72 | |
| 73 | <label |
| 74 | id="hustle-palette-import-label" |
| 75 | for="hustle-palette-base-source-module" |
| 76 | class="sui-tab-item" |
| 77 | role="tab" |
| 78 | aria-controls="hustle-palette-import" |
| 79 | > |
| 80 | <input |
| 81 | tabindex="-1" |
| 82 | type="radio" |
| 83 | name="base_source" |
| 84 | value="module" |
| 85 | id="hustle-palette-base-source-module" |
| 86 | style="display: none;" |
| 87 | aria-hidden="true" |
| 88 | hidden |
| 89 | data-tab-menu="module" |
| 90 | /> |
| 91 | <?php esc_html_e( 'Import From A Module', 'hustle' ); ?> |
| 92 | </label> |
| 93 | |
| 94 | </div> |
| 95 | |
| 96 | <div class="sui-tabs-content"> |
| 97 | |
| 98 | <?php // TAB: Default Palettes. ?> |
| 99 | <div |
| 100 | role="tabpanel" |
| 101 | tabindex="0" |
| 102 | id="hustle-palette-default" |
| 103 | class="sui-tab-content sui-border-frame active" |
| 104 | aria-labelledby="hustle-palette-default-label" |
| 105 | data-tab-content="default" |
| 106 | > |
| 107 | |
| 108 | <p class="sui-description" style="margin-bottom: 20px;"><?php esc_html_e( 'Choose one of the default color palettes and click on the next button to start customizing it.', 'hustle' ); ?></p> |
| 109 | |
| 110 | <div class="sui-form-field"> |
| 111 | |
| 112 | <label for="hustle-pick-palette" id="hustle-pick-palette-label" class="sui-label"><?php esc_html_e( 'Color Palette', 'hustle' ); ?></label> |
| 113 | |
| 114 | <select id="hustle-pick-palette" name="base_palette" aria-labelledby="hustle-pick-palette-label"> |
| 115 | <?php foreach ( $palettes as $slug => $display_name ) : ?> |
| 116 | <option value="<?php echo esc_attr( $slug ); ?>"><?php echo esc_attr( $display_name ); ?></option> |
| 117 | <?php endforeach; ?> |
| 118 | </select> |
| 119 | |
| 120 | </div> |
| 121 | |
| 122 | </div> |
| 123 | |
| 124 | <?php // TAB: Import Palette. ?> |
| 125 | <div |
| 126 | role="tabpanel" |
| 127 | tabindex="0" |
| 128 | id="hustle-palette-import" |
| 129 | class="sui-tab-content sui-border-frame" |
| 130 | aria-labelledby="hustle-palette-import-label" |
| 131 | data-tab-content="module" |
| 132 | hidden |
| 133 | > |
| 134 | |
| 135 | <p class="sui-description" style="margin-bottom: 20px;"><?php esc_html_e( 'Import colors from one of your existing modules and click on the next button to start customizing the base palette.', 'hustle' ); ?></p> |
| 136 | |
| 137 | <div class="sui-form-field" style="margin-bottom: 20px;"> |
| 138 | |
| 139 | <label for="hustle-palette-module-type" id="hustle-palette-module-type-label" class="sui-label"><?php esc_html_e( 'Module Type', 'hustle' ); ?></label> |
| 140 | |
| 141 | <select id="hustle-palette-module-type" name="module_type" aria-labelledby="hustle-palette-module-type-label"> |
| 142 | |
| 143 | <?php |
| 144 | foreach ( Hustle_Data::get_module_types() as $module_type ) : |
| 145 | if ( Hustle_Module_Model::SOCIAL_SHARING_MODULE === $module_type ) { |
| 146 | continue; |
| 147 | } |
| 148 | ?> |
| 149 | |
| 150 | <option value="<?php echo esc_attr( $module_type ); ?>"><?php echo esc_html( Opt_In_Utils::get_module_type_display_name( $module_type, false, true ) ); ?></option> |
| 151 | |
| 152 | <?php endforeach; ?> |
| 153 | |
| 154 | </select> |
| 155 | |
| 156 | </div> |
| 157 | |
| 158 | <div class="sui-form-field" style="margin-bottom: 20px;"> |
| 159 | |
| 160 | <label for="hustle-palette-module-name" id="hustle-palette-module-name-label" class="sui-label"><?php esc_html_e( 'Module Name', 'hustle' ); ?></label> |
| 161 | |
| 162 | <select id="hustle-palette-module-name" name="module_id" class="sui-select" aria-labelledby="hustle-palette-module-name-label"></select> |
| 163 | |
| 164 | </div> |
| 165 | |
| 166 | <div class="sui-form-field"> |
| 167 | |
| 168 | <label for="hustle-palette-module-fallback" id="hustle-palette-module-fallback-label" class="sui-label"><?php esc_html_e( 'Fallback Color Palette', 'hustle' ); ?></label> |
| 169 | |
| 170 | <select id="hustle-palette-module-fallback" name="fallback_palette" aria-labelledby="hustle-palette-module-fallback-label" aria-describedby="hustle-palette-module-fallback-message"> |
| 171 | <?php foreach ( $palettes as $slug => $display_name ) : ?> |
| 172 | <option value="<?php echo esc_attr( $slug ); ?>" ><?php echo esc_html( $display_name ); ?></option> |
| 173 | <?php endforeach; ?> |
| 174 | </select> |
| 175 | |
| 176 | <span id="hustle-palette-module-fallback-message" class="sui-description"><?php esc_html_e( 'We will use this palette to import colors which are not available in your chosen module.', 'hustle' ); ?></span> |
| 177 | |
| 178 | </div> |
| 179 | |
| 180 | </div> |
| 181 | |
| 182 | </div> |
| 183 | |
| 184 | </div> |
| 185 | |
| 186 | </div> |
| 187 | |
| 188 | </div> |
| 189 | |
| 190 | <?php // STEP 2: Edit Palette. ?> |
| 191 | <div id="hustle-edit-palette-second-step" style="display: none;" tabindex="-1" aria-hidden="true" hidden></div> |
| 192 | |
| 193 | <?php |
| 194 | $body_content = ob_get_clean(); |
| 195 | ob_start(); |
| 196 | ?> |
| 197 | |
| 198 | <button class="sui-button sui-button-ghost hustle-modal-close" data-modal-close> |
| 199 | <?php esc_attr_e( 'Cancel', 'hustle' ); ?> |
| 200 | </button> |
| 201 | |
| 202 | <button |
| 203 | class="hustle-button-action sui-button" |
| 204 | data-hustle-action="go-to-step" |
| 205 | data-form-id="hustle-edit-palette-form" |
| 206 | data-step="2" |
| 207 | aria-labelledby="hustle-step-button-text" |
| 208 | > |
| 209 | <span id="hustle-step-button-text" class="sui-loading-text"> |
| 210 | <?php esc_attr_e( 'Next', 'hustle' ); ?> |
| 211 | </span> |
| 212 | <span id="hustle-finish-button-text" class="sui-loading-text" style="display:none;"> |
| 213 | <?php esc_attr_e( 'Save Palette', 'hustle' ); ?> |
| 214 | </span> |
| 215 | <span class="sui-icon-loader sui-loading" aria-hidden="true"></span> |
| 216 | </button> |
| 217 | |
| 218 | <?php |
| 219 | $footer_content = ob_get_clean(); |
| 220 | |
| 221 | $attributes = array( |
| 222 | 'modal_id' => 'edit-palette', |
| 223 | 'has_description' => false, |
| 224 | 'modal_size' => 'lg', |
| 225 | 'sui_box_tag' => 'form', |
| 226 | 'sui_box_id' => 'hustle-edit-palette-form', |
| 227 | |
| 228 | 'header' => array( |
| 229 | 'title' => __( 'Create Custom Palette', 'hustle' ), |
| 230 | ), |
| 231 | 'body' => array( |
| 232 | 'content' => $body_content, |
| 233 | ), |
| 234 | 'footer' => array( |
| 235 | 'classes' => 'sui-content-separated', |
| 236 | 'content' => $footer_content, |
| 237 | ), |
| 238 | ); |
| 239 | |
| 240 | $this->render_modal( $attributes ); |
| 241 | ?> |
| 242 | |
| 243 | <script type="text/template" id="hustle-dialog--edit-palette-tpl"> |
| 244 | |
| 245 | <p class="sui-description"><?php esc_html_e( 'Customize your base palette as per your liking and click on the “Create Palette“ button to add this to your palettes list.', 'hustle' ); ?></p> |
| 246 | |
| 247 | <div class="sui-form-field"> |
| 248 | <?php |
| 249 | $this->render( |
| 250 | 'admin/global/sui-components/sui-tabs', |
| 251 | array( |
| 252 | 'name' => 'module_type', |
| 253 | 'content' => true, |
| 254 | 'options' => array( |
| 255 | 'general' => array( |
| 256 | 'label' => esc_html__( 'General', 'hustle' ), |
| 257 | 'content' => $this->render( |
| 258 | 'admin/commons/sui-wizard/elements/palette-general', |
| 259 | $palette_args, |
| 260 | true |
| 261 | ), |
| 262 | ), |
| 263 | 'optin' => array( |
| 264 | 'label' => esc_html__( 'Opt-in', 'hustle' ), |
| 265 | 'content' => $this->render( |
| 266 | 'admin/commons/sui-wizard/elements/palette-optin', |
| 267 | $palette_args, |
| 268 | true |
| 269 | ), |
| 270 | ), |
| 271 | ), |
| 272 | ) |
| 273 | ); |
| 274 | ?> |
| 275 | </div> |
| 276 | |
| 277 | <# if ( 'undefined' !== typeof slug ) { #> |
| 278 | <input type="hidden" name="slug" value="{{ slug }}"> |
| 279 | <# } #> |
| 280 | |
| 281 | </script> |
| 282 |