| 1 |
<div class="wrap" ng-app="wpStatelessApp"> |
| 2 |
<div id="stateless-settings-page-title"> |
| 3 |
<h1><?php _e( 'WP-Stateless', ud_get_stateless_media()->domain ); ?></h1> |
| 4 |
<div class="description"><?php _e( 'Upload and serve your WordPress media files from Google Cloud Storage.', ud_get_stateless_media()->domain ); ?></div> |
| 5 |
</div> |
| 6 |
<h2 class="nav-tab-wrapper"> |
| 7 |
<a href="#stless_settings_tab" class="stless_setting_tab nav-tab nav-tab-active"><?php _e( 'Settings', ud_get_stateless_media()->domain ); ?></a> |
| 8 |
<?php if(!is_network_admin()): ?> |
| 9 |
<a href="#stless_sync_tab" class="stless_setting_tab nav-tab"><?php _e( 'Sync', ud_get_stateless_media()->domain ); ?></a> |
| 10 |
<?php endif; ?> |
| 11 |
<a href="#stless_compatibility_tab" class="stless_setting_tab nav-tab"><?php _e( 'Compatibility', ud_get_stateless_media()->domain ); ?></a> |
| 12 |
<a href="#stless_questions_tab" class="stless_setting_tab nav-tab"><?php _e( 'Support', ud_get_stateless_media()->domain ); ?></a> |
| 13 |
</h2> |
| 14 |
|
| 15 |
<div class="stless_settings"> |
| 16 |
<div id="stless_settings_tab" class="stless_settings_content active" ng-controller="wpStatelessSettings"> |
| 17 |
<form method="post" action=""> |
| 18 |
<input type="hidden" name="action" value="stateless_settings"> |
| 19 |
<?php wp_nonce_field('wp-stateless-settings', '_smnonce');?> |
| 20 |
<table class="form-table"> |
| 21 |
<tbody> |
| 22 |
<?php if(is_network_admin()): ?> |
| 23 |
<tr> |
| 24 |
<th scope="row"><?php _e( 'Settings Panel Visibility', ud_get_stateless_media()->domain ); ?></th> |
| 25 |
<td> |
| 26 |
<fieldset> |
| 27 |
<legend class="screen-reader-text"><span><?php _e( 'Settings Panel Visibility', ud_get_stateless_media()->domain ); ?></span></legend> |
| 28 |
<p> |
| 29 |
<select name="sm[hide_settings_panel]" id="hide_settings_panel" ng-model="sm.hide_settings_panel" ng-disabled="sm.readonly.hide_settings_panel"> |
| 30 |
<option value="false"><?php _e( 'Visible', ud_get_stateless_media()->domain ); ?></option> |
| 31 |
<option value="true"><?php _e( 'Hidden', ud_get_stateless_media()->domain ); ?></option> |
| 32 |
</select> |
| 33 |
</p> |
| 34 |
<p class="description"><?php _e("Control the visibility and access of the WP-Stateless settings panel within individual network sites.");?></p> |
| 35 |
</fieldset> |
| 36 |
</td> |
| 37 |
</tr> |
| 38 |
<tr> |
| 39 |
<th scope="row"><?php _e( 'Setup Assistant Visibility', ud_get_stateless_media()->domain ); ?></th> |
| 40 |
<td> |
| 41 |
<fieldset> |
| 42 |
<legend class="screen-reader-text"><span><?php _e( 'Setup Assistant Visibility', ud_get_stateless_media()->domain ); ?></span></legend> |
| 43 |
<p> |
| 44 |
<select name="sm[hide_setup_assistant]" id="hide_setup_assistant" ng-model="sm.hide_setup_assistant" ng-disabled="sm.readonly.hide_setup_assistant"> |
| 45 |
<option value="false"><?php _e( 'Visible', ud_get_stateless_media()->domain ); ?></option> |
| 46 |
<option value="true"><?php _e( 'Hidden', ud_get_stateless_media()->domain ); ?></option> |
| 47 |
</select> |
| 48 |
</p> |
| 49 |
<p class="description"><?php _e("Control the visibility and access of the WP-Stateless setup assistant within individual network sites.");?></p> |
| 50 |
</fieldset> |
| 51 |
</td> |
| 52 |
</tr> |
| 53 |
<?php endif; ?> |
| 54 |
<tr> |
| 55 |
<th scope="row"><?php _e( 'General', ud_get_stateless_media()->domain ); ?></th> |
| 56 |
<td> |
| 57 |
<fieldset> |
| 58 |
<legend class="screen-reader-text"><span><?php _e( 'General', ud_get_stateless_media()->domain ); ?></span></legend> |
| 59 |
<h4><?php _e( 'Mode', ud_get_stateless_media()->domain ); ?></h4> |
| 60 |
<p class="description"><strong ng-bind="sm.showNotice('mode')" ></strong></p> |
| 61 |
<?php if(is_network_admin()): ?> |
| 62 |
<p class="sm-mode"> |
| 63 |
<label for="sm_mode_disabled"><input ng-model="sm.mode" id="sm_mode_not_override" type="radio" name="sm[mode]" value="" ng-checked="sm.mode == ''" ng-disabled="sm.readonly.mode"><?php _e( 'Don\'t override', ud_get_stateless_media()->domain ); ?><small class="description"><?php _e( 'Don\'t override.', ud_get_stateless_media()->domain ); ?></small></label> |
| 64 |
</p> |
| 65 |
<?php endif; ?> |
| 66 |
<p class="sm-mode"> |
| 67 |
<label for="sm_mode_disabled"><input ng-model="sm.mode" id="sm_mode_disabled" type="radio" name="sm[mode]" value="disabled" ng-checked="sm.mode == 'disabled'" ng-disabled="sm.readonly.mode"><?php _e( 'Disabled', ud_get_stateless_media()->domain ); ?><small class="description"><?php _e( 'Disable Stateless Media.', ud_get_stateless_media()->domain ); ?></small></label> |
| 68 |
</p> |
| 69 |
<p class="sm-mode"> |
| 70 |
<label for="sm_mode_backup"><input ng-model="sm.mode" id="sm_mode_backup" type="radio" name="sm[mode]" value="backup" ng-checked="sm.mode == 'backup'" ng-disabled="sm.readonly.mode"><?php _e( 'Backup', ud_get_stateless_media()->domain ); ?><small class="description"><?php _e( 'Upload media files to Google Storage and serve local file urls.', ud_get_stateless_media()->domain ); ?></small></label> |
| 71 |
</p> |
| 72 |
<p class="sm-mode"> |
| 73 |
<label for="sm_mode_cdn"><input ng-model="sm.mode" id="sm_mode_cdn" type="radio" name="sm[mode]" value="cdn" ng-checked="sm.mode == 'cdn'" ng-disabled="sm.readonly.mode"><?php _e( 'CDN', ud_get_stateless_media()->domain ); ?><small class="description"><?php _e( 'Copy media files to Google Storage and serve them directly from there.', ud_get_stateless_media()->domain ); ?></small></label> |
| 74 |
</p> |
| 75 |
<p class="sm-mode"> |
| 76 |
<label for="sm_mode_stateless"><input ng-model="sm.mode" id="sm_mode_stateless" type="radio" name="sm[mode]" value="stateless" ng-checked="sm.mode == 'stateless'" ng-disabled="sm.readonly.mode"><?php _e( 'Stateless', ud_get_stateless_media()->domain ); ?><small class="description"><?php _e( 'Store and serve media files with Google Cloud Storage only. Media files are not stored locally.', ud_get_stateless_media()->domain ); ?></small></label> |
| 77 |
</p> |
| 78 |
<hr> |
| 79 |
|
| 80 |
<h4><?php _e( 'File URL Replacement', ud_get_stateless_media()->domain ); ?></h4> |
| 81 |
<p class="sm-file-url"> |
| 82 |
<select name="sm[body_rewrite]" id="sm_file_url" ng-model="sm.body_rewrite" ng-disabled="sm.readonly.body_rewrite"> |
| 83 |
<?php if(is_network_admin()): ?> |
| 84 |
<option value=""><?php _e("Don't override");?></option> |
| 85 |
<?php endif; ?> |
| 86 |
<option value="false"><?php _e( 'Disable', ud_get_stateless_media()->domain ); ?></option> |
| 87 |
<option value="enable_editor"><?php _e( 'Enable Editor', ud_get_stateless_media()->domain ); ?></option> |
| 88 |
<option value="enable_meta"><?php _e( 'Enable Meta', ud_get_stateless_media()->domain ); ?></option> |
| 89 |
<option value="true"><?php _e( 'Enable Editor & Meta', ud_get_stateless_media()->domain ); ?></option> |
| 90 |
</select> |
| 91 |
</p> |
| 92 |
<p class="description"><strong ng-bind="sm.showNotice('body_rewrite')" ></strong> <?php _e( 'Scans post content and meta during presentation and replaces local media file urls with GCS urls. When selecting meta or true depending on the amount of meta, this could be significantly impact performance negatively. This setting does not modify your database.', ud_get_stateless_media()->domain ); ?></p> |
| 93 |
|
| 94 |
<h4 ng-show="sm.body_rewrite == 'true' || sm.body_rewrite == 'enable_editor' || sm.body_rewrite == 'enable_meta'"><?php _e( 'Supported File Types', ud_get_stateless_media()->domain ); ?></h4> |
| 95 |
<div ng-show="sm.body_rewrite == 'true' || sm.body_rewrite == 'enable_editor' || sm.body_rewrite == 'enable_meta'" class="body_rewrite_types"> |
| 96 |
<p> |
| 97 |
<label for="body_rewrite_types"> |
| 98 |
<input name="sm[body_rewrite_types]" type="text" id="body_rewrite_types" class="regular-text ltr" ng-model="sm.body_rewrite_types" ng-disabled="sm.readonly.body_rewrite_types"> |
| 99 |
</label> |
| 100 |
</p> |
| 101 |
<p class="description"><strong ng-bind="sm.showNotice('body_rewrite_types')" ></strong> <?php _e( 'Define the file types you would like supported with File URL Replacement. Separate each type by a space.', ud_get_stateless_media()->domain ); ?></p> |
| 102 |
</div> |
| 103 |
</fieldset> |
| 104 |
</td> |
| 105 |
</tr> |
| 106 |
|
| 107 |
<tr> |
| 108 |
<th scope="row"><?php _e( 'Google Cloud Storage (GCS)', ud_get_stateless_media()->domain ); ?></th> |
| 109 |
<td> |
| 110 |
<fieldset> |
| 111 |
<legend class="screen-reader-text"><span><?php _e( 'Google Cloud Storage (GCS)', ud_get_stateless_media()->domain ); ?></span></legend> |
| 112 |
<h4><?php _e( 'Bucket', ud_get_stateless_media()->domain ); ?></h4> |
| 113 |
<p> |
| 114 |
<label for="bucket_name"> |
| 115 |
<input name="sm[bucket]" type="text" id="bucket_name" class="regular-text ltr" ng-model="sm.bucket" ng-change="sm.generatePreviewUrl()" ng-disabled="sm.readonly.bucket"> |
| 116 |
</label> |
| 117 |
</p> |
| 118 |
<p class="description"><strong ng-bind="sm.showNotice('bucket')" ></strong> <?php _e( 'The name of the GCS bucket.', ud_get_stateless_media()->domain ); ?></p> |
| 119 |
<hr> |
| 120 |
|
| 121 |
<h4><?php _e( 'Bucket Folder', ud_get_stateless_media()->domain ); ?></h4> |
| 122 |
<p> |
| 123 |
<label for="bucket_folder_name"> |
| 124 |
<input name="sm[root_dir]" type="text" id="bucket_folder_name" class="regular-text ltr" ng-model="sm.root_dir" ng-disabled="sm.readonly.root_dir" ng-change="sm.generatePreviewUrl()"> |
| 125 |
</label> |
| 126 |
</p> |
| 127 |
<p class="description"><strong ng-bind="sm.showNotice('root_dir')" ></strong> <?php _e( 'If you would like files to be uploaded into a particular folder within the bucket, define that path here.', ud_get_stateless_media()->domain ); ?></p> |
| 128 |
<hr> |
| 129 |
|
| 130 |
<h4><?php _e( 'Service Account JSON', ud_get_stateless_media()->domain ); ?></h4> |
| 131 |
<p> |
| 132 |
<label for="service_account_json"> |
| 133 |
<textarea name="sm[key_json]" type="text" id="service_account_json" class="regular-text ltr" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" ng-disabled="sm.readonly.key_json">{{sm.key_json}}</textarea> |
| 134 |
</label> |
| 135 |
</p> |
| 136 |
<p class="description"><strong ng-bind="sm.showNotice('key_json')" ></strong> <?php _e( 'Private key in JSON format for the service account WP-Stateless will use to connect to your Google Cloud project and bucket.', ud_get_stateless_media()->domain ); ?></p> |
| 137 |
<hr> |
| 138 |
|
| 139 |
<h4><?php _e( 'Cache-Control', ud_get_stateless_media()->domain ); ?></h4> |
| 140 |
<p> |
| 141 |
<label for="gcs_cache_control_text"> |
| 142 |
<input name="sm[cache_control]" type="text" id="gcs_cache_control_text" class="regular-text ltr" placeholder="public, max-age=36000, must-revalidate" ng-model="sm.cache_control" ng-disabled="sm.readonly.cache_control"> |
| 143 |
</label> |
| 144 |
</p> |
| 145 |
<p class="description"><strong ng-bind="sm.showNotice('cache_control')" ></strong> <?php _e( 'Override the default cache control assigned by GCS.', ud_get_stateless_media()->domain ); ?></p> |
| 146 |
<hr> |
| 147 |
|
| 148 |
<h4><?php _e( 'Delete GCS File', ud_get_stateless_media()->domain ); ?></h4> |
| 149 |
<p> |
| 150 |
<select name="sm[delete_remote]" id="gcs_delete_file" ng-model="sm.delete_remote" ng-disabled="sm.readonly.delete_remote"> |
| 151 |
<?php if(is_network_admin()): ?> |
| 152 |
<option value=""><?php _e( 'Don\'t override', ud_get_stateless_media()->domain ); ?></option> |
| 153 |
<?php endif; ?> |
| 154 |
<option value="true"><?php _e( 'Enable', ud_get_stateless_media()->domain ); ?></option> |
| 155 |
<option value="false"><?php _e( 'Disable', ud_get_stateless_media()->domain ); ?></option> |
| 156 |
</select> |
| 157 |
</p> |
| 158 |
<p class="description"><strong ng-bind="sm.showNotice('delete_remote')" ></strong> <?php _e( 'Delete the GCS file when the file is deleted from WordPress.', ud_get_stateless_media()->domain ); ?></p> |
| 159 |
</fieldset> |
| 160 |
</td> |
| 161 |
</tr> |
| 162 |
<tr> |
| 163 |
<th scope="row"><?php _e( 'File URL', ud_get_stateless_media()->domain ); ?></th> |
| 164 |
<td> |
| 165 |
<fieldset> |
| 166 |
<legend class="screen-reader-text"><span><?php _e( 'File URL', ud_get_stateless_media()->domain ); ?></span></legend> |
| 167 |
<h4><?php _e( 'Preview', ud_get_stateless_media()->domain ); ?></h4> |
| 168 |
<p> |
| 169 |
<label for="file_url_grp_preview"> |
| 170 |
<input type="text" id="file_url_grp_preview" class="regular-text ltr" readonly="readonly" ng-model="sm.preview_url" ng-disabled="sm.readonly"> |
| 171 |
</label> |
| 172 |
</p> |
| 173 |
<p class="description"><?php _e( 'An example file url utilizing all configured settings.', ud_get_stateless_media()->domain ); ?></p> |
| 174 |
<hr> |
| 175 |
|
| 176 |
<h4><?php _e( 'Domain', ud_get_stateless_media()->domain ); ?></h4> |
| 177 |
<p> |
| 178 |
<label for="bucket_folder_name"> |
| 179 |
<input name="sm[custom_domain]" ng-model="sm.custom_domain" type="text" id="bucket_folder_name" class="regular-text ltr" placeholder="" ng-change="sm.generatePreviewUrl()" ng-disabled="sm.readonly.custom_domain"> |
| 180 |
</label> |
| 181 |
</p> |
| 182 |
<p class="description"> |
| 183 |
<strong ng-bind="sm.showNotice('custom_domain')" ></strong> <br> |
| 184 |
<strong class="notice" ng-show="sm.is_custom_domain"><?php printf(__( 'This will require proxy/load balancer.', ud_get_stateless_media()->domain )); ?></strong> |
| 185 |
<?php printf(__( 'Replace the default GCS domain with your own custom domain. This will require you to <a href="%s" target="_blank">configure a CNAME</a>. Be advised that the bucket name and domain name must match exactly, and HTTPS is not supported with a custom domain out of the box.', ud_get_stateless_media()->domain ), 'https://cloud.google.com/storage/docs/xml-api/reference-uris#cname'); ?> |
| 186 |
</p> |
| 187 |
<hr> |
| 188 |
|
| 189 |
<?php if(!is_network_admin()): ?> |
| 190 |
<h4><?php _e( 'Organization', ud_get_stateless_media()->domain ); ?></h4> |
| 191 |
<p> |
| 192 |
<select id="org_url_grp" name="sm[organize_media]" ng-model="sm.organize_media" ng-change="sm.generatePreviewUrl()" ng-disabled="sm.readonly.organize_media"> |
| 193 |
<?php if(is_network_admin()): ?> |
| 194 |
<option value=""><?php _e( 'Don\'t override', ud_get_stateless_media()->domain ); ?></option> |
| 195 |
<?php endif; ?> |
| 196 |
<option value="1"><?php _e( 'Enable', ud_get_stateless_media()->domain ); ?></option> |
| 197 |
<option value=""><?php _e( 'Disable', ud_get_stateless_media()->domain ); ?></option> |
| 198 |
</select> |
| 199 |
</p> |
| 200 |
<p class="description"> |
| 201 |
<?php printf(__( 'Organize uploads into year and month based folders. This will update the <a href="%s">related WordPress media setting</a>.', ud_get_stateless_media()->domain ), admin_url("options-media.php")); ?> |
| 202 |
</p> |
| 203 |
<?php endif; ?> |
| 204 |
|
| 205 |
<hr> |
| 206 |
<h4><?php _e( 'Cache-Busting', ud_get_stateless_media()->domain ); ?></h4> |
| 207 |
<p> |
| 208 |
<select id="cache_busting" name="sm[hashify_file_name]" ng-model="sm.hashify_file_name" ng-change="sm.generatePreviewUrl()" ng-disabled="sm.readonly.hashify_file_name || sm.mode == 'stateless'"> |
| 209 |
<?php if(is_network_admin()): ?> |
| 210 |
<option value=""><?php _e( 'Don\'t override', ud_get_stateless_media()->domain ); ?></option> |
| 211 |
<?php endif; ?> |
| 212 |
<option value="true"><?php _e( 'Enable', ud_get_stateless_media()->domain ); ?></option> |
| 213 |
<option value="false"><?php _e( 'Disable', ud_get_stateless_media()->domain ); ?></option> |
| 214 |
</select> |
| 215 |
</p> |
| 216 |
<p class="description"><strong ng-bind="sm.showNotice('hashify_file_name')" ></strong> |
| 217 |
<span ng-show="sm.mode == 'stateless'"> |
| 218 |
<?php _e(sprintf( "<b>Required by Stateless Mode. Override with the <a href='%s' target='_blank'>WP_STATELESS_MEDIA_CACHE_BUSTING</a> constant.</b>","https://github.com/wpCloud/wp-stateless/wiki/Constants#wp_stateless_media_cache_busting"), ud_get_stateless_media()->domain);?> |
| 219 |
</span> |
| 220 |
|
| 221 |
<?php _e( 'Prepends a random set of numbers and letters to the filename. This is useful for preventing caching issues when uploading files that have the same filename.', ud_get_stateless_media()->domain ); ?></p> |
| 222 |
</fieldset> |
| 223 |
</td> |
| 224 |
</tr> |
| 225 |
</tbody> |
| 226 |
</table> |
| 227 |
|
| 228 |
|
| 229 |
<?php submit_button(); ?> |
| 230 |
</form> |
| 231 |
</div> |
| 232 |
<?php if(!is_network_admin()): ?> |
| 233 |
<div id="stless_sync_tab" class="stless_settings_content"> |
| 234 |
<?php include 'regenerate_interface.php'; ?> |
| 235 |
</div> |
| 236 |
<?php endif; ?> |
| 237 |
<div id="stless_compatibility_tab" class="stless_settings_content" ng-controller="wpStatelessCompatibility"> |
| 238 |
<div class="container-fluid"> |
| 239 |
<h2><?php _e("Enable or disable compatibility with other plugins.");?></h2> |
| 240 |
<p><?php _e(sprintf("Having an issue with another plugin? <a class='stless_setting_tab' href='%s'>Submit feedback</a> and let us know your issue!", "#stless_questions_tab"));?></p> |
| 241 |
<form method="post" action=""> |
| 242 |
<input type="hidden" name="action" value="stateless_modules"> |
| 243 |
<?php wp_nonce_field('wp-stateless-modules', '_smnonce');?> |
| 244 |
|
| 245 |
<table class="form-table"> |
| 246 |
<tr ng-repeat="module in modules"> |
| 247 |
<th> |
| 248 |
<label for="{{module.id}}">{{module.title}}</label> |
| 249 |
</th> |
| 250 |
<td> |
| 251 |
<select name="stateless-modules[{{module.id}}]" id="{{module.id}}" ng-model="module.enabled" ng-disabled="module.is_constant || (module.is_network_override ||!module.is_plugin_active) && !module.is_network_admin"> |
| 252 |
<?php if(is_network_admin()): ?> |
| 253 |
<option value=""><?php _e("Don't override");?></option> |
| 254 |
<?php endif; ?> |
| 255 |
<option value="inactive" ng-show="module.enabled == 'inactive'"><?php _e( 'Not Available', ud_get_stateless_media()->domain ); ?></option> |
| 256 |
<option value="false"><?php _e( 'Disable', ud_get_stateless_media()->domain ); ?></option> |
| 257 |
<option value="true"><?php _e( 'Enable', ud_get_stateless_media()->domain ); ?></option> |
| 258 |
</select> |
| 259 |
<p class="description"> |
| 260 |
<strong ng-show="!module.is_plugin_active && module.is_plugin"><?php _e("Please activate the plugin first.");?></strong> |
| 261 |
<strong ng-show="!module.is_plugin_active && module.is_theme"><?php _e("Please activate the theme first.");?></strong> |
| 262 |
<strong ng-show="module.is_constant"><?php _e("Currently configured via a constant.");?></strong> |
| 263 |
<strong ng-show="module.is_network_override"><?php _e("Currently configured via network settings.");?></strong> |
| 264 |
{{module.description}} |
| 265 |
</p> |
| 266 |
</td> |
| 267 |
</tr> |
| 268 |
</table> |
| 269 |
<?php submit_button(); ?> |
| 270 |
</form> |
| 271 |
</div> |
| 272 |
</div> |
| 273 |
<div id="stless_questions_tab" class="stless_settings_content"> |
| 274 |
<!--[if lte IE 8]> |
| 275 |
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script> |
| 276 |
<![endif]--> |
| 277 |
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script> |
| 278 |
<script> |
| 279 |
hbspt.forms.create({ |
| 280 |
portalId: '3453418', |
| 281 |
formId: 'cad1f6e1-7825-4e6d-a3e7-278c91abce7e', |
| 282 |
submitButtonClass: 'button button-primary', |
| 283 |
}); |
| 284 |
</script> |
| 285 |
</div> |
| 286 |
</div> |
| 287 |
|
| 288 |
</div> |
