edit.js
341 lines
| 1 | /** |
| 2 | * Internal dependencies |
| 3 | */ |
| 4 | import Inspector from './inspector'; |
| 5 | import SAB_Social_Icon from '../utils/social-icon'; |
| 6 | |
| 7 | /** |
| 8 | * WordPress dependencies |
| 9 | */ |
| 10 | const { __ } = wp.i18n; |
| 11 | const { Component, Fragment } = wp.element; |
| 12 | const { Spinner } = wp.components; |
| 13 | |
| 14 | /** |
| 15 | * Block edit function |
| 16 | */ |
| 17 | export default class Edit extends Component { |
| 18 | |
| 19 | constructor( props ) { |
| 20 | super( ...arguments ); |
| 21 | } |
| 22 | |
| 23 | renderSocialIcon( url, iconName ) { |
| 24 | |
| 25 | let sabColor; |
| 26 | |
| 27 | if ( '1' == sabVars.sab_colored ) { |
| 28 | sabColor = 'saboxplugin-icon-color'; |
| 29 | } else { |
| 30 | sabColor = 'saboxplugin-icon-grey'; |
| 31 | } |
| 32 | |
| 33 | let type = 'simple'; |
| 34 | if ( '1' == sabVars.sab_colored ) { |
| 35 | if ( '1' == sabVars.sab_icons_style ) { |
| 36 | type = 'circle'; |
| 37 | } else { |
| 38 | type = 'square'; |
| 39 | } |
| 40 | } |
| 41 | |
| 42 | let social_icon = new SAB_Social_Icon(); |
| 43 | |
| 44 | return [ |
| 45 | <a href={ url } target="_blank" class={ sabColor }> |
| 46 | { social_icon.icon_to_svg( iconName, type ) } |
| 47 | </a> |
| 48 | ]; |
| 49 | |
| 50 | } |
| 51 | |
| 52 | changeAuthor( authorID ) { |
| 53 | jQuery.ajax({ |
| 54 | type: "POST", |
| 55 | data : { action: "sab_get_author", author_ID: authorID, nonce: sabVars.nonce }, |
| 56 | url : sabVars.ajaxURL, |
| 57 | success: ( result ) => { |
| 58 | |
| 59 | if( result.success == false ) { |
| 60 | this.props.setAttributes( { |
| 61 | status: 'error', |
| 62 | } ); |
| 63 | return; |
| 64 | } |
| 65 | |
| 66 | let author = JSON.parse(result); |
| 67 | |
| 68 | this.props.setAttributes( { |
| 69 | authorID: author.ID, |
| 70 | avatar: author.avatar, |
| 71 | profile_image: author['sabox-profile-image'], |
| 72 | display_name: author.display_name, |
| 73 | description: author.description, |
| 74 | user_url: author.user_url, |
| 75 | social_links: author.sabox_social_links, |
| 76 | status: 'ready' |
| 77 | } ); |
| 78 | } |
| 79 | }); |
| 80 | } |
| 81 | |
| 82 | generateInlineCSS() { |
| 83 | let css = ''; |
| 84 | |
| 85 | // Border color of Simple Author Box |
| 86 | if ( '' != sabVars.sab_box_border ) { |
| 87 | css += '.saboxplugin-wrap {border-color:' + sabVars.sab_box_border + ';}'; |
| 88 | css += '.saboxplugin-wrap .saboxplugin-socials {border-color:' + sabVars.sab_box_border + ';}'; |
| 89 | } |
| 90 | // Border width of Simple Author Box |
| 91 | if ( '1' != sabVars.sab_box_border_width ) { |
| 92 | css += '.saboxplugin-wrap{ border-width: ' + sabVars.sab_box_border_width + 'px; }'; |
| 93 | } |
| 94 | |
| 95 | // Avatar image style |
| 96 | if ( '0' != sabVars.sab_avatar_style ) { |
| 97 | css += '.saboxplugin-wrap .saboxplugin-gravatar img {-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;}'; |
| 98 | } |
| 99 | |
| 100 | // Social icons style |
| 101 | if ( '0' != sabVars.sab_colored && '0' != sabVars.sab_icons_style ) { |
| 102 | css += '.saboxplugin-wrap .saboxplugin-socials .saboxplugin-icon-color {-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;}'; |
| 103 | } |
| 104 | |
| 105 | // Long Shadow |
| 106 | if ( '1' == sabVars.sab_colored && '1' != sabVars.sab_box_long_shadow ) { |
| 107 | css += '.saboxplugin-wrap .saboxplugin-socials .saboxplugin-icon-color .st1 {display: none;}'; |
| 108 | } |
| 109 | |
| 110 | // Thin border |
| 111 | if ( '1' == sabVars.sab_colored && '1' == sabVars.sab_box_thin_border ) { |
| 112 | let style = 'border-width: 1px;border-style:solid;'; |
| 113 | if ( '1' == sabVars.sab_icons_style ) { |
| 114 | style += 'border-radius:50%'; |
| 115 | } |
| 116 | css += '.saboxplugin-wrap .saboxplugin-socials .saboxplugin-icon-color svg {' + style + '}'; |
| 117 | } |
| 118 | |
| 119 | // Background color of social icons bar |
| 120 | if ( '' != sabVars.sab_box_icons_back ) { |
| 121 | css += '.saboxplugin-wrap .saboxplugin-socials{background-color:' + sabVars.sab_box_icons_back + ';}'; |
| 122 | } |
| 123 | |
| 124 | // Background color of author box |
| 125 | if ( '' != sabVars.sab_box_author_back ) { |
| 126 | css += '.saboxplugin-wrap {background-color:' + sabVars.sab_box_author_back + ';}'; |
| 127 | } |
| 128 | |
| 129 | // Color of author box paragraphs |
| 130 | if ( '' != sabVars.sab_box_author_p_color ) { |
| 131 | css += '.saboxplugin-wrap .saboxplugin-desc {color:' + sabVars.sab_box_author_p_color + ';}'; |
| 132 | } |
| 133 | |
| 134 | // Color of author box links |
| 135 | if ( '' != sabVars.sab_box_author_a_color ) { |
| 136 | css += '.saboxplugin-wrap .saboxplugin-desc a {color:' + sabVars.sab_box_author_a_color + ';}'; |
| 137 | } |
| 138 | |
| 139 | // Author name color |
| 140 | if ( '' != sabVars.sab_box_author_color ) { |
| 141 | css += '.saboxplugin-wrap .saboxplugin-authorname,.saboxplugin-wrap .saboxplugin-authorname a {color:' + sabVars.sab_box_author_color + ';}'; |
| 142 | } |
| 143 | |
| 144 | // Author web color |
| 145 | if ( '1' == sabVars.sab_web && '' != sabVars.sab_box_web_color ) { |
| 146 | css += '.saboxplugin-wrap .saboxplugin-web a {color:' + sabVars.sab_box_web_color + ';}'; |
| 147 | } |
| 148 | |
| 149 | // Author name font family |
| 150 | if ( 'None' != sabVars.sab_box_name_font ) { |
| 151 | css += '.saboxplugin-wrap .saboxplugin-authorname {font-family:"' + sabVars.sab_box_name_font + '";}'; |
| 152 | } |
| 153 | |
| 154 | // Author description font family |
| 155 | if ( 'None' != sabVars.sab_box_desc_font ) { |
| 156 | css += '.saboxplugin-wrap .saboxplugin-desc {font-family:' + sabVars.sab_box_desc_font + ';}'; |
| 157 | } |
| 158 | |
| 159 | // Author web font family |
| 160 | if ( '1' == sabVars.sab_web && 'None' != sabVars.sab_box_web_font ) { |
| 161 | css += '.saboxplugin-wrap .saboxplugin-web {font-family:"' + sabVars.sab_box_web_font + '";}'; |
| 162 | } |
| 163 | |
| 164 | // Author description font style |
| 165 | if ( '1' == sabVars.sab_desc_style ) { |
| 166 | css += '.saboxplugin-wrap .saboxplugin-desc {font-style:italic;}'; |
| 167 | } |
| 168 | |
| 169 | // Margin top & bottom, Padding |
| 170 | if ( '' != sabVars.padding_top_bottom ) { |
| 171 | css += '.saboxplugin-wrap {padding-top: ' + sabVars.padding_top_bottom + 'px; padding-bottom:' + sabVars.padding_top_bottom + 'px; }'; |
| 172 | } |
| 173 | if ( '' != sabVars.padding_left_right ) { |
| 174 | css += '.saboxplugin-wrap {padding-left: ' + sabVars.padding_left_right + 'px; padding-right:' + sabVars.padding_left_right + 'px; }'; |
| 175 | } |
| 176 | if ( '' != sabVars.top_margin ) { |
| 177 | css += '.saboxplugin-wrap {margin-top: ' + sabVars.top_margin + 'px; }'; |
| 178 | } |
| 179 | if ( '' != sabVars.bottom_margin ) { |
| 180 | css += '.saboxplugin-wrap {margin-bottom: ' + sabVars.bottom_margin + 'px; }'; |
| 181 | } |
| 182 | |
| 183 | // Author name text size |
| 184 | css += '.saboxplugin-wrap .saboxplugin-authorname {font-size:' + sabVars.sabox_name_size + 'px; line-height:' + ( parseInt ( sabVars.sabox_name_size ) + 7 ) + 'px;}'; |
| 185 | |
| 186 | // Author description font size |
| 187 | css += '.saboxplugin-wrap .saboxplugin-desc p, .saboxplugin-wrap .saboxplugin-desc {font-size:' + sabVars.sabox_desc_size + 'px !important; line-height:' + ( parseInt ( sabVars.sabox_desc_size ) + 7 ) + 'px !important;}'; |
| 188 | |
| 189 | // Author website text size |
| 190 | css += '.saboxplugin-wrap .saboxplugin-web {font-size:' + sabVars.sabox_web_size + 'px;}'; |
| 191 | |
| 192 | // Author name color |
| 193 | if ( '' != sabVars.sab_tab_background_color ) { |
| 194 | css += '.saboxplugin-wrap .saboxplugin-tabs-wrapper li {background-color:' + sabVars.sab_tab_background_color + ';}'; |
| 195 | } |
| 196 | |
| 197 | // Icons size |
| 198 | let icon_size = parseInt( sabVars.sabox_icon_size ); |
| 199 | if ( '1' == sabVars.sab_colored ) { |
| 200 | icon_size *= 2; |
| 201 | } |
| 202 | css += '.saboxplugin-wrap .saboxplugin-socials a svg {width:' + icon_size + 'px;height:' + icon_size + 'px;}'; |
| 203 | |
| 204 | |
| 205 | return css; |
| 206 | } |
| 207 | |
| 208 | loadCustomFonts(){ |
| 209 | |
| 210 | let sab_subset; |
| 211 | if ( 'none' != sabVars.sab_box_subset ) { |
| 212 | sab_subset = '&subset=' + sabVars.sab_box_subset; |
| 213 | } else { |
| 214 | sab_subset = '&subset=latin'; |
| 215 | } |
| 216 | |
| 217 | let bunny_fonts = []; |
| 218 | |
| 219 | if ( 'None' != sabVars.sab_box_name_font ) { |
| 220 | bunny_fonts.push( sabVars.sab_box_name_font.replace(' ', '+') ); |
| 221 | } |
| 222 | |
| 223 | if ( 'None' != sabVars.sab_box_desc_font ) { |
| 224 | bunny_fonts.push( sabVars.sab_box_desc_font.replace(' ', '+') ); |
| 225 | } |
| 226 | |
| 227 | if ( 'None' != sabVars.sab_box_web_font ) { |
| 228 | bunny_fonts.push( sabVars.sab_box_web_font.replace(' ', '+') ); |
| 229 | } |
| 230 | |
| 231 | function onlyUnique(value, index, self) { |
| 232 | return self.indexOf(value) === index; |
| 233 | } |
| 234 | bunny_fonts = bunny_fonts.filter( onlyUnique ); |
| 235 | |
| 236 | if ( bunny_fonts.length > 0 ) { |
| 237 | |
| 238 | bunny_fonts.forEach(function(entry,index) { |
| 239 | bunny_fonts[index] = entry + ':400,700,400italic,700italic'; |
| 240 | }); |
| 241 | |
| 242 | return <link href={ 'https://fonts.bunny.net/css?family=' + bunny_fonts.join('|') + sab_subset } rel="stylesheet"/> |
| 243 | |
| 244 | } |
| 245 | |
| 246 | } |
| 247 | |
| 248 | componentDidMount() { |
| 249 | this.changeAuthor( this.props.attributes.authorID == 0 ? sabVars.currentUserID : this.props.attributes.authorID ); |
| 250 | } |
| 251 | |
| 252 | render() { |
| 253 | |
| 254 | const { |
| 255 | attributes, |
| 256 | isSelected, |
| 257 | } = this.props; |
| 258 | |
| 259 | const { |
| 260 | authorID, |
| 261 | display_name, |
| 262 | avatar, |
| 263 | profile_image, |
| 264 | description, |
| 265 | user_url, |
| 266 | social_links, |
| 267 | status, |
| 268 | } = attributes; |
| 269 | |
| 270 | if( status == 'loading' ) { |
| 271 | return <div class="saboxplugin-wrap saboxplugin-wrap--loading"><Spinner/></div> |
| 272 | } |
| 273 | |
| 274 | if( status == 'error' ) { |
| 275 | return [ |
| 276 | <Fragment> |
| 277 | { isSelected && ( |
| 278 | <Inspector |
| 279 | changeAuthor = { ( authorID ) => this.changeAuthor( authorID ) } |
| 280 | { ...this.props } |
| 281 | /> |
| 282 | ) } |
| 283 | |
| 284 | <div class="saboxplugin-wrap saboxplugin-wrap--error">{ __( 'Author not found' ) }</div> |
| 285 | </Fragment> |
| 286 | ]; |
| 287 | } |
| 288 | |
| 289 | return [ |
| 290 | <Fragment> |
| 291 | { isSelected && ( |
| 292 | <Inspector |
| 293 | changeAuthor = { ( authorID ) => this.changeAuthor( authorID ) } |
| 294 | { ...this.props } |
| 295 | /> |
| 296 | ) } |
| 297 | |
| 298 | <div class="saboxplugin-wrap"> |
| 299 | |
| 300 | <div class="saboxplugin-gravatar"> |
| 301 | <img src={ ! profile_image ? avatar : profile_image } height="100" width="100"/> |
| 302 | </div> |
| 303 | |
| 304 | <div class="saboxplugin-authorname"> |
| 305 | <a href="#" class="vcard author" rel="author" itemprop="url"> |
| 306 | <span class="fn" itemprop="name">{ display_name }</span> |
| 307 | </a> |
| 308 | </div> |
| 309 | |
| 310 | <div class="saboxplugin-desc" dangerouslySetInnerHTML={{ __html: description }}></div> |
| 311 | |
| 312 | { sabVars.sab_web == '1' && user_url != '' && ( |
| 313 | <div class="saboxplugin-web"> |
| 314 | <a href="#">{ user_url }</a> |
| 315 | </div> |
| 316 | ) } |
| 317 | |
| 318 | <div class="clearfix"></div> |
| 319 | |
| 320 | { social_links.length == 0 && sabVars.currentUserID == authorID && ( |
| 321 | <a target="_blank" href={ sabVars.adminURL + 'profile.php?#sabox-social-table' } >{ __( 'Add Social Links' ) }</a> |
| 322 | ) } |
| 323 | |
| 324 | { sabVars.sab_hide_socials == 0 && ! jQuery.isEmptyObject( social_links ) && ( |
| 325 | <div class="saboxplugin-socials"> |
| 326 | { Object.keys(social_links).map( (key) => { |
| 327 | return this.renderSocialIcon( social_links[key], key ); |
| 328 | })} |
| 329 | </div> |
| 330 | ) } |
| 331 | |
| 332 | </div> |
| 333 | |
| 334 | <style dangerouslySetInnerHTML={{ __html: this.generateInlineCSS() }} /> |
| 335 | { this.loadCustomFonts() } |
| 336 | |
| 337 | </Fragment> |
| 338 | ]; |
| 339 | } |
| 340 | } |
| 341 |