| 1 |
const { __ } = wp.i18n; // Import __() from wp.i18n |
| 2 |
const { Component } = wp.element; |
| 3 |
|
| 4 |
var el = wp.element.createElement, |
| 5 |
registerBlockType = wp.blocks.registerBlockType, |
| 6 |
TextControl = wp.components.TextControl, |
| 7 |
SelectControl = wp.components.SelectControl, |
| 8 |
ColorPalette = wp.components.ColorPalette, |
| 9 |
NumberControl = wp.components.__experimentalNumberControl, |
| 10 |
InspectorControls = wp.editor.InspectorControls, |
| 11 |
blockStyle = { fontFamily:'Roboto', backgroundColor: '#900', color: '#fff', padding: '20px' }; |
| 12 |
|
| 13 |
const iconEl = el('svg', { width: 20, height: 20 }, |
| 14 |
el('path', { d: "M16.1,16.6h-2.5c-1,0-1.9-0.6-2.4-1.5L11,14.5c-0.2-0.4-0.5-0.6-0.9-0.6c-0.4,0-0.8,0.2-0.9,0.6l-0.3,0.6 c-0.4,0.9-1.3,1.5-2.4,1.5H3.9c-2.2,0-3.9-1.8-3.9-3.9V7.3c0-2.2,1.8-3.9,3.9-3.9h12.2c2.2,0,3.9,1.8,3.9,3.9v1.5 c0,0.4-0.3,0.8-0.8,0.8c-0.4,0-0.8-0.3-0.8-0.8V7.3c0-1.3-1.1-2.3-2.3-2.3H3.9C2.6,4.9,1.6,6,1.6,7.3v5.4c0,1.3,1.1,2.3,2.3,2.3 h2.6c0.4,0,0.8-0.2,0.9-0.6l0.3-0.6c0.4-0.9,1.3-1.5,2.4-1.5c1,0,1.9,0.6,2.4,1.5l0.3,0.6c0.2,0.4,0.5,0.6,0.9,0.6h2.5 c1.3,0,2.3-1.1,2.3-2.3c0-0.4,0.3-0.8,0.8-0.8c0.4,0,0.8,0.3,0.8,0.8C20,14.9,18.2,16.6,16.1,16.6L16.1,16.6z M16.7,9.4 c0-1.3-1.1-2.3-2.3-2.3C13,7.1,12,8.1,12,9.4s1.1,2.3,2.3,2.3C15.6,11.7,16.7,10.7,16.7,9.4L16.7,9.4z M15.1,9.4 c0,0.4-0.4,0.8-0.8,0.8c-0.4,0-0.8-0.4-0.8-0.8s0.4-0.8,0.8-0.8C14.8,8.6,15.1,9,15.1,9.4L15.1,9.4z M8,9.4C8,8.1,7,7.1,5.7,7.1 S3.3,8.1,3.3,9.4s1.1,2.3,2.3,2.3S8,10.7,8,9.4L8,9.4z M6.4,9.4c0,0.4-0.4,0.8-0.8,0.8c-0.4,0-0.8-0.4-0.8-0.8s0.4-0.8,0.8-0.8 C6.1,8.6,6.4,9,6.4,9.4L6.4,9.4z M6.4,9.4" } ) |
| 15 |
); |
| 16 |
class wpvredit extends Component { |
| 17 |
|
| 18 |
constructor() { |
| 19 |
super( ...arguments ); |
| 20 |
|
| 21 |
this.state = { |
| 22 |
fullwidth: '', |
| 23 |
data: [{value: "0", label: "None"}], |
| 24 |
border_style_option: [ |
| 25 |
{value: "none", label: "none"}, |
| 26 |
{value: "solid", label: "Solid"}, |
| 27 |
{value: "dotted", label: "Dotted"}, |
| 28 |
{value: "dashed", label: "Dashed"}, |
| 29 |
{value: "double", label: "Double"}, |
| 30 |
], |
| 31 |
colors : [ |
| 32 |
{ name: 'red', color: '#f00' }, |
| 33 |
{ name: 'white', color: '#fff' }, |
| 34 |
{ name: 'blue', color: '#00f' }, |
| 35 |
], |
| 36 |
width_unit: [ |
| 37 |
{value: "px", label: "px"}, |
| 38 |
{value: "%", label: "%"}, |
| 39 |
{value: "vw", label: "vw"}, |
| 40 |
{value: "fullwidth", label: "Fullwidth"}, |
| 41 |
], |
| 42 |
height_unit_option: [ |
| 43 |
{value: "px", label: "px"}, |
| 44 |
{value: "vh", label: "vh"}, |
| 45 |
], |
| 46 |
radius_unit_option: [ |
| 47 |
{value: "px", label: "px"}, |
| 48 |
], |
| 49 |
mobile_height_unit_option: [ |
| 50 |
{value: "px", label: "px"}, |
| 51 |
], |
| 52 |
}; |
| 53 |
} |
| 54 |
|
| 55 |
componentDidMount() { |
| 56 |
wp.apiFetch( { path : 'wpvr/v1/panodata' } ).then( data => { |
| 57 |
this.setState({data: data}); |
| 58 |
} ); |
| 59 |
} |
| 60 |
|
| 61 |
render() { |
| 62 |
|
| 63 |
return [ |
| 64 |
|
| 65 |
el( InspectorControls, {}, |
| 66 |
el( SelectControl, { |
| 67 |
className : 'wpvr-base-control', |
| 68 |
label: 'Id', |
| 69 |
value: this.props.attributes.id, |
| 70 |
|
| 71 |
onChange: ( value ) => { |
| 72 |
this.props.setAttributes( { id: value } ); |
| 73 |
}, |
| 74 |
options: this.state.data, |
| 75 |
} ) |
| 76 |
), |
| 77 |
|
| 78 |
el( InspectorControls, {}, |
| 79 |
el( TextControl, { |
| 80 |
className : 'wpvr-base-control wpvr-width-base-control', |
| 81 |
label: 'Width', |
| 82 |
value: this.props.attributes.width, |
| 83 |
onChange: ( value ) => { this.props.setAttributes( { width: value } ) }, |
| 84 |
} ) |
| 85 |
), |
| 86 |
el( InspectorControls, {}, |
| 87 |
el( SelectControl, { |
| 88 |
className : 'wpvr-base-control wpvr-width-unit-control', |
| 89 |
label: ' ', |
| 90 |
value: this.props.attributes.width_unit, |
| 91 |
onChange: ( value ) => { |
| 92 |
this.props.setAttributes( { width_unit: value } ) |
| 93 |
if(value == 'fullwidth'){ |
| 94 |
this.props.setAttributes( { width: value } ) |
| 95 |
this.props.setAttributes( { width_unit: '' } ) |
| 96 |
} |
| 97 |
}, |
| 98 |
options: this.state.width_unit, |
| 99 |
} ) |
| 100 |
), |
| 101 |
|
| 102 |
el( InspectorControls, {}, |
| 103 |
el( NumberControl, { |
| 104 |
className : 'wpvr-base-control wpvr-height-base-control', |
| 105 |
label: 'Height', |
| 106 |
value: this.props.attributes.height, |
| 107 |
onChange: ( value ) => { this.props.setAttributes( { height: value } ); }, |
| 108 |
} ) |
| 109 |
), |
| 110 |
el( InspectorControls, {}, |
| 111 |
el( SelectControl, { |
| 112 |
className : 'wpvr-base-control wpvr-height-unit-control', |
| 113 |
label: ' ', |
| 114 |
value: this.props.attributes.height_unit, |
| 115 |
|
| 116 |
onChange: ( value ) => { |
| 117 |
this.props.setAttributes( { height_unit: value } ); |
| 118 |
}, |
| 119 |
options: this.state.height_unit_option, |
| 120 |
} ) |
| 121 |
), |
| 122 |
el( InspectorControls, {}, |
| 123 |
el( NumberControl, { |
| 124 |
className : 'wpvr-base-control wpvr-radius-base-control', |
| 125 |
label: 'Radius', |
| 126 |
value: this.props.attributes.radius, |
| 127 |
onChange: ( value ) => { this.props.setAttributes( { radius: value } ); }, |
| 128 |
} ) |
| 129 |
), |
| 130 |
|
| 131 |
|
| 132 |
el( InspectorControls, {}, |
| 133 |
el( SelectControl, { |
| 134 |
className : 'wpvr-base-control wpvr-radius-unit-control', |
| 135 |
label: ' ', |
| 136 |
value: this.props.attributes.radius_unit, |
| 137 |
|
| 138 |
onChange: ( value ) => { |
| 139 |
this.props.setAttributes( { radius_unit: value } ); |
| 140 |
}, |
| 141 |
options: this.state.radius_unit_option, |
| 142 |
} ) |
| 143 |
), |
| 144 |
el( InspectorControls, {}, |
| 145 |
el( NumberControl, { |
| 146 |
className : 'wpvr-base-control wpvr-mobile-height-base-control', |
| 147 |
label: 'Mobile Height', |
| 148 |
value: this.props.attributes.mobile_height, |
| 149 |
onChange: ( value ) => { this.props.setAttributes( { mobile_height: value } ); }, |
| 150 |
} ) |
| 151 |
), |
| 152 |
el( InspectorControls, {}, |
| 153 |
el( SelectControl, { |
| 154 |
className : 'wpvr-base-control wpvr-mobile-height-unit-control', |
| 155 |
label: ' ', |
| 156 |
value: this.props.attributes.mobile_height_unit, |
| 157 |
|
| 158 |
onChange: ( value ) => { |
| 159 |
this.props.setAttributes( { mobile_height_unit: value } ); |
| 160 |
}, |
| 161 |
options: this.state.mobile_height_unit_option, |
| 162 |
} ) |
| 163 |
), |
| 164 |
el( InspectorControls, {}, |
| 165 |
el( TextControl, { |
| 166 |
className : 'wpvr-base-control wpvr-border-width-base-control', |
| 167 |
label: 'Border Width', |
| 168 |
value: this.props.attributes.border_width, |
| 169 |
onChange: ( value ) => { this.props.setAttributes( { border_width: value } ); }, |
| 170 |
} ) |
| 171 |
), |
| 172 |
|
| 173 |
el( InspectorControls, {}, |
| 174 |
el( SelectControl, { |
| 175 |
className : 'wpvr-base-control wpvr-border-style-base-control', |
| 176 |
label: 'Border Style', |
| 177 |
value: this.props.attributes.border_style, |
| 178 |
|
| 179 |
onChange: ( value ) => { |
| 180 |
this.props.setAttributes( { border_style: value } ); |
| 181 |
}, |
| 182 |
options: this.state.border_style_option, |
| 183 |
} ) |
| 184 |
), |
| 185 |
el( InspectorControls, {}, |
| 186 |
el( ColorPalette, { |
| 187 |
className : 'wpvr-base-control wpvr-border-color-base-control', |
| 188 |
label: 'Border Color', |
| 189 |
colors : this.state.colors, |
| 190 |
value : this.props.attributes.border_color, |
| 191 |
onChange: ( value ) => { this.props.setAttributes( { border_color: value } ); }, |
| 192 |
} ) |
| 193 |
), |
| 194 |
|
| 195 |
|
| 196 |
|
| 197 |
<p className="wpvr-block-content"> |
| 198 |
WPVR id={this.props.attributes.id}, Width={this.props.attributes.width}{this.props.attributes.width_unit}, Height={this.props.attributes.height}{this.props.attributes.height_unit}, Mobile Height={this.props.attributes.mobile_height}{this.props.attributes.mobile_height_unit}, Radius={this.props.attributes.radius}{this.props.attributes.radius_unit} |
| 199 |
</p> |
| 200 |
|
| 201 |
|
| 202 |
]; |
| 203 |
|
| 204 |
} |
| 205 |
} |
| 206 |
registerBlockType( 'wpvr/wpvr-block', { |
| 207 |
title: 'WPVR', |
| 208 |
icon: iconEl, |
| 209 |
category: 'common', |
| 210 |
|
| 211 |
|
| 212 |
edit: wpvredit, |
| 213 |
|
| 214 |
save: function(props) { |
| 215 |
return null; |
| 216 |
}, |
| 217 |
} ); |
| 218 |
|
