Adventures of a Software Engineer

Tag: javascript

  • EventEmitter

    Our EventEmitter in PhantomSQL is based on NodeJS version so they should be compatible. Here are couple examples on how to use the emitter.

    Basic usage of registering and listening to an event.

    "use strict";

const {EventEmitter} = require('events');

// Dump all the args
em.on('hello-event', (...arg)=> {console.info("Hello event handler : " + arg)});
// Handler without args
em.on('hello-event', ()=> {console.info("Another handler")});
// passed in arguments
em.on('hello-event', (id, val)=> {console.info("Handler :"+id +", "+ val)});

// emit event
em.emit('hello-event', 123, 'ABC');

    A more typical example would be to extend via prototype.

    "use strict";
const {EventEmitter} = require('events');

function HelloService()
{
	// Extends via prototype
	Object.setPrototypeOf(HelloService.prototype, EventEmitter.prototype);
	
	this.hello = function()
	{
		console.info("Hello service called");
		this.emit('hello');
	}
}  

const service = new HelloService();

service.on('hello', ()=> {console.info("Hello Handler called")});
service.hello();

  • Creating Javascript accessible object from C++ / CEF

    Example with Chromium Embedded Framework (CEF) on how to create an object in C++ and make it accessible via Javascript. 

    console.inof(api)
Object {ready: true, version: "psql.0.0.1", info: Object, getVersion: function}

    void ExtractEngineApp::OnContextCreated(
	CefRefPtr browser, 
	CefRefPtr frame, 
	CefRefPtr context)
{

	auto info = CefV8Value::CreateObject(NULL, NULL);
	info->SetValue("major", CefV8Value::CreateString("0"), V8_PROPERTY_ATTRIBUTE_READONLY);
	info->SetValue("minor", CefV8Value::CreateString("1"), V8_PROPERTY_ATTRIBUTE_READONLY);
	
	auto global = context->GetGlobal();
	auto api = CefV8Value::CreateObject(NULL, NULL);

	global->SetValue("api", api, V8_PROPERTY_ATTRIBUTE_NONE);

	auto fun = CefV8Value::CreateFunction("getVersion", new engine:: PhantomExtensionHandler(this));
	api->SetValue("getVersion", fun, V8_PROPERTY_ATTRIBUTE_NONE);
	
	// Readonly properties
	api->SetValue("ready", CefV8Value::CreateBool(true), V8_PROPERTY_ATTRIBUTE_READONLY);
	api->SetValue("version", CefV8Value::CreateString("psql.0.0.1"), V8_PROPERTY_ATTRIBUTE_READONLY);

	// Readonly Object access
	api->SetValue("info", info, V8_PROPERTY_ATTRIBUTE_READONLY);
}


class PhantomExtensionHandler : public CefV8Handler
	{
	public:
		explicit PhantomExtensionHandler(CefRefPtr client_app)
			: client_app(client_app)
			, messageId(0)
		{

		}

		virtual bool Execute(const CefString& name,
			CefRefPtr object,
			const CefV8ValueList& arguments,
			CefRefPtr& retval,
			CefString& exception)
		{
			if (name == "getVersion")
			{
				retval = CefV8Value::CreateString("Version(SemVer) # 0.0.1");
			}

			return true;
		}

	private:
		CefRefPtr client_app;
		int32 messageId;

		IMPLEMENT_REFCOUNTING(PhantomExtensionHandler);
	};

  • BigCommerce Mod : Custom product tabs

    This is a simple mod that allow us to have custom product tabs in BigCommerce system, there is no limit on how many tabs you can have. Our final result will be this.

    Mod

    This mod requires modification to only one file /Panels/ProductTabs.html

    Step 1

    Add current JavaScript to the existing script tag 

    	/**
	 * Overrides  parts of /javascript/product.functions.js#GenerateProductTabs() function
	 * as it does not support related products	 
	*/
	$(document).ready(function()
	{
			var id = 'RelatedProducts';
			var TabName = 'Related Products';
			 var ProductTab = '
  • '+TabName+'
    • ';

			$('#ProductTabsList').append(ProductTab);
	});

    Step 2

    Here we actually add content of our tab.

    One thing to not is that the div id ‘RelatedProducts’ relates to javascript id ‘RelatedProducts’ so if you change that you need to change the div id.

    That is, if we wanted to add additional tabs we simply would use an array.

  • BigCommerce Mod : Show brand logo image on Product Page

    Showing brand logos on product pages in BigCommerce sites is harder than it should be. Here is a quick mod that will let us do that without need of using the API.
    Here is the desired result

    Code

    This works by parsing you /brands page and then comparing current brand name to the one from parsed page.

    Lets edit Panels/ProductPanels.html and change the current brand code into this 

    
					
    %%LNG_Brand%%:
    
					
    
						  
    %%GLOBAL_BrandName%%