divhunt 2.0.0

package/addons/render/directives/front/js/items/500-mouse-enter.js

@@ -0,0 +1,61 @@
+directives.ItemAdd({
+    id: 'dh-mouse-enter',
+    icon: 'mouse',
+    name: 'Mouse Enter',
+    description: 'Handle mouse enter events. Triggers when cursor enters element boundaries.',
+    category: 'events',
+    trigger: 'node',
+    order: 500,
+    attributes: {
+        'dh-mouse-enter': ['string']
+    },
+    code: function(data, item, compile, node, identifier)
+    {
+        const attribute = data['dh-mouse-enter'].value;
+
+        node.dhMouseEnter = (event) =>
+        {
+            const results = divhunt.Function(attribute, compile.data, false);
+
+            if(typeof results === 'function')
+            {
+                results(event, {item, compile, node, identifier});
+            }
+        }
+    }
+});
+
+divhunt.AddonReady('directives', function()
+{
+    document.addEventListener('mouseover', function(event)
+    {
+        let node = event.target;
+
+        while(node && node !== document)
+        {
+            if('dhMouseEnter' in node && !node.dhMouseEntered)
+            {
+                node.dhMouseEntered = true;
+                node.dhMouseEnter(event);
+                break;
+            }
+
+            node = node.parentNode;
+        }
+    });
+
+    document.addEventListener('mouseout', function(event)
+    {
+        let node = event.target;
+
+        while(node && node !== document)
+        {
+            if('dhMouseEnter' in node && node.dhMouseEntered)
+            {
+                node.dhMouseEntered = false;
+            }
+
+            node = node.parentNode;
+        }
+    });
+});

package/addons/render/directives/front/js/items/500-mouse-leave.js

@@ -0,0 +1,61 @@
+directives.ItemAdd({
+    id: 'dh-mouse-leave',
+    icon: 'logout',
+    name: 'Mouse Leave',
+    description: 'Handle mouse leave events. Triggers when cursor exits element boundaries.',
+    category: 'events',
+    trigger: 'node',
+    order: 500,
+    attributes: {
+        'dh-mouse-leave': ['string']
+    },
+    code: function(data, item, compile, node, identifier)
+    {
+        const attribute = data['dh-mouse-leave'].value;
+
+        node.dhMouseLeave = (event) =>
+        {
+            const results = divhunt.Function(attribute, compile.data, false);
+
+            if(typeof results === 'function')
+            {
+                results(event, {item, compile, node, identifier});
+            }
+        }
+    }
+});
+
+divhunt.AddonReady('directives', function()
+{
+    document.addEventListener('mouseout', function(event)
+    {
+        let node = event.target;
+
+        while(node && node !== document)
+        {
+            if('dhMouseLeave' in node && !node.dhMouseLeft)
+            {
+                node.dhMouseLeft = true;
+                node.dhMouseLeave(event);
+                break;
+            }
+
+            node = node.parentNode;
+        }
+    });
+
+    document.addEventListener('mouseover', function(event)
+    {
+        let node = event.target;
+
+        while(node && node !== document)
+        {
+            if('dhMouseLeave' in node && node.dhMouseLeft)
+            {
+                node.dhMouseLeft = false;
+            }
+
+            node = node.parentNode;
+        }
+    });
+});

package/addons/render/directives/front/js/items/500-mouse-move.js

@@ -0,0 +1,45 @@
+directives.ItemAdd({
+    id: 'dh-mouse-move',
+    icon: 'pan_tool',
+    name: 'Mouse Move',
+    description: 'Handle mouse move events. Track cursor position and movement within elements.',
+    category: 'events',
+    trigger: 'node',
+    order: 500,
+    attributes: {
+        'dh-mouse-move': ['string']
+    },
+    code: function(data, item, compile, node, identifier)
+    {
+        const attribute = data['dh-mouse-move'].value;
+
+        node.dhMouseMove = (event) =>
+        {
+            const results = divhunt.Function(attribute, compile.data, false);
+
+            if(typeof results === 'function')
+            {
+                results(event, {item, compile, node, identifier});
+            }
+        }
+    }
+    });
+
+divhunt.AddonReady('directives', function()
+{
+    document.addEventListener('mousemove', function(event)
+    {
+        let node = event.target;
+
+        while(node && node !== document)
+        {
+            if('dhMouseMove' in node)
+            {
+                node.dhMouseMove(event);
+                break;
+            }
+
+            node = node.parentNode;
+        }
+    });
+});

package/addons/render/directives/front/js/items/500-scroll.js

