@onetype/framework 2.0.45 → 2.0.47

package/addons/render/directives/front/items/self/650-fetch.js

@@ -1,188 +1,189 @@
-import directives from '#directives/addon.js';
-
-directives.ItemAdd({
-	id: 'ot-fetch',
-	icon: 'cloud_download',
-	name: 'Fetch',
-	description: 'Fetch data from URL or endpoint and bind to component data',
-	category: 'data',
-	trigger: 'node',
-	order: 650,
-	tag: 'ot-fetch',
-	attributes: {
-		'get': ['string'],
-		'endpoint': ['string'],
-		'url': ['string'],
-		'bind': ['string'],
-		'params': ['string'],
-		'on-success': ['string'],
-		'on-error': ['string']
-	},
-	code: function(data, item, compile, node, identifier)
-	{
-		const config = {};
-		const methods = {};
-
-		methods.init = () =>
+onetype.AddonReady('directives', function(directives)
+{
+	directives.ItemAdd({
+		id: 'ot-fetch',
+		icon: 'cloud_download',
+		name: 'Fetch',
+		description: 'Fetch data from URL or endpoint and bind to component data',
+		category: 'data',
+		trigger: 'node',
+		order: 650,
+		tag: 'ot-fetch',
+		attributes: {
+			'get': ['string'],
+			'endpoint': ['string'],
+			'url': ['string'],
+			'bind': ['string'],
+			'params': ['string'],
+			'on-success': ['string'],
+			'on-error': ['string']
+		},
+		code: function(data, item, compile, node, identifier)
 		{
-			methods.config();
+			const config = {};
+			const methods = {};
 
-			if(methods.fetched())
+			methods.init = () =>
 			{
-				return;
-			}
+				methods.config();
 
-			methods.state();
-			methods.execute();
-		};
+				if(methods.fetched())
+				{
+					return;
+				}
 
-		methods.config = () =>
-		{
-			const get = node.getAttribute('get');
-
-			config.endpoint = get || node.getAttribute('endpoint') || node.getAttribute('url') || '';
-			config.bind = node.getAttribute('bind') || 'fetch';
-			config.onSuccess = node.getAttribute('on-success');
-			config.onError = node.getAttribute('on-error');
-			config.params = methods.parseParams();
-			config.url = methods.buildUrl();
-			config.html = node.innerHTML;
-		};
-
-		methods.parseParams = () =>
-		{
-			const paramsAttr = node.getAttribute('params');
+				methods.state();
+				methods.execute();
+			};
 
-			if(!paramsAttr)
+			methods.config = () =>
 			{
-				return {};
-			}
+				const get = node.getAttribute('get');
+
+				config.endpoint = get || node.getAttribute('endpoint') || node.getAttribute('url') || '';
+				config.bind = node.getAttribute('bind') || 'fetch';
+				config.onSuccess = node.getAttribute('on-success');
+				config.onError = node.getAttribute('on-error');
+				config.params = methods.parseParams();
+				config.url = methods.buildUrl();
+				config.html = node.innerHTML;
+			};
 
-			try
-			{
-				return JSON.parse(paramsAttr);
-			}
-			catch(e)
+			methods.parseParams = () =>
 			{
-				return onetype.Function(paramsAttr, compile.data, false) || {};
-			}
-		};
+				const paramsAttr = node.getAttribute('params');
 
-		methods.buildUrl = () =>
-		{
-			let url = config.endpoint;
+				if(!paramsAttr)
+				{
+					return {};
+				}
 
-			if(!/^https?:\/\//.test(url))
-			{
-				url = url.startsWith('/') ? url : '/' + url;
-			}
+				try
+				{
+					return JSON.parse(paramsAttr);
+				}
+				catch(e)
+				{
+					return onetype.Function(paramsAttr, compile.data, false) || {};
+				}
+			};
 
-			if(Object.keys(config.params).length > 0)
+			methods.buildUrl = () =>
 			{
-				const query = Object.entries(config.params)
-					.map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
-					.join('&');
+				let url = config.endpoint;
 
-				url += (url.includes('?') ? '&' : '?') + query;
-			}
+				if(!/^https?:\/\//.test(url))
+				{
+					url = url.startsWith('/') ? url : '/' + url;
+				}
 
-			return url;
-		};
+				if(Object.keys(config.params).length > 0)
+				{
+					const query = Object.entries(config.params)
+						.map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
+						.join('&');
 
-		methods.fetched = () =>
-		{
-			return compile.data[config.bind] && compile.data[config.bind].fetched;
-		};
+					url += (url.includes('?') ? '&' : '?') + query;
+				}
 
-		methods.state = () =>
-		{
-			compile.data[config.bind] = {
-				response: null,
-				error: null,
-				loading: true,
-				success: false,
-				fetched: true
+				return url;
 			};
 
-			node.innerHTML = '';
-			compile.children = false;
-		};
+			methods.fetched = () =>
+			{
+				return compile.data[config.bind] && compile.data[config.bind].fetched;
+			};
 
-		methods.execute = () =>
-		{
-			fetch(config.url)
-				.then(methods.response)
-				.then(methods.success)
-				.catch(methods.error)
-				.finally(methods.complete);
-		};
-
-		methods.response = (response) =>
-		{
-			if(!response.ok)
+			methods.state = () =>
 			{
-				throw onetype.Error(response.status, 'HTTP :status:.', {status: response.status});
-			}
+				compile.data[config.bind] = {
+					response: null,
+					error: null,
+					loading: true,
+					success: false,
+					fetched: true
+				};
+
+				node.innerHTML = '';
+				compile.children = false;
+			};
 
-			return response.json();
-		};
+			methods.execute = () =>
+			{
+				fetch(config.url)
+					.then(methods.response)
+					.then(methods.success)
+					.catch(methods.error)
+					.finally(methods.complete);
+			};
 
-		methods.success = (result) =>
-		{
-			const state = compile.data[config.bind];
+			methods.response = (response) =>
+			{
+				if(!response.ok)
+				{
+					throw onetype.Error(response.status, 'HTTP :status:.', {status: response.status});
+				}
 
-			state.response = result.data !== undefined ? result.data : result;
-			state.error = null;
-			state.loading = false;
-			state.success = true;
+				return response.json();
+			};
 
-			if(config.onSuccess)
+			methods.success = (result) =>
 			{
-				const callback = onetype.Function(config.onSuccess, compile.data, false);
+				const state = compile.data[config.bind];
 
-				if(typeof callback === 'function')
+				state.response = result.data !== undefined ? result.data : result;
+				state.error = null;
+				state.loading = false;
+				state.success = true;
+
+				if(config.onSuccess)
 				{
-					callback(state.response);
-				}
-			}
-		};
+					const callback = onetype.Function(config.onSuccess, compile.data, false);
 
-		methods.error = (err) =>
-		{
-			const state = compile.data[config.bind];
+					if(typeof callback === 'function')
+					{
+						callback(state.response);
+					}
+				}
+			};
 
-			state.response = null;
-			state.error = err.message;
-			state.loading = false;
-			state.success = false;
+			methods.error = (err) =>
+			{
+				const state = compile.data[config.bind];
 
-			onetype.Error(500, 'Fetch error.', {bind: config.bind});
+				state.response = null;
+				state.error = err.message;
+				state.loading = false;
+				state.success = false;
 
-			if(config.onError)
-			{
-				const callback = onetype.Function(config.onError, compile.data, false);
+				onetype.Error(500, 'Fetch error.', {bind: config.bind});
 
-				if(typeof callback === 'function')
+				if(config.onError)
 				{
-					callback(err.message);
-				}
-			}
-		};
+					const callback = onetype.Function(config.onError, compile.data, false);
 
-		methods.complete = () =>
-		{
-			const compiled = item.Compile(config.html, compile.data);
-			const fragment = document.createDocumentFragment();
+					if(typeof callback === 'function')
+					{
+						callback(err.message);
+					}
+				}
+			};
 
-			while(compiled.element.firstChild)
+			methods.complete = () =>
 			{
-				fragment.appendChild(compiled.element.firstChild);
-			}
+				const compiled = item.Compile(config.html, compile.data);
+				const fragment = document.createDocumentFragment();
+
+				while(compiled.element.firstChild)
+				{
+					fragment.appendChild(compiled.element.firstChild);
+				}
 
-			node.replaceWith(fragment);
-			compile.data.Update();
-		};
+				node.replaceWith(fragment);
+				compile.data.Update();
+			};
 
-		methods.init();
-	}
-});
+			methods.init();
+		}
+	});
+});