Categories
HTML Javascript Jquery Programming

Google Sign – working with JQuery

Google prompted me today to update the Google Sign-in at Clickschool. This is long overdue anyway as currently it does not work with mobile devices.

I found that when adding a DIV using JQuery to use for the sign-in button and then making subsequent calls to google resulted in the button not being rendered for some reason I didn’t end up figuring out.

i.e. doing something like this didn’t work

$(‘buttonsContainer’).append(‘<div id=”gSignIn”>’)
google.accounts.id.initialize({ …})
google.accounts.id.prompt(“gSignIn”, {…});

My workaround was to add the standard HTML DIVs using JQuery and then load in the script without using the JS API call at all. Something like this:

var gsign = ‘<div id=”g_id_onload” data-callback=”onGoogleSignIn” data-context=”signin” data-ux_mode=”popup” data-client_id=”CLIENT_ID HERE” data-auto_prompt=”false”>

var gSignButton = ‘<div id=”gSignIn” class=”g_id_signin” data-width=”280″ data-type=”standard” data-size=”large” data-theme=”outline” data-text=”sign_in_with”data-shape=”rectangular” data-logo_alignment=”left”>’

$(‘buttonsContainer’).append(gsign,gSignButton);
loadScript(‘https://accounts.google.com/gsi/client’);

‘loadScript’ is a custom function for loading the new Google Sign-in client.

The server-side is the same as before, and now it works on mobile devices (which previously didn’t work owing to the old way that Google used to display the popup used for signing in).

Categories
HTML Javascript Jquery Programming

Updated Table

I’ve spent these last few days refactoring and improving the table component over at Clickschool. It now renders the data over 20% faster than before and has increased functionality.

The improvements have largely been achieved by removing non-essential elements from the page and completely changing how events are handled when using the keyboard or mouse to navigate the table.

Yes I could have used a pre-made component, but where’s the fun in that? And would it have the functionality I wanted?

The table has editing capabilities (with control over which cells can or can’t be edited), validation and split navigation -just to name a few features.

It’s not supposed to act entirely as a spreadsheet but designed for specific tasks. It is all built from HTML elements but I guess for maximum flexibility you’d probably want to use the canvas.

I’m pretty pleased with it. It does what I need it to do at the moment.

Categories
HTML Javascript Programming

JS JSON-Editor

This week between school hours and sleeping (can’t believe I’ve been surviving on little sleep this week.) I’ve been rewriting my JS JSON editor. Give it an HTML template (with much more attention paid the UI) and some data and it’ll put it in a form… supporting nested arrays. e.g. in the below, new options and questions will automatically generate as you add data. The form data is converted back to JSON and submitted to the server. Pretty cool and highly flexible… minimises any extra coding required for new forms.

JSON Editor