SHARE
TWEET

Untitled

a guest Sep 12th, 2019 101 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. const { Component, Fragment } = wp.element
  2. const { RichText } = wp.editor
  3. const { HelperFunction: { animationAttr } } = wp.qubelyComponents
  4. class Save extends Component {
  5.   renderAvatar = (avatar, avatarAlt) => {
  6.     return (
  7.       <div className="qubely-single-img">
  8.         {avatar.url != undefined ?
  9.           <img className="qubely-team-avatar" src={avatar.url} alt={avatarAlt} />
  10.           :
  11.           <div className="qubely-image-placeholder qubely-team-avatar"><i className="far fa-user"></i></div>
  12.         }
  13.       </div>
  14.     )
  15.   }
  16.  
  17.   renderSocialShare = () => {
  18.         const { attributes: {
  19.             showSociallinks,
  20.             facebook,
  21.             twitter,
  22.             instagram,
  23.             linkedin,
  24.             youtube,
  25.             github,
  26.             flickr,
  27.             pinterest,
  28.             dribbble,
  29.             behance,
  30.         } } = this.props
  31.         return (
  32.             <div className="social-share">
  33.                 {showSociallinks && (facebook || twitter || instagram || linkedin || youtube || github || flickr || pinterest || dribbble || behance) &&
  34.                     <div className={`qubely-team-social-links`} onClick={() => this.handlePanelOpenings('Social')}>
  35.                         {facebook &&
  36.                             <a className="qubely-team-social-facebook"><i className="fab fa-facebook" /></a>
  37.                         }
  38.                         {twitter &&
  39.                             <a className="qubely-team-social-twitter"><i className="fab fa-twitter" /></a>
  40.                         }
  41.                         {instagram &&
  42.                             <a className="qubely-team-social-instagram"><i className="fab fa-instagram" /></a>
  43.                         }
  44.                         {linkedin &&
  45.                             <a className="qubely-team-social-linkedin"><i className="fab fa-linkedin" /></a>
  46.                         }
  47.                         {youtube &&
  48.                             <a className="qubely-team-social-youtube"><i className="fab fa-youtube" /></a>
  49.                         }
  50.                         {github &&
  51.                             <a className="qubely-team-social-github"><i className="fab fa-github" /></a>
  52.                         }
  53.                         {flickr &&
  54.                             <a className="qubely-team-social-flickr"><i className="fab fa-flickr" /></a>
  55.                         }
  56.                         {pinterest &&
  57.                             <a className="qubely-team-social-pinterest"><i className="fab fa-pinterest" /></a>
  58.                         }
  59.                         {dribbble &&
  60.                             <a className="qubely-team-social-dribbble"><i className="fab fa-dribbble" /></a>
  61.                         }
  62.                         {behance &&
  63.                             <a className="qubely-team-social-behance"><i className="fab fa-behance" /></a>
  64.                         }
  65.                     </div>
  66.                 }
  67.             </div>
  68.         )
  69.     }
  70.  
  71.  
  72.  
  73.  
  74.   renderAuthorInfo = (item) => {
  75.     const { attributes: { layout } } = this.props
  76.     const { author, designation, avatar } = item
  77.  
  78.     return (
  79.       <div className={`qubely-team-author`}>
  80.           { /* Layout 1 */
  81.             (layout == 1) &&
  82.             <div className={`qubely-team-${layout}`}>
  83.               {this.renderAvatar(avatar)}
  84.               <div className="qubely-team-author-info">
  85.                   <div className="qubely-team-author-name"><RichText.Content value={author} /></div>
  86.                   <div className="qubely-team-author-designation"><RichText.Content value={designation} /></div>
  87.                   {this.renderSocialShare()}
  88.               </div>
  89.             </div>
  90.           }
  91.       </div>
  92.     )
  93.   }
  94.   renderTeam() {
  95.     const { attributes: { carouselItems } } = this.props
  96.     return (carouselItems.map((item, index) => {
  97.       return (
  98.         <div key={index} className={`qubely-carousel-extended-item${index === 0 ? ' active' : ''}`} >
  99.           <div className={`qubely-team-carousel-item`}>
  100.             { this.renderAuthorInfo(item)}
  101.           </div>
  102.         </div>
  103.       )
  104.     }))
  105.   }
  106.  
  107.   render() {
  108.     const { attributes: { uniqueId, items, autoPlay, arrowStyle, infiniteLoop, activeFade, isCentered, dragable, nav, dots, dotIndicator, interval, speed, animation } } = this.props
  109.     let options = JSON.stringify({
  110.       autoplay: autoPlay,
  111.       items: items,
  112.       margin: 10,
  113.       center: isCentered,
  114.       dots: dots,
  115.       dot_indicator: dotIndicator,
  116.       nav: nav,
  117.       speed: speed,
  118.       interval: interval,
  119.       dragable: dragable,
  120.       infiniteLoop: infiniteLoop,
  121.       activeFade: activeFade,
  122.       arrowStyle: arrowStyle,
  123.       responsive: [
  124.         {
  125.           viewport: 1170,
  126.           items: items.md
  127.         },
  128.         {
  129.           viewport: 980,
  130.           items: items.sm
  131.         },
  132.         {
  133.           viewport: 580,
  134.           items: items.xs
  135.         }
  136.       ],
  137.     }
  138.     )
  139.     return (
  140.       <div className={`qubely-block-${uniqueId}`} {...animationAttr(animation)}>
  141.         <div className={`qubely-block-team-carousel qubely-layout-style`}>
  142.           <div className={`qubely-carousel qubely-carousel-wrapper${isCentered && activeFade ? ' is-faded' : ''}`} data-options={options} id="qubelyCarousel1" >
  143.             {this.renderTeam()}
  144.           </div>
  145.         </div>
  146.       </div>
  147.     )
  148.   }
  149. }
  150.  
  151. export default Save
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top