codoc / 0.8.3

codoc v0.8.3

codoc / src / block / block.js

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

392 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 CODOC_URL = OPTIONS.codoc_url;
40	const CODOC_USER_CODE = OPTIONS.codoc_usercode;
41	const CODOC_PLUGIN_VERSION = OPTIONS.codoc_plugin_version;
42	const CODOC_ENTRIES_CLASS = 'codoc-entries';
43
44	//import Cookies from 'universal-cookie';
45	//const cookies = new Cookies();
46
47	class CodocControls extends Component {
48	constructor( props ) {
49	super( ...arguments );
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 = CODOC_URL + '/api/v1/cms/' + CODOC_USER_CODE + '/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	const toggleShowPrice = () => setAttributes( { showPrice: ! showPrice } );
119	const toggleLimited = () => setAttributes( { limited: ! limited } );
120	const toggleAffiliateMode = () => setAttributes( { affiliateMode: ! affiliateMode } );
121	const toggleShowSupport = () => setAttributes( { showSupport: ! showSupport } );
122
123	const SubscriptionCheckBoxes = withState({
124	checked_obj: Object.assign(new Object, subscriptions)
125	})( ( { checked_obj , setState } ) => (
126	<ul>
127	{
128	this.subscriptionsFetched.map((v) => (
129	<li><CheckboxControl
130	className="check_items"
131	label={v.label}
132	checked={checked_obj[v.value]}
133
134	onChange={ ( check ) => {
135	check ? checked_obj[v.value] = true : delete checked_obj[v.value]
136	setAttributes({subscriptions : checked_obj})
137	setState({checked_obj})
138	} }
139	/></li>
140	) )
141	}
142	</ul>
143	) )
144	const affiliateRateOptions = [
145	{ value: '0.0500', label:'販売価格の5%' },
146	{ value: '0.1000', label:'販売価格の10%' },
147	{ value: '0.1500', label:'販売価格の15%' },
148	{ value: '0.2000', label:'販売価格の20%' },
149	{ value: '0.2500', label:'販売価格の25%' },
150	{ value: '0.3000', label:'販売価格の30%' },
151	{ value: '0.3500', label:'販売価格の35%' },
152	{ value: '0.4000', label:'販売価格の40%' },
153	{ value: '0.4500', label:'販売価格の45%' },
154	{ value: '0.5000', label:'販売価格の50%' },
155	];
156
157	return(
158	<InspectorControls key="CodocControls">
159
160	<PanelBody>
161
162	<ToggleControl
163	label={ __( '単体販売' ) }
164	checked={ !! showPrice }
165	help={ this.getShowPriceHelp }
166	ref="showPrice"
167	onChange={ toggleShowPrice }
168	/>
169
170	<div style={{ display: showPrice ? 'initial' : 'none' }}>
171
172	<RangeControl
173	label={ __( '価格(円)' ) }
174	value={ price }
175	initialPosition={ price }
176	onChange={ ( value ) => {
177	// do validate this
178	setAttributes({ price: value });
179	}}
180	min="100"
181	max="50000"
182	/><br />
183
184	<ToggleControl
185	label={ __( '数量限定販売' ) }
186	checked={ !! limited }
187	onChange={ toggleLimited }
188	/>
189
190	<div style={{ display: limited ? 'initial' : 'none' }}>
191	<RangeControl
192	label={ __( '限定数' ) }
193	value={ limitedCount }
194	onChange={ ( value ) => {
195	// do validate this
196	setAttributes({ limitedCount: value });
197	}}
198	initialPosition={ limitedCount }
199	min="1"
200	max="100"
201	/><br />
202	</div>
203
204	<ToggleControl
205	label={ __( 'アフィリエイト' ) }
206	checked={ !! affiliateMode }
207	onChange={ toggleAffiliateMode }
208	/>
209
210	<div style={{ display: affiliateMode ? 'initial' : 'none' }}>
211	<SelectControl
212	label={ __( '料率' ) }
213	description={ __( '購�
214	��
215	を対象に指定した料率でアフィリエイトをオファーできます') }
216	options={ affiliateRateOptions }
217	value={ affiliateRate }
218	onChange={ ( value ) => {
219	setAttributes( { affiliateRate: value } );
220	}}/><br />
221	</div>
222
223	</div>
224
225	<ToggleControl
226	label={ __( 'サポート' ) }
227	checked={ !! showSupport }
228	value="1"
229	onChange={ toggleShowSupport }
230	help={ this.getShowSupportHelp }
231	/>
232
233	<label>サブスクリプション</label>
234	<SubscriptionCheckBoxes />
235
236	</PanelBody>
237	</InspectorControls>
238	);
239	}
240	};
241
242	class EditBlockContent extends Component {
243	constructor() {
244	super( ...arguments );
245	// デフォルト値
246	this.props.setAttributes({ version: CODOC_PLUGIN_VERSION });
247	this.props.setAttributes({ showPrice: this.props.attributes.showPrice == null ? true : this.props.attributes.showPrice });
248	this.props.setAttributes({ price: this.props.attributes.price == null ? 100 : this.props.attributes.price });
249	this.props.setAttributes({ limited: this.props.attributes.limited == null ? false : this.props.attributes.limited });
250	this.props.setAttributes({ limitedCount: this.props.attributes.limitedCount == null ? 10 : this.props.attributes.limitedCount });
251	this.props.setAttributes({ affiliateMode: this.props.attributes.affiliateMode == null ? false : this.props.attributes.affiliateMode });
252	this.props.setAttributes({ affiliateRate: this.props.attributes.affiliateRate == null ? '0.0500' : this.props.attributes.affiliateRate });
253	this.props.setAttributes({ showSupport: this.props.attributes.showSupport == null ? false : this.props.attributes.showSupport });
254	this.props.setAttributes({ subscriptions: this.props.attributes.subscriptions == null ? {} : this.props.attributes.subscriptions });
255
256	this.onChangeInput = this.onChangeInput.bind( this );
257	this.onKeyDown = this.onKeyDown.bind( this );
258	this.state = {
259	defaultText: __( 'この続きをみるには' ),
260	};
261	}
262	onChangeInput( event ) {
263	this.setState( {
264	defaultText: '',
265	} );
266
267	const value = event.target.value.length === 0 ? undefined : event.target.value;
268	this.props.setAttributes( { customText: value } );
269	}
270	onKeyDown( event ) {
271	const { keyCode } = event;
272	const { insertBlocksAfter } = this.props;
273	if ( keyCode === ENTER ) {
274	insertBlocksAfter( [ createBlock( getDefaultBlockName() ) ] );
275	}
276	}
277
278	render() {
279	const {
280	attributes: {
281	customText,
282	},
283	setAttributes
284	} = this.props;
285
286	const { defaultText } = this.state;
287	//const value = customText !== undefined ? customText : defaultText;
288	const value = customText ? customText : defaultText;
289	//const value = defaultText;
290	const inputLength = value.length + 10;
291
292	return[
293	<CodocControls { ...{setAttributes, ...this.props } } />,
294
295	<div className="wp-block-more">
296	<input
297	type="text"
298	value={ value }
299	size={ inputLength }
300	onChange={ this.onChangeInput }
301	onKeyDown={ this.onKeyDown }
302	/>
303	</div>
304
305	];
306	}
307	};
308
309
310	registerBlockType( 'codoc/codoc-block', {
311	title: __( 'codoc' ),
312	description: __( 'このブロックから下のブロックは認証されたcodocユーザーのみが閲覧できる有料エリアとなります。' ),
313	icon,
314	category: 'layout',
315	supports: {
316	customClassName: false,
317	className: false,
318	html: false,
319	multiple: false,
320	},
321	keywords: [
322	__( 'codoc Block' ),
323	__( 'plugin for codoc' ),
324	__( 'codoc-block' ),
325	],
326	attributes: {
327	showPrice: {
328	type: 'boolean',
329	default: null,
330	},
331	price: {
332	type: 'number',
333	default: null,
334	},
335	limited: {
336	type: 'boolean',
337	default: null,
338	},
339	limitedCount: {
340	type: 'number',
341	default: null,
342	},
343	affiliateMode: {
344	type: 'boolean',
345	default: null,
346	},
347	affiliateRate: {
348	type: 'string',
349	default: null,
350	},
351	showSupport: {
352	type: 'boolean',
353	default: null,
354	},
355	subscriptions: {
356	type: 'object',
357	default: null,
358	},
359	customText: {
360	type: 'string',
361	default: '',
362	},
363	version: {
364	type: 'string',
365	default: null,
366	},
367	},
368
369	edit: EditBlockContent,
370
371	save: function( props ) {
372	const {
373	setAttributes,
374	attributes: {
375	customText,
376	}
377	} = props;
378	return ( // return if link behavior normal
379	<div
380	data-id='codoc-tag'
381	className={ CODOC_ENTRIES_CLASS }
382	>
383	{ customText && !! customText.length && (
384	<RichText.Content
385	value={ customText }
386	/>
387	)}
388	</div>
389	)
390	},
391	} );
392