codoc / 0.2

codoc v0.2

codoc / src / block / block.js

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

294 lines 8.3 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
12	const { __ } = wp.i18n; // Import __() from wp.i18n
13	const { Component } = wp.element;
14	const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks
15	const {
16	InspectorControls,
17	RichText
18	} = wp.editor;
19
20	const {
21	SelectControl,
22	PanelBody,
23	} = wp.components
24
25	const codocURL = 'https://codoc.jp';
26	const codocEntriesClass = 'codoc-entries';
27
28	import Cookies from 'universal-cookie';
29	const cookies = new Cookies();
30
31	class CodocControls extends Component {
32	constructor( props ) {
33	super( ...arguments );
34	}
35
36	fetchEntries(userCode,entryCode) {
37	const {
38	setAttributes,
39	attributes: {
40	entries,
41	fetching,
42	}
43	} = this.props;
44
45	if (fetching) {
46	return
47	}
48
49	setAttributes( { fetching: true } )
50	let url = codocURL + '/api/v1/paywall/' + userCode + '/entries'
51	if (entryCode) {
52	url = url + '/' + entryCode
53	}
54
55	fetch(url)
56	.then( res => res.json() )
57	.then( res => {
58	let list = [];
59	let eyecatchMap = [];
60	if (res.status && res.entries) {
61	for ( var i = 0; i < res.entries.length; i++ ) {
62	let info = {
63	value: res.entries[i].code,
64	label: res.entries[i].title,
65	}
66	list[i] = info
67	eyecatchMap[res.entries[i].code] = res.entries[i].image_url
68	}
69	}
70	if (list.length) {
71	setAttributes( { entries: list })
72	setAttributes( { entryCode: list[0].value } );
73	setAttributes( { entryLabel: list[0].label } );
74	setAttributes( { entryImgSrc: eyecatchMap[list[0].value] } );
75	setAttributes( { eyecatchMap: eyecatchMap });
76	}
77	setAttributes( { fetching: false } )
78	})
79	}
80
81	getEntryLabel(entryCode) {
82	const {
83	attributes: {
84	entries,
85	}
86	} = this.props;
87
88	for ( var i = 0; i < entries.length; i++ ) {
89	if (entries[i].value === entryCode ) {
90	return entries[i].label
91	}
92	}
93	}
94
95	render() {
96	const {
97	setAttributes,
98	attributes: {
99	userCode,
100	entryCode,
101	entryLabel,
102	entries,
103	eyecatchMap,
104	}
105	} = this.props;
106	var entriesOptions = entries
107
108	// edit
109	if (userCode && entryCode && entryLabel && !entries) {
110	entriesOptions = [ { value: entryCode, label:entryLabel } ]
111	setAttributes({ entries: entriesOptions })
112	}
113	// if it's userCode in cookies
114	if (!userCode) {
115	let userCodeInCookie = cookies.get('codocUserCode');
116	if (userCodeInCookie) {
117	setAttributes( { userCode: userCodeInCookie } );
118	this.fetchEntries(userCodeInCookie)
119	}
120	}
121	// first time
122	if (!entriesOptions) {
123	let entriesDefault = [ { value: '-', label: __( 'ユーザーコードを�
124	�力してください' )} ]
125	setAttributes( { entries: entriesDefault })
126	setAttributes( { entryLabel: 'ブロック設定を開いてユーザーコードを�
127	�力してください' } )
128	}
129
130	return(
131	<InspectorControls key="CodocControls">
132	<PanelBody>
133	<label>ユーザーコード</label>
134	<label>
135	<a
136	href={ codocURL + '/me/account?from_wp=1' }
137	target="_blank"
138	>確認↗️</a>
139	</label>
140	<RichText
141	tagName="div"
142	placeholder={ __( 'ここにコピーして貼付け' ) }
143	value={ userCode }
144	key="usercodeform"
145	unstableOnSplit={ () => false }
146	onChange={ ( value ) => {
147	setAttributes( { userCode: value } );
148	var dt = new Date();
149	dt.setMonth(dt.getMonth() + 12);
150	cookies.set('codocUserCode', value, { path: '/', expires: dt });
151	this.fetchEntries(value)
152	}}/><br />
153	<label>記事コード</label>
154	<RichText
155	tagName="div"
156	placeholder={ __( '' ) }
157	key="usercodeform"
158	value={ entryCode }
159	unstableOnSplit={ () => false }
160	onChange={ ( value ) => {
161	this.fetchEntries(cookies.get('codocUserCode'),value)
162	}}/><br />
163	<SelectControl
164	label={ __( '記事一覧' ) }
165	description={ __( '貼り付ける記事を選んでください' ) }
166	options={ entriesOptions }
167	value={ entryCode }
168	onChange={ ( value ) => {
169	setAttributes( { entryCode: value } );
170	setAttributes( { entryLabel: this.getEntryLabel(value) } );
171	setAttributes( { entryImgSrc: eyecatchMap[value] } );
172	}}/>
173	<button
174	onClick={ ( value ) => {
175	this.fetchEntries(userCode)
176	}}>記事一覧を再取得</button>
177	</PanelBody>
178	<a
179	href={ codocURL + '/me/entries/create?from_wp=1' }
180	target="_blank"
181	>記事を作成↗️</a>
182	</InspectorControls>
183	);
184	}
185	};
186
187	class EditBlockContent extends Component {
188	render() {
189	const {
190	attributes: {
191	id,
192	text,
193	userCode,
194	entryCode,
195	entryLabel,
196	entryImgSrc,
197	},
198	setAttributes
199	} = this.props;
200
201	return[
202	<CodocControls { ...{setAttributes, ...this.props } } />,
203	<div className="codoc-block">
204	<div>
205	<div>
206	<img
207	width="50%"
208	height="50%"
209	src={ entryImgSrc } />
210	</div>
211	<span>{ entryLabel }</span>
212	<span>
213	<a
214	href={ codocURL + '/me/entries/' + entryCode + '/edit' }
215	target="_blank">【編集↗️】</a>
216	</span>
217	</div>
218	<RichText
219	tagName="div"
220	placeholder={ __( 'この続きはcodocで購読' ) }
221	keepPlaceholderOnFocus
222	className="codoc-block-link"
223	value={ text }
224	onChange={ ( value ) => setAttributes( { text: value } )}
225	/>
226	</div>
227	];
228	}
229	};
230
231
232	registerBlockType( 'codoc/codoc-block', {
233	title: __( 'codoc Block' ),
234	icon: 'book',
235	category: 'common',
236	keywords: [
237	__( 'codoc Block' ),
238	__( 'plugin for codoc' ),
239	__( 'codoc-block' ),
240	],
241	attributes: {
242	entryCode: {
243	type: 'string',
244	default: '',
245	},
246	entryLabel: {
247	type: 'string',
248	default: '',
249	},
250	userCode: {
251	type: 'string',
252	default: '',
253	},
254	entryImgSrc: {
255	type: 'string',
256	default: '',
257	},
258	text: {
259	type: 'string',
260	default: '',
261	},
262	},
263
264	edit: EditBlockContent,
265
266	save: function( props ) {
267	const {
268	setAttributes,
269	attributes: {
270	// if you need to save datas, check attributes of registerBlockType's attributes
271	text,
272	userCode,
273	entryCode,
274	entryLabel,
275	entryImgSrc,
276	}
277	} = props;
278	return ( // return if link behavior normal
279	<div>
280	<span
281	id={ 'codoc-entry-' + entryCode }
282	className={ codocEntriesClass }
283	>
284	{ text && !! text.length && (
285	<RichText.Content
286	value={ text }
287	/>
288	)}
289	</span>
290	</div>
291	)
292	},
293	} );
294