codoc / 0.3

codoc v0.3

codoc / src / block / block.js

block.js in codoc 0.3, at src/block/block.js

396 lines 11.2 KB

Raw Download Zip

1	/**
2	* BLOCK: codoc-block
3	*
4	* Registering a basic block with Gutenberg.
5	* Simple block, renders and saves the same content without any interactivity.
6	*/
7
8	// Import CSS.
9	import './style.scss';
10	import './editor.scss';
11	import icon from './icon';
12	//import { ENTER } from '@wordpress/keycodes';
13	const { ENTER } = wp.keycodes;
14
15	const { __ } = wp.i18n; // Import __() from wp.i18n
16	const { Component } = wp.element;
17
18	const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks
19	const {
20	InspectorControls,
21	RichText
22	} = wp.editor;
23
24	const {
25	SelectControl,
26	PanelBody,
27	ToggleControl,
28	CheckboxControl,
29	RangeControl,
30	} = wp.components;
31
32	const {
33	getDefaultBlockName,
34	createBlock,
35	} = wp.blocks;
36
37	const { withState } = wp.compose;
38
39	const codocURL = OPTIONS.codoc_url;
40	const codocUserCode = OPTIONS.codoc_usercode;
41	const codocEntriesClass = 'codoc-entries';
42
43	import Cookies from 'universal-cookie';
44	const cookies = new Cookies();
45
46	class CodocControls extends Component {
47	constructor( props ) {
48	super( ...arguments );
49
50	this.subscriptionsFetched = [];
51	this.fetchSubscriptions();
52	}
53
54	fetchSubscriptions() {
55	const {
56	setAttributes,
57	attributes: {
58	fetching,
59	}
60	} = this.props;
61
62	if (fetching) {
63	return
64	}
65
66	setAttributes( { fetching: true } )
67	let url = codocURL + '/api/v1/cms/' + codocUserCode + '/subscriptions?without_token=1';
68
69	fetch(url)
70	.then( res => res.json() )
71	.then( res => {
72	let list = [];
73	if (res.status && res.subscriptions) {
74	for ( var i = 0; i < res.subscriptions.length; i++ ) {
75	let info = {
76	value: res.subscriptions[i].code,
77	label: res.subscriptions[i].title,
78	}
79	list[i] = info
80	}
81	}
82	if (list.length) {
83	this.subscriptionsFetched = list;
84	}
85	setAttributes( { fetching: false } )
86	})
87	}
88
89	getShowPriceHelp( checked ) {
90	return checked ?
91	__( 'する' ) :
92	__( 'しない' );
93	}
94	getShowSupportHelp( checked ) {
95	return checked ?
96	__( '受け付ける' ) :
97	__( '受け付けない' );
98	}
99
100	render() {
101	const {
102	setAttributes,
103	attributes: {
104	showPrice,
105	price,
106	limited,
107	limitedCount,
108
109	affiliateMode,
110	affiliateRate,
111
112	showSupport,
113
114	subscriptions,
115	}
116	} = this.props;
117
118
119
120	const toggleShowPrice = () => setAttributes( { showPrice: ! showPrice } );
121	const toggleLimited = () => setAttributes( { limited: ! limited } );
122	const toggleAffiliateMode = () => setAttributes( { affiliateMode: ! affiliateMode } );
123	const toggleShowSupport = () => setAttributes( { showSupport: ! showSupport } );
124
125	const SubscriptionCheckBoxes = withState({
126	checked_obj: Object.assign(new Object, subscriptions)
127	})( ( { checked_obj , setState } ) => (
128	<ul>
129	{
130	this.subscriptionsFetched.map((v) => (
131	<li><CheckboxControl
132	className="check_items"
133	label={v.label}
134	checked={checked_obj[v.value]}
135
136	onChange={ ( check ) => {
137	check ? checked_obj[v.value] = true : delete checked_obj[v.value]
138	setAttributes({subscriptions : checked_obj})
139	setState({checked_obj})
140	} }
141	/></li>
142	) )
143	}
144	</ul>
145	) )
146	const affiliateRateOptions = [
147	{ value: '0.0500', label:'販売価格の5%' },
148	{ value: '0.1000', label:'販売価格の10%' },
149	{ value: '0.1500', label:'販売価格の15%' },
150	{ value: '0.2000', label:'販売価格の20%' },
151	{ value: '0.2500', label:'販売価格の25%' },
152	{ value: '0.3000', label:'販売価格の30%' },
153	{ value: '0.3500', label:'販売価格の35%' },
154	{ value: '0.4000', label:'販売価格の40%' },
155	{ value: '0.4500', label:'販売価格の45%' },
156	{ value: '0.5000', label:'販売価格の50%' },
157	];
158
159	return(
160	<InspectorControls key="CodocControls">
161
162	<PanelBody>
163
164	<ToggleControl
165	label={ __( '単体販売' ) }
166	checked={ !! showPrice }
167	help={ this.getShowPriceHelp }
168	ref="showPrice"
169	onChange={ toggleShowPrice }
170	/>
171
172	<div style={{ display: showPrice ? 'initial' : 'none' }}>
173
174	<RangeControl
175	label={ __( '価格(円)' ) }
176	value={ price }
177	initialPosition={ price }
178	onChange={ ( value ) => {
179	// do validate this
180	setAttributes({ price: value });
181	}}
182	min="100"
183	max="50000"
184	/><br />
185
186	<ToggleControl
187	label={ __( '数量限定販売' ) }
188	checked={ !! limited }
189	onChange={ toggleLimited }
190	/>
191
192	<div style={{ display: limited ? 'initial' : 'none' }}>
193	<RangeControl
194	label={ __( '限定数' ) }
195	value={ limitedCount }
196	onChange={ ( value ) => {
197	// do validate this
198	setAttributes({ limitedCount: value });
199	}}
200	initialPosition={ limitedCount }
201	min="1"
202	max="100"
203	/><br />
204	</div>
205
206	<ToggleControl
207	label={ __( 'アフィリエイト' ) }
208	checked={ !! affiliateMode }
209	onChange={ toggleAffiliateMode }
210	/>
211
212	<div style={{ display: affiliateMode ? 'initial' : 'none' }}>
213	<SelectControl
214	label={ __( '料率' ) }
215	description={ __( '購�
216	��
217	を対象に指定した料率でアフィリエイトをオファーできます') }
218	options={ affiliateRateOptions }
219	value={ affiliateRate }
220	onChange={ ( value ) => {
221	setAttributes( { affiliateRate: value } );
222	}}/><br />
223	</div>
224
225	</div>
226
227	<ToggleControl
228	label={ __( 'サポート' ) }
229	checked={ !! showSupport }
230	value="1"
231	onChange={ toggleShowSupport }
232	help={ this.getShowSupportHelp }
233	/>
234
235	<label>サブスクリプション</label>
236	<SubscriptionCheckBoxes />
237
238	</PanelBody>
239	</InspectorControls>
240	);
241	}
242	};
243
244	class EditBlockContent extends Component {
245	constructor() {
246	super( ...arguments );
247	// デフォルト値
248	this.props.setAttributes({ wpPluginVer: '0.3' });
249	this.props.setAttributes({ showPrice: this.props.attributes.showPrice == null ? true : this.props.attributes.showPrice });
250	this.props.setAttributes({ price: this.props.attributes.price == null ? 100 : this.props.attributes.price });
251	this.props.setAttributes({ limited: this.props.attributes.limited == null ? false : this.props.attributes.limited });
252	this.props.setAttributes({ limitedCount: this.props.attributes.limitedCount == null ? 10 : this.props.attributes.limitedCount });
253	this.props.setAttributes({ affiliateMode: this.props.attributes.affiliateMode == null ? false : this.props.attributes.affiliateMode });
254	this.props.setAttributes({ affiliateRate: this.props.attributes.affiliateRate == null ? '0.0500' : this.props.attributes.affiliateRate });
255	this.props.setAttributes({ showSupport: this.props.attributes.showSupport == null ? false : this.props.attributes.showSupport });
256	this.props.setAttributes({ subscriptions: this.props.attributes.subscriptions == null ? {} : this.props.attributes.subscriptions });
257
258	this.onChangeInput = this.onChangeInput.bind( this );
259	this.onKeyDown = this.onKeyDown.bind( this );
260	this.state = {
261	defaultText: __( 'この続きをみるには' ),
262	};
263	}
264	onChangeInput( event ) {
265	this.setState( {
266	defaultText: '',
267	} );
268
269	const value = event.target.value.length === 0 ? undefined : event.target.value;
270	this.props.setAttributes( { customText: value } );
271	}
272	onKeyDown( event ) {
273	const { keyCode } = event;
274	const { insertBlocksAfter } = this.props;
275	if ( keyCode === ENTER ) {
276	insertBlocksAfter( [ createBlock( getDefaultBlockName() ) ] );
277	}
278	}
279
280	render() {
281	const {
282	attributes: {
283	customText,
284	},
285	setAttributes
286	} = this.props;
287
288	const { defaultText } = this.state;
289	//const value = customText !== undefined ? customText : defaultText;
290	const value = customText ? customText : defaultText;
291	//const value = defaultText;
292	const inputLength = value.length + 10;
293
294	return[
295	<CodocControls { ...{setAttributes, ...this.props } } />,
296
297	<div className="wp-block-more">
298	<input
299	type="text"
300	value={ value }
301	size={ inputLength }
302	onChange={ this.onChangeInput }
303	onKeyDown={ this.onKeyDown }
304	/>
305	</div>
306
307	];
308	}
309	};
310
311
312	registerBlockType( 'codoc/codoc-block', {
313	title: __( 'codoc' ),
314	description: __( 'このブロックから下のブロックは認証されたcodocユーザーのみが閲覧できる有料エリアとなります。' ),
315	icon,
316	category: 'layout',
317	supports: {
318	customClassName: false,
319	className: false,
320	html: false,
321	multiple: false,
322	},
323	keywords: [
324	__( 'codoc Block' ),
325	__( 'plugin for codoc' ),
326	__( 'codoc-block' ),
327	],
328	attributes: {
329	showPrice: {
330	type: 'boolean',
331	default: null,
332	},
333	price: {
334	type: 'number',
335	default: null,
336	},
337	limited: {
338	type: 'boolean',
339	default: null,
340	},
341	limitedCount: {
342	type: 'number',
343	default: null,
344	},
345	affiliateMode: {
346	type: 'boolean',
347	default: null,
348	},
349	affiliateRate: {
350	type: 'string',
351	default: null,
352	},
353	showSupport: {
354	type: 'boolean',
355	default: null,
356	},
357	subscriptions: {
358	type: 'object',
359	default: null,
360	},
361	customText: {
362	type: 'string',
363	default: '',
364	},
365	wpPluginVer: {
366	type: 'string',
367	default: null,
368	},
369	},
370
371	edit: EditBlockContent,
372
373	save: function( props ) {
374	const {
375	setAttributes,
376	attributes: {
377	customText,
378	}
379	} = props;
380	return ( // return if link behavior normal
381	<div>
382	<span
383	data-id='codoc-tag'
384	className={ codocEntriesClass }
385	>
386	{ customText && !! customText.length && (
387	<RichText.Content
388	value={ customText }
389	/>
390	)}
391	</span>
392	</div>
393	)
394	},
395	} );
396