Pampadu/wp_back
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
00b7dbd0b7
wp_back/wp-content/plugins/wordpress-seo/js/dist/externals/searchMetadataPreviews.js

308 lines
58 KiB
JavaScript
Raw Normal View History

first
2024-05-20 15:37:46 +03:00
window.yoast=window.yoast||{},window.yoast.searchMetadataPreviews=function(e){var t={};function n(i){if(t[i])return t[i].exports;var o=t[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(i,o,function(t){return e[t]}.bind(null,o));return i},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=402)}({0:function(e,t){e.exports=window.yoast.propTypes},1:function(e,t){e.exports=window.wp.element},10:function(e,t){e.exports=window.yoast.helpers},116:function(e,t,n){"use strict";t.__esModule=!0,t.default=t.EXITING=t.ENTERED=t.ENTERING=t.EXITED=t.UNMOUNTED=void 0;var i=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)if(Object.prototype.hasOwnProperty.call(e,n)){var i=Object.defineProperty&&Object.getOwnPropertyDescriptor?Object.getOwnPropertyDescriptor(e,n):{};i.get||i.set?Object.defineProperty(t,n,i):t[n]=e[n]}return t.default=e,t}(n(0)),o=a(n(3)),r=a(n(34)),s=n(72);function a(e){return e&&e.__esModule?e:{default:e}}n(117),t.UNMOUNTED="unmounted",t.EXITED="exited",t.ENTERING="entering",t.ENTERED="entered",t.EXITING="exiting";var l=function(e){var t,n;function i(t,n){var i;i=e.call(this,t,n)||this;var o,r=n.transitionGroup,s=r&&!r.isMounting?t.enter:t.appear;return i.appearStatus=null,t.in?s?(o="exited",i.appearStatus="entering"):o="entered":o=t.unmountOnExit||t.mountOnEnter?"unmounted":"exited",i.state={status:o},i.nextCallback=null,i}n=e,(t=i).prototype=Object.create(n.prototype),t.prototype.constructor=t,t.__proto__=n;var s=i.prototype;return s.getChildContext=function(){return{transitionGroup:null}},i.getDerivedStateFromProps=function(e,t){return e.in&&"unmounted"===t.status?{status:"exited"}:null},s.componentDidMount=function(){this.updateStatus(!0,this.appearStatus)},s.componentDidUpdate=function(e){var t=null;if(e!==this.props){var n=this.state.status;this.props.in?"entering"!==n&&"entered"!==n&&(t="entering"):"entering"!==n&&"entered"!==n||(t="exiting")}this.updateStatus(!1,t)},s.componentWillUnmount=function(){this.cancelNextCallback()},s.getTimeouts=function(){var e,t,n,i=this.props.timeout;return e=t=n=i,null!=i&&"number"!=typeof i&&(e=i.exit,t=i.enter,n=void 0!==i.appear?i.appear:t),{exit:e,enter:t,appear:n}},s.updateStatus=function(e,t){if(void 0===e&&(e=!1),null!==t){this.cancelNextCallback();var n=r.default.findDOMNode(this);"entering"===t?this.performEnter(n,e):this.performExit(n)}else this.props.unmountOnExit&&"exited"===this.state.status&&this.setState({status:"unmounted"})},s.performEnter=function(e,t){var n=this,i=this.props.enter,o=this.context.transitionGroup?this.context.transitionGroup.isMounting:t,r=this.getTimeouts(),s=o?r.appear:r.enter;t||i?(this.props.onEnter(e,o),this.safeSetState({status:"entering"},(function(){n.props.onEntering(e,o),n.onTransitionEnd(e,s,(function(){n.safeSetState({status:"entered"},(function(){n.props.onEntered(e,o)}))}))}))):this.safeSetState({status:"entered"},(function(){n.props.onEntered(e)}))},s.performExit=function(e){var t=this,n=this.props.exit,i=this.getTimeouts();n?(this.props.onExit(e),this.safeSetState({status:"exiting"},(function(){t.props.onExiting(e),t.onTransitionEnd(e,i.exit,(function(){t.safeSetState({status:"exited"},(function(){t.props.onExited(e)}))}))}))):this.safeSetState({status:"exited"},(function(){t.props.onExited(e)}))},s.cancelNextCallback=function(){null!==this.nextCallback&&(this.nextCallback.cancel(),this.nextCallback=null)},s.safeSetState=functio
overflow: auto;
width: ${e=>e.widthValue}px;
padding: 0 ${e=>e.paddingValue}px;
max-width: 100%;
box-sizing: border-box;
`,g=a.a.div`
width: ${e=>e.widthValue}px;
`,f=a.a.div`
text-align: center;
margin: 1em 0 5px;
`,m=a.a.div`
display: inline-block;
box-sizing: border-box;
&:before{
display: inline-block;
margin-right: 10px;
font-size: 20px;
line-height: inherit;
vertical-align: text-top;
content: "\\21c4";
box-sizing: border-box;
}
`;class b extends o.Component{constructor(e){super(e),this.state={showScrollHint:!1},this.setContainerRef=this.setContainerRef.bind(this),this.determineSize=d()(this.determineSize.bind(this),100)}setContainerRef(e){if(!e)return null;this._container=e,this.determineSize(),window.addEventListener("resize",this.determineSize)}determineSize(){const e=this._container.offsetWidth;this.setState({showScrollHint:e<this.props.width})}componentWillUnmount(){window.removeEventListener("resize",this.determineSize)}render(){const{width:e,padding:t,children:n,className:o,id:s}=this.props,a=e-2*t;return Object(i.createElement)(r.a.Fragment,null,Object(i.createElement)(h,{id:s,className:o,widthValue:e,paddingValue:t,ref:this.setContainerRef},Object(i.createElement)(g,{widthValue:a},n)),this.state.showScrollHint&&Object(i.createElement)(f,null,Object(i.createElement)(m,null,Object(u.__)("Scroll to see the preview content.","wordpress-seo"))))}}b.propTypes={id:c.a.string,width:c.a.number.isRequired,padding:c.a.number,children:c.a.node.isRequired,className:c.a.string},b.defaultProps={id:"",padding:0,className:""};var v=n(51),x=n.n(v),E=n(9),y=n(10),w=n(6),O=n(186);const S=a.a.div`
& > :first-child {
overflow: hidden;
transition: height ${e=>e.duration+"ms"} ease-out;
}
`;class j extends r.a.Component{resetHeight(e){e.style.height="0"}setHeight(e){const t=function(e){return Math.max(e.clientHeight,e.offsetHeight,e.scrollHeight)}(e);e.style.height=t+"px"}removeHeight(e){e.style.height=null}render(){return Object(i.createElement)(S,{duration:this.props.duration},Object(i.createElement)(O.CSSTransition,{in:this.props.isOpen,timeout:this.props.duration,classNames:"slide",unmountOnExit:!0,onEnter:this.resetHeight,onEntering:this.setHeight,onEntered:this.removeHeight,onExit:this.setHeight,onExiting:this.resetHeight},this.props.children))}}j.propTypes={isOpen:c.a.bool.isRequired,duration:c.a.number,children:c.a.node},j.defaultProps={duration:300,children:[]};const C=a.a.div`
max-width: 600px;
font-weight: normal;
// Don't apply a bottom margin to avoid "jumpiness".
margin: ${Object(y.getDirectionalStyle)("0 20px 0 25px","0 20px 0 15px")};
`,R=a.a.div`
max-width: ${e=>e.panelMaxWidth};
`,_=a()(E.Button)`
min-width: 14px;
min-height: 14px;
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid transparent;
box-shadow: none;
display: block;
margin: -44px -10px 10px 0;
background-color: transparent;
float: ${Object(y.getDirectionalStyle)("right","left")};
padding: ${Object(y.getDirectionalStyle)("3px 0 0 6px","3px 0 0 5px")};
&:hover {
color: ${w.colors.$color_blue};
}
&:focus {
border: 1px solid ${w.colors.$color_blue};
outline: none;
box-shadow: 0 0 3px ${Object(w.rgba)(w.colors.$color_blue_dark,.8)};
svg {
fill: ${w.colors.$color_blue};
color: ${w.colors.$color_blue};
}
}
&:active {
box-shadow: none;
}
`,M=a()(E.SvgIcon)`
&:hover {
fill: ${w.colors.$color_blue};
}
`;class T extends r.a.Component{constructor(e){super(e),this.state={isExpanded:!1},this.uniqueId=x()("yoast-help-"),this.onButtonClick=this.onButtonClick.bind(this)}onButtonClick(){this.setState(e=>({isExpanded:!e.isExpanded}))}render(){const e=this.uniqueId+"-panel",{isExpanded:t}=this.state;return Object(i.createElement)(C,{className:this.props.className},Object(i.createElement)(_,{className:this.props.className+"__button",onClick:this.onButtonClick,"aria-expanded":t,"aria-controls":t?e:null,"aria-label":this.props.helpTextButtonLabel},Object(i.createElement)(M,{size:"16px",color:w.colors.$color_grey_text,icon:"question-circle"})),Object(i.createElement)(j,{isOpen:t},Object(i.createElement)(R,{id:e,className:this.props.className+"__panel",panelMaxWidth:this.props.panelMaxWidth},Object(i.createElement)(E.HelpText,null,this.props.helpText))))}}T.propTypes={className:c.a.string,helpTextButtonLabel:c.a.string.isRequired,panelMaxWidth:c.a.string,helpText:c.a.oneOfType([c.a.string,c.a.array])},T.defaultProps={className:"yoast-help",panelMaxWidth:null,helpText:""};var P=T,F=n(12),A=n.n(F),k=n(26),D=n.n(k),N=n(187),I=n.n(N),V=n(30),L=n(2);const U=a.a.span`
color: #70757a;
line-height: 1.7;
`;function B(e){const{shoppingData:t}=e,n=Object(u.sprintf)(Object(u.__)("Rating: %s","wordpress-seo"),Object(L.round)(2*t.rating,1)+"/10"),r=Object(u.sprintf)(Object(u.__)("%s reviews","wordpress-seo"),t.reviewCount);
/* Translators: %s expands to the actual rating, e.g. 8/10. */return Object(i.createElement)(U,null,t.reviewCount>0&&Object(i.createElement)(o.Fragment,null,Object(i.createElement)(E.StarRating,{rating:t.rating}),Object(i.createElement)("span",null," ",n," · "),Object(i.createElement)("span",null,r," · ")),t.price&&Object(i.createElement)(o.Fragment,null,Object(i.createElement)("span",{dangerouslySetInnerHTML:{__html:t.price}})),t.availability&&Object(i.createElement)("span",null," · "+Object(L.capitalize)(t.availability)))}var $=B;B.propTypes={shoppingData:c.a.shape({rating:c.a.number,reviewCount:c.a.number,availability:c.a.string,price:c.a.string}).isRequired};const z=a.a.div`
display: flex;
margin-top: -16px;
line-height: 1.6;
`,W=a.a.div`
flex: 1;
max-width: 50%;
`,H=a.a.div`
flex: 1;
max-width: 25%;
`,q=a.a.div`
color: #70757a;
`;function G(e){const{shoppingData:t}=e;return Object(i.createElement)(z,null,t.rating>0&&Object(i.createElement)(W,{className:"yoast-shopping-data-preview__column"},Object(i.createElement)("div",{className:"yoast-shopping-data-preview__upper"},Object(u.__)("Rating","wordpress-seo")),Object(i.createElement)(q,{className:"yoast-shopping-data-preview__lower"},Object(i.createElement)("span",null,Object(L.round)(2*t.rating,1),"/10 "),Object(i.createElement)(E.StarRating,{rating:t.rating}),Object(i.createElement)("span",null," (",t.reviewCount,")"))),t.price&&Object(i.createElement)(H,{className:"yoast-shopping-data-preview__column"},Object(i.createElement)("div",{className:"yoast-shopping-data-preview__upper"},Object(u.__)("Price","wordpress-seo")),Object(i.createElement)(q,{className:"yoast-shopping-data-preview__lower",dangerouslySetInnerHTML:{__html:t.price}})),t.availability&&Object(i.createElement)(H,{className:"yoast-shopping-data-preview__column"},Object(i.createElement)("div",{className:"yoast-shopping-data-preview__upper"},Object(u.__)("Availability","wordpress-seo")),Object(i.createElement)(q,{className:"yoast-shopping-data-preview__lower"},Object(L.capitalize)(t.availability))))}var Q=G;G.propTypes={shoppingData:c.a.shape({rating:c.a.number,reviewCount:c.a.number,availability:c.a.string,price:c.a.string}).isRequired};const K=["desktop","mobile"],{transliterate:X,createRegexFromArray:Y,replaceDiacritics:J}=V.languageProcessing,Z=a()(b)`
background-color: #fff;
font-family: arial, sans-serif;
box-sizing: border-box;
`,ee=a.a.div`
border-bottom: 1px hidden #fff;
border-radius: 8px;
box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
font-family: Arial, Roboto-Regular, HelveticaNeue, sans-serif;
max-width: ${400}px;
box-sizing: border-box;
font-size: 14px;
`,te=a.a.div`
cursor: pointer;
position: relative;
`;function ne(e,t,n){return a()(e)`
&::before {
display: block;
position: absolute;
top: 0;
${Object(y.getDirectionalStyle)("left","right")}: ${()=>"desktop"===n?"-22px":"-40px"};
width: 22px;
height: 22px;
background-image: url( ${Object(y.getDirectionalStyle)(Object(w.angleRight)(t),Object(w.angleLeft)(t))} );
background-size: 24px;
background-repeat: no-repeat;
background-position: center;
content: "";
}
`}const ie=a.a.div`
color: ${e=>"desktop"===e.screenMode?"#1a0dab":"#1558d6"};
text-decoration: none;
font-size: ${e=>(e.screenMode,"20px")};
line-height: ${e=>"desktop"===e.screenMode?"1.3":"26px"};
font-weight: normal;
margin: 0;
display: inline-block;
overflow: hidden;
max-width: ${600}px;
vertical-align: top;
text-overflow: ellipsis;
`,oe=a()(ie)`
max-width: ${600}px;
vertical-align: top;
text-overflow: ellipsis;
`,re=a.a.span`
display: inline-block;
max-width: ${e=>"desktop"===e.screenMode?240:100}px;
overflow: hidden;
vertical-align: top;
text-overflow: ellipsis;
margin-left: 4px;
`,se=a.a.span`
white-space: nowrap;
`,ae=a.a.span`
display: inline-block;
max-height: 52px; // max two lines of text
padding-top: 1px;
vertical-align: top;
overflow: hidden;
text-overflow: ellipsis;
`,le=a.a.div`
display: inline-block;
cursor: pointer;
position: relative;
width: calc( 100% + 7px );
white-space: nowrap;
font-size: 14px;
line-height: 16px;
vertical-align: top;
`;le.displayName="BaseUrl";const ce=a()(le)`
display: flex;
align-items: center;
overflow: hidden;
justify-content: space-between;
text-overflow: ellipsis;
max-width: 100%;
margin-bottom: 12px;
padding-top: 1px;
line-height: 20px;
vertical-align: bottom;
`;ce.displayName="BaseUrlOverflowContainer";const pe=a.a.span`
font-size: ${e=>"desktop"===e.screenMode?"14px":"12px"};
line-height: ${e=>"desktop"===e.screenMode?"1.3":"20px"};
color: ${e=>"desktop"===e.screenMode?"#4d5156":"#3c4043"};
flex-grow: 1;
`,de=a.a.span`
color: ${e=>"desktop"===e.screenMode?"#4d5156":"#70757a"};
`,ue=a.a.div`
width: 28px;
height: 28px;
margin-right: 12px;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
background: #f1f3f4;
min-width: 28px;
`;ce.displayName="SnippetPreview__BaseUrlOverflowContainer";const he=a.a.div`
color: ${e=>(e.isDescriptionPlaceholder,"#4d5156")};
cursor: pointer;
position: relative;
max-width: ${600}px;
padding-top: ${e=>"desktop"===e.screenMode?"0":"1px"};
font-size: 14px;
line-height: 1.58;
`,ge=a.a.div`
color: ${"#3c4043"};
font-size: 14px;
cursor: pointer;
position: relative;
line-height: 1.4;
max-width: ${600}px;
/* Clearing pseudo element to contain the floated image. */
&:after {
display: table;
content: "";
clear: both;
}
`,fe=a.a.div`
float: right;
width: 104px;
height: 104px;
margin: 4px 0 4px 16px;
border-radius: 8px;
overflow: hidden;
`,me=a.a.img`
/* Higher specificity is necessary to make sure inherited CSS rules don't alter the image ratio. */
&&& {
display: block;
width: 104px;
height: 104px;
object-fit: cover;
}
`,be=a.a.div`
padding: 12px 16px;
&:first-child {
margin-bottom: -16px;
}
`,ve=a.a.div`
line-height: 18x;
font-size: 14px;
color: black;
max-width: ${e=>"desktop"===e.screenMode?"100%":"300px"};
overflow: hidden;
`,xe=a.a.div`
`,Ee=a.a.span`
display: inline-block;
height: 18px;
line-height: 18px;
padding-left: 8px;
vertical-align:bottom;
`,ye=a.a.span`
color: ${e=>"desktop"===e.screenMode?"#777":"#70757a"};
`,we=a.a.img`
width: 18px;
height: 18px;
margin: 0 5px;
vertical-align: middle;
`,Oe=a.a.div`
background-size: 100% 100%;
display: inline-block;
height: 12px;
width: 12px;
margin-bottom: -1px;
opacity: 0.46;
margin-right: 6px;
background-image: url( ${"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAABr0lEQVR4AbWWJYCUURhFD04Zi7hrLzgFd4nzV9x6wKHinmYb7g4zq71gIw2LWBnZ3Q8df/fh96Tn/t2HVIw4CVKk+fSFNCkSxInxW1pFkhLmoMRjVvFLmkEX5ocuZuBVPw5jv8hh+iEU5QEmuMK+prz7RN3dPMMEGQYzxpH/lGjzou5jgl7mAvOdZfcbF+jbm3MAbFZ7VX9SJnlL1D8UMyjLe+BrAYDb+jJUr59JrlNWRtcqX9GkrPCR4QBAf4qYJAkQoyQrbKKs8RiaEjEI0GvvQ1mLMC9xaBFFBaZS1TbMSwJSomg39erDF+TxpCCNOXjGQJTCvG6qn4ZPzkcxA61Tjhaf4KMj+6Q3XvW6Lopraa8IozRQxIi0a7NXorULc5JyHX/3F3q+0PsFYytVTaGgjz/AvCyiegE69IUsPxHNBMpa738i6tGWlzkAABjKe/+j9YeRHGVd9oWRnwe2ewDASp/L/UqoPQ5AmFeYZMavBP8dAJz0GWWDHQlzXApMdz4KYUfKICcxkKeOfGmQyrIPcgE9m+g/+kT812/Nr3+0kqzitxQjoKXh6xfor99nlEdFjyvH15gAAAAASUVORK5CYII="} );
`,Se=e=>{try{return decodeURI(e)}catch(t){return e}},je=e=>{let{screenMode:t}=e;return Object(i.createElement)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"desktop"===t?"#4d5156":"#70757a",style:{width:"18px"}},Object(i.createElement)("path",{d:"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"}))};je.propTypes={screenMode:c.a.string.isRequired};class Ce extends o.PureComponent{constructor(e){super(e),this.state={title:e.title,description:e.description,isDescriptionPlaceholder:!0},this.setTitleRef=this.setTitleRef.bind(this),this.setDescriptionRef=this.setDescriptionRef.bind(this)}setTitleRef(e){this._titleElement=e}setDescriptionRef(e){this._descriptionElement=e}hasOverflowedContent(e){return Math.abs(e.clientHeight-e.scrollHeight)>=2}fitTitle(){const e=this._titleElement;if(this.hasOverflowedContent(e)){let t=this.state.title;const n=e.clientWidth/3;t.length>n&&(t=t.substring(0,n));const i=this.dropLastWord(t);this.setState({title:i})}}dropLastWord(e){const t=e.split(" ");return t.pop(),t.join(" ")}getTitle(){return this.props.title!==this.state.title?this.state.title+" ...":this.props.title}getDescription(){return this.props.description?I()(this.props.description,{length:156,separator:" ",omission:" ..."}):Object(u.__)("Please provide a meta description by editing the snippet below. If you don’t, Google will try to find a relevant part of your post to show in the search results.","wordpress-seo")}renderDate(){const e="desktop"===this.props.mode?"—":"－";return this.props.date&&Object(i.createElement)(ye,{screenMode:this.props.mode},this.props.date," ",e," ")}addCaretStyles(e,t){const{mode:n,hoveredField:i,activeField:o}=this.props;return o===e?ne(t,w.colors.$color_snippet_active,n):i===e?ne(t,w.colors.$color_snippet_hover,n):t}getBreadcrumbs(e){const{breadcrumbs:t}=this.props;let n;try{n=new URL(e)}catch(t){return{hostname:e,breadcrumbs:""}}const i=Se(n.hostname);let o=t||n.pathname.split("/");return o=o.filter(e=>Boolean(e)).map(e=>Se(e)),{hostname:i,breadcrumbs:" › "+o.join(" › ")}}renderUrl(){const{url:e,onMouseUp:t,onMouseEnter:n,onMouseLeave:o,mode:s,faviconSrc:a,siteName:l}=this.props,c="mobile"===s,{hostname:p,breadcrumbs:d}=this.getBreadcrumbs(e),h=this.addCaretStyles("url",le);return Object(i.createElement)(r.a.Fragment,null,Object(i.createElement)(E.ScreenReaderText,null,Object(u.__)("Url preview","wordpress-seo")+":"),Object(i.createElement)(h,null,Object(i.createElement)(ce,{onMouseUp:t.bind(null,"url"),onMouseEnter:n.bind(null,"url"),onMouseLeave:o.bind(null),screenMode:s},Object(i.createElement)(ue,null,Object(i.createElement)(we,{src:a||"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABs0lEQVR4AWL4//8/RRjO8Iucx+noO0MWUDo16FYABMGP6ZfUcRnWtm27jVPbtm3bttuH2t3eFPcY9pLz7NxiLjCyVd87pKnHyqXyxtCs8APd0rnyxiu4qSeA3QEDrAwBDrT1s1Rc/OrjLZwqVmOSu6+Lamcpp2KKMA9PH1BYXMe1mUP5qotvXTywsOEEYHXxrY+3cqk6TMkYpNr2FeoY3KIr0RPtn9wQ2unlA+GMkRw6+9TFw4YTwDUzx/JVvARj9KaedXRO8P5B1Du2S32smzqUrcKGEyA+uAgQjKX7zf0boWHGfn71jIKj2689gxp7OAGShNcBUmLMPVjZuiKcA2vuWHHDCQxMCz629kXAIU4ApY15QwggAFbfOP9DhgBJ+nWVJ1AZAfICAj1pAlY6hCADZnveQf7bQIwzVONGJonhLIlS9gr5mFg44Xd+4S3XHoGNPdJl1INIwKyEgHckEhgTe1bGiFY9GSFBYUwLh1IkiJUbY407E7syBSFxKTszEoiE/YdrgCEayDmtaJwCI9uu8TKMuZSVfSa4BpGgzvomBR/INhLGzrqDotp01ZR8pn/1L0JN9d9XNyx0AAAAAElFTkSuQmCC",alt:""})),Object(i.createElement)(pe,{screenMode:s},Object(i.createElement)(ve,{screenMode:s},l),Object(i.createElement)(de,{screenMode:s},p),Object(i.createElement)(re,{screenMode:s},d),!c&&Object(i.createElement)(Ee,null,Object(i.createElement)(je,{screenMode:s}))),c&&Object(i.createElement)(je,{screenMode:s}))))}componentWillReceiveProps(e){const t={};this.props.title!==e.title&&(t.title=e.title),this.props.description!==e.description&&(t.description=e.description),this.setState(t)}componentDidUpdate(){this.setState({isDescriptionPlaceholder:!this.props.description}),"mobile"===this.props.mode&&(clearTimeout(this.fitTitleTimeout),this.fitTitleTimeout=setTimeout(()=>{this.f
border: none;
width: 100%;
height: inherit;
line-height: 1.71428571; // 24px based on 14px font-size
font-family: inherit;
font-size: inherit;
color: inherit;
&:focus {
outline: 0;
}
`,Fe=Object(w.withCaretStyles)(E.VariableEditorInputContainer);class Ae extends r.a.Component{constructor(e){super(e),this.elements={title:null,slug:null,description:null},this.uniqueId=x()("snippet-editor-field-"),this.setRef=this.setRef.bind(this),this.setTitleRef=this.setTitleRef.bind(this),this.setSlugRef=this.setSlugRef.bind(this),this.setDescriptionRef=this.setDescriptionRef.bind(this),this.triggerReplacementVariableSuggestions=this.triggerReplacementVariableSuggestions.bind(this),this.onFocusTitle=this.onFocusTitle.bind(this),this.onChangeTitle=this.onChangeTitle.bind(this),this.onFocusSlug=this.onFocusSlug.bind(this),this.focusSlug=this.focusSlug.bind(this),this.onChangeSlug=this.onChangeSlug.bind(this),this.onFocusDescription=this.onFocusDescription.bind(this),this.onChangeDescription=this.onChangeDescription.bind(this)}setRef(e,t){this.elements[e]=t}setTitleRef(e){this.setRef("title",e)}setSlugRef(e){this.setRef("slug",e)}setDescriptionRef(e){this.setRef("description",e)}componentDidUpdate(e){e.activeField!==this.props.activeField&&this.focusOnActiveFieldChange()}focusOnActiveFieldChange(){const{activeField:e}=this.props,t=e?this.elements[e]:null;t&&t.focus()}triggerReplacementVariableSuggestions(e){this.elements[e].triggerReplacementVariableSuggestions()}onFocusTitle(){this.props.onFocus("title")}onChangeTitle(e){this.props.onChange("title",e)}onFocusSlug(){this.props.onFocus("slug")}focusSlug(){this.elements.slug.focus()}onChangeSlug(e){this.props.onChange("slug",e.target.value)}onFocusDescription(){this.props.onFocus("description")}onChangeDescription(e){this.props.onChange("description",e)}render(){const{activeField:e,hoveredField:t,onReplacementVariableSearchChange:n,replacementVariables:o,recommendedReplacementVariables:r,titleLengthProgress:s,descriptionLengthProgress:a,onBlur:l,descriptionEditorFieldPlaceholder:c,data:{title:p,slug:d,description:h},containerPadding:g,titleInputId:f,slugInputId:m,descriptionInputId:b}=this.props,v=this.uniqueId+"-slug";return Object(i.createElement)(Re.StyledEditor,{padding:g},Object(i.createElement)(Re.ReplacementVariableEditor,{withCaret:!0,label:Object(u.__)("SEO title","wordpress-seo"),onFocus:this.onFocusTitle,onBlur:l,isActive:"title"===e,isHovered:"title"===t,editorRef:this.setTitleRef,replacementVariables:o,recommendedReplacementVariables:r,content:p,onChange:this.onChangeTitle,onSearchChange:n,fieldId:f,type:"title"}),Object(i.createElement)(E.ProgressBar,{max:s.max,value:s.actual,progressColor:this.getProgressColor(s.score)}),Object(i.createElement)(E.SimulatedLabel,{id:v,onClick:this.onFocusSlug},Object(u.__)("Slug","wordpress-seo")),Object(i.createElement)(Fe,{onClick:this.focusSlug,isActive:"slug"===e,isHovered:"slug"===t},Object(i.createElement)(Pe,{value:d,onChange:this.onChangeSlug,onFocus:this.onFocusSlug,onBlur:l,ref:this.setSlugRef,"aria-labelledby":this.uniqueId+"-slug",id:m})),Object(i.createElement)(Re.ReplacementVariableEditor,{withCaret:!0,type:"description",placeholder:c,label:Object(u.__)("Meta description","wordpress-seo"),onFocus:this.onFocusDescription,onBlur:l,isActive:"description"===e,isHovered:"description"===t,editorRef:this.setDescriptionRef,replacementVariables:o,recommendedReplacementVariables:r,content:h,onChange:this.onChangeDescription,onSearchChange:n,fieldId:b}),Object(i.createElement)(E.ProgressBar,{max:a.max,value:a.actual,progressColor:this.getProgressColor(a.score)}))}getProgressColor(e){return e>=7?w.colors.$color_good:e>=5?w.colors.$color_ok:w.colors.$color_bad}}Ae.propTypes={replacementVariables:Re.replacementVariablesShape,recommendedReplacementVariables:Re.recommendedReplacementVariablesShape,onChange:c.a.func.isRequired,onFocus:c.a.func,onBlur:c.a.func,onReplacementVariableSearchChange:c.a.func,data:c.a.shape({title:c.a.string.isRequired,slug:c.a.string.isRequired,description:c.a.string.isRequired}).isRequired,activeField:c.a.oneOf(["title","slug","description"]),hoveredField:c.a.oneOf(["title","slug","description"]),titleLengthProgress:Te,descriptionLengthProgress:Te,descriptionEditorFieldPlaceholder:c.a.string,contai
border: 0;
padding: 0;
margin: 0 0 16px;
`,Ne=a.a.legend`
margin: 8px 0;
padding: 0;
color: ${w.colors.$color_headings};
font-size: 14px;
font-weight: 600;
`,Ie=a()(E.Label)`
${Object(y.getDirectionalStyle)("margin-right: 16px","margin-left: 16px")};
color: inherit;
font-size: 14px;
line-height: 1.71428571;
cursor: pointer;
/* Helps RTL in Chrome */
display: inline-block;
`,Ve=a()(E.Input)`
&& {
${Object(y.getDirectionalStyle)("margin: 0 8px 0 0","margin: 0 0 0 8px")};
cursor: pointer;
}
`;class Le extends o.Component{constructor(e){super(e),this.switchToMobile=this.props.onChange.bind(this,"mobile"),this.switchToDesktop=this.props.onChange.bind(this,"desktop")}render(){const{active:e,mobileModeInputId:t,desktopModeInputId:n}=this.props,o=t.length>0?t:"yoast-google-preview-mode-mobile",r=n.length>0?n:"yoast-google-preview-mode-desktop";return Object(i.createElement)(De,null,Object(i.createElement)(Ne,null,Object(u.__)("Preview as:","wordpress-seo")),Object(i.createElement)(Ve,{onChange:this.switchToMobile,type:"radio",name:"screen",value:"mobile",optionalAttributes:{id:o,checked:"mobile"===e}}),Object(i.createElement)(Ie,{for:o},Object(u.__)("Mobile result","wordpress-seo")),Object(i.createElement)(Ve,{onChange:this.switchToDesktop,type:"radio",name:"screen",value:"desktop",optionalAttributes:{id:r,checked:"desktop"===e}}),Object(i.createElement)(Ie,{for:r},Object(u.__)("Desktop result","wordpress-seo")))}}Le.propTypes={onChange:c.a.func.isRequired,active:c.a.oneOf(K),mobileModeInputId:c.a.string,desktopModeInputId:c.a.string},Le.defaultProps={active:"mobile",mobileModeInputId:"",desktopModeInputId:""};var Ue=Le;const Be=a()(E.Button)`
height: 33px;
border: 1px solid #dbdbdb;
box-shadow: none;
font-family: Arial, Roboto-Regular, HelveticaNeue, sans-serif;
`,$e=a()(Be)`
margin: ${Object(y.getDirectionalStyle)("10px 0 0 4px","10px 4px 0 0")};
fill: ${w.colors.$color_grey_dark};
padding-left: 8px;
& svg {
${Object(y.getDirectionalStyle)("margin-right","margin-left")}: 7px;
}
`,ze=a()(Be)`
margin-top: 24px;
`,We=new RegExp("(%%sep%%|%%sitename%%)","g");class He extends r.a.Component{constructor(e){super(e);const t=this.mapDataToMeasurements(e.data);this.state={isOpen:!e.showCloseButton,activeField:null,hoveredField:null,titleLengthProgress:_e(t.filteredSEOTitle),descriptionLengthProgress:Me(t.description,this.props.date,this.props.isCornerstone,this.props.isTaxonomy,this.props.locale)},this.setFieldFocus=this.setFieldFocus.bind(this),this.unsetFieldFocus=this.unsetFieldFocus.bind(this),this.onChangeMode=this.onChangeMode.bind(this),this.onMouseUp=this.onMouseUp.bind(this),this.onMouseEnter=this.onMouseEnter.bind(this),this.onMouseLeave=this.onMouseLeave.bind(this),this.open=this.open.bind(this),this.close=this.close.bind(this),this.setEditButtonRef=this.setEditButtonRef.bind(this),this.handleChange=this.handleChange.bind(this),this.haveReplaceVarsChanged=this.haveReplaceVarsChanged.bind(this)}shallowCompareData(e,t){let n=!1;return e.data.description===t.data.description&&e.data.slug===t.data.slug&&e.data.title===t.data.title&&e.isCornerstone===t.isCornerstone&&e.isTaxonomy===t.isTaxonomy&&e.locale===t.locale||(n=!0),this.haveReplaceVarsChanged(e.replacementVariables,t.replacementVariables)&&(n=!0),n}haveReplaceVarsChanged(e,t){return JSON.stringify(e)!==JSON.stringify(t)}componentWillReceiveProps(e){if(this.shallowCompareData(this.props,e)){const t=this.mapDataToMeasurements(e.data,e.replacementVariables);this.setState({titleLengthProgress:_e(t.filteredSEOTitle),descriptionLengthProgress:Me(t.description,e.date,e.isCornerstone,e.isTaxonomy,e.locale)}),this.props.onChangeAnalysisData(t)}}handleChange(e,t){this.props.onChange(e,t);const n=this.mapDataToMeasurements({...this.props.data,[e]:t});this.props.onChangeAnalysisData(n)}renderEditor(){const{data:e,descriptionEditorFieldPlaceholder:t,onReplacementVariableSearchChange:n,replacementVariables:o,recommendedReplacementVariables:s,hasPaperStyle:a,showCloseButton:l,idSuffix:c}=this.props,{activeField:p,hoveredField:d,isOpen:h,titleLengthProgress:g,descriptionLengthProgress:f}=this.state;return h?Object(i.createElement)(r.a.Fragment,null,Object(i.createElement)(ke,{data:e,activeField:p,hoveredField:d,onChange:this.handleChange,onFocus:this.setFieldFocus,onBlur:this.unsetFieldFocus,onReplacementVariableSearchChange:n,replacementVariables:o,recommendedReplacementVariables:s,titleLengthProgress:g,descriptionLengthProgress:f,descriptionEditorFieldPlaceholder:t,containerPadding:a?"0 20px":"0",titleInputId:Object(y.join)(["yoast-google-preview-title",c]),slugInputId:Object(y.join)(["yoast-google-preview-slug",c]),descriptionInputId:Object(y.join)(["yoast-google-preview-description",c])}),l&&Object(i.createElement)(ze,{onClick:this.close},Object(u.__)("Close snippet editor","wordpress-seo"))):null}setFieldFocus(e){e=this.mapFieldToEditor(e),this.setState({activeField:e})}unsetFieldFocus(){this.setState({activeField:null})}onChangeMode(e){this.props.onChange("mode",e)}onMouseUp(e){this.state.isOpen?this.setFieldFocus(e):this.open().then(this.setFieldFocus.bind(this,e))}onMouseEnter(e){this.setState({hoveredField:this.mapFieldToEditor(e)})}onMouseLeave(){this.setState({hoveredField:null})}open(){return new Promise(e=>{this.setState({isOpen:!0},e)})}close(){this.setState({isOpen:!1,activeField:null},()=>{this._editButton.focus()})}processReplacementVariables(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:this.props.replacementVariables;if(this.props.applyReplacementVariables)return this.props.applyReplacementVariables(e);for(const{name:n,value:i}of t)e=e.replace(new RegExp("%%"+Object(L.escapeRegExp)(n)+"%%","g"),i);return e}mapDataToMeasurements(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:this.props.replacementVariables;const{baseUrl:n,mapEditorDataToPreview:i}=this.props;let o=this.processReplacementVariables(e.description,t);o=V.languageProcessing.stripSpaces(o);const r=n.replace(/^https?:\/\//i,""),s=e.title.replace(We,""),a={title:this.processReplacementVariables(e.title,t),url:n+e.slug,description:o,filteredSEOTitle:this.processReplacementVari
Reference in New Issue Copy Permalink