@@ -0,0 +1,45 @@
+directives.ItemAdd({
+    id: 'dh-scroll',
+    icon: 'unfold_more',
+    name: 'Scroll',
+    description: 'Handle scroll events on elements or window. Track scroll position for infinite loading and animations.',
+    category: 'events',
+    trigger: 'node',
+    order: 500,
+    attributes: {
+        'dh-scroll': ['string']
+    },
+    code: function(data, item, compile, node, identifier)
+    {
+        const attribute = data['dh-scroll'].value;
+
+        node.dhScroll = (event) =>
+        {
+            const results = divhunt.Function(attribute, compile.data, false);
+
+            if(typeof results === 'function')
+            {
+                results(event, {item, compile, node, identifier});
+            }
+        }
+    }
+});
+
+divhunt.AddonReady('directives', function()
+{
+    document.addEventListener('scroll', function(event)
+    {
+        let node = event.target;
+
+        while(node && node !== document)
+        {
+            if('dhScroll' in node)
+            {
+                node.dhScroll(event);
+                break;
+            }
+
+            node = node.parentNode;
+        }
+    }, true);
+});

package/addons/render/directives/front/js/items/500-submit.js

@@ -0,0 +1,52 @@
+directives.ItemAdd({
+    id: 'dh-submit',
+    icon: 'send',
+    name: 'Submit',
+    description: 'Handle form submission events. Prevents default behavior and executes custom submit logic.',
+    category: 'events',
+    trigger: 'node',
+    order: 500,
+    attributes: {
+        'dh-submit': ['string']
+    },
+    code: function(data, item, compile, node, identifier)
+    {
+        const attribute = data['dh-submit'];
+
+        node.dhSubmit = (event) =>
+        {
+            // Auto-apply modifiers
+            if (data.modifiers)
+            {
+                if (data.modifiers.prevent) event.preventDefault();
+                if (data.modifiers.stop) event.stopPropagation();
+            }
+
+            const results = divhunt.Function(attribute, compile.data, false);
+
+            if(typeof results === 'function')
+            {
+                results(event, {item, compile, node, identifier});
+            }
+        }
+    }
+});
+
+divhunt.AddonReady('directives', function()
+{
+    document.addEventListener('submit', function(event)
+    {
+        let node = event.target;
+
+        while(node && node !== document)
+        {
+            if('dhSubmit' in node)
+            {
+                node.dhSubmit(event);
+                break;
+            }
+
+            node = node.parentNode;
+        }
+    });
+});

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

@@ -0,0 +1,189 @@
+import directives from '#directives/addon.js';
+
+directives.ItemAdd({
+	id: 'dh-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: 'dh-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 divhunt = item.GetDivhunt();
+		const config = {};
+		const methods = {};
+
+		methods.init = () =>
+		{
+			methods.config();
+
+			if(methods.fetched())
+			{
+				return;
+			}
+
+			methods.state();
+			methods.execute();
+		};
+
+		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');
+
+			if(!paramsAttr)
+			{
+				return {};
+			}
+
+			try
+			{
+				return JSON.parse(paramsAttr);
+			}
+			catch(e)
+			{
+				return divhunt.Function(paramsAttr, compile.data, false) || {};
+			}
+		};
+
+		methods.buildUrl = () =>
+		{
+			let url = config.endpoint;
+
+			if(!/^https?:\/\//.test(url))
+			{
+				url = url.startsWith('/') ? url : '/' + url;
+			}
+
+			if(Object.keys(config.params).length > 0)
+			{
+				const query = Object.entries(config.params)
+					.map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
+					.join('&');
+
+				url += (url.includes('?') ? '&' : '?') + query;
+			}
+
+			return url;
+		};
+
+		methods.fetched = () =>
+		{
+			return compile.data[config.bind] && compile.data[config.bind].fetched;
+		};
+
+		methods.state = () =>
+		{
+			compile.data[config.bind] = {
+				response: null,
+				error: null,
+				loading: true,
+				success: false,
+				fetched: true
+			};
+
+			node.innerHTML = '';
+			compile.children = false;
+		};
+
+		methods.execute = () =>
+		{
+			fetch(config.url)
+				.then(methods.response)
+				.then(methods.success)
+				.catch(methods.error)
+				.finally(methods.complete);
+		};
+
+		methods.response = (response) =>
+		{
+			if(!response.ok)
+			{
+				throw new Error(`HTTP ${response.status}`);
+			}
+
+			return response.json();
+		};
+
+		methods.success = (result) =>
+		{
+			const state = compile.data[config.bind];
+
+			state.response = result.data !== undefined ? result.data : result;
+			state.error = null;
+			state.loading = false;
+			state.success = true;
+
+			if(config.onSuccess)
+			{
+				const callback = divhunt.Function(config.onSuccess, compile.data, false);
+
+				if(typeof callback === 'function')
+				{
+					callback(state.response);
+				}
+			}
+		};
+
+		methods.error = (err) =>
+		{
+			const state = compile.data[config.bind];
+
+			state.response = null;
+			state.error = err.message;
+			state.loading = false;
+			state.success = false;
+
+			console.error('Fetch error:', err);
+
+			if(config.onError)
+			{
+				const callback = divhunt.Function(config.onError, compile.data, false);
+
+				if(typeof callback === 'function')
+				{
+					callback(err.message);
+				}
+			}
+		};
+
+		methods.complete = () =>
+		{
+			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();
+		};
+
+		methods.init();
+	}
+});