Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[GCI] Standardised UI code comments #1345

Merged
merged 14 commits into from
Jan 1, 2020
Merged

[GCI] Standardised UI code comments #1345

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
ce642cb
standardise comments
Dec 9, 2019
65046cd
Merge branch 'main' into ui-comments
harshkhandeparkar Dec 10, 2019
22b4eb6
fix some stuff
Dec 10, 2019
fad0412
Merge branch 'main' into ui-comments
harshkhandeparkar Dec 12, 2019
c8ffe98
A googol issues fixed
harshkhandeparkar Dec 12, 2019
d464ee7
Update examples/demo.js
harshkhandeparkar Dec 12, 2019
e8fcdb4
.
harshkhandeparkar Dec 14, 2019
085b369
.
harshkhandeparkar Dec 14, 2019
67d6154
Merge branch 'main' into ui-comments
harshkhandeparkar Dec 14, 2019
6d8d7e6
Merge branch 'main' into ui-comments
harshkhandeparkar Dec 16, 2019
61e6656
Merge branch 'main' into ui-comments
harshkhandeparkar Dec 17, 2019
5f199b1
Merge branch 'main' into ui-comments
harshkhandeparkar Dec 21, 2019
0b650f6
Merge branch 'main' into ui-comments
jywarren Jan 1, 2020
19b1ad4
Merge branch 'main' into ui-comments
jywarren Jan 1, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 30 additions & 24 deletions examples/demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ var defaultHtmlSequencerUi = require('./lib/defaultHtmlSequencerUi.js'),
insertPreview = require('./lib/insertPreview.js');

window.onload = function () {
sequencer = ImageSequencer();

sequencer = ImageSequencer(); // Set the global sequencer variable
options = {
sortField: 'text',
openOnFocus: false,
Expand Down Expand Up @@ -52,15 +52,20 @@ window.onload = function () {

$(window).on('scroll', scrollFunction);

function scrollFunction() {
/**
* @description Method to toggle the scroll-up arrow.
*/
function scrollFunction(A, B) {
var shouldDisplay = $('body').scrollTop() > 20 || $(':root').scrollTop() > 20;

$('#move-up').css({
display: shouldDisplay ? 'block' : 'none'
});
}


/**
* @description Method to scroll to the top of the page.
*/
function topFunction() {
$('body').animate({scrollTop: 0});
$(':root').animate({scrollTop: 0});
Expand All @@ -75,7 +80,7 @@ window.onload = function () {
// UI for the overall demo:
var ui = defaultHtmlSequencerUi(sequencer);

// find any `src` parameters in URL hash and attempt to source image from them and run the sequencer
// Load image data from URL `src` parameter.
SidharthBansal marked this conversation as resolved.
Show resolved Hide resolved
if (urlHash.getUrlHashParameter('src')) {
sequencer.loadImage(urlHash.getUrlHashParameter('src'), ui.onLoad);
} else {
Expand All @@ -92,18 +97,23 @@ window.onload = function () {
$('#addStep #add-step-btn').on('click', ui.addStepUi);
$('#resetButton').on('click', resetSequence);

//Module button radio selection
// Module Selector quick buttons click handler.
$('.radio-group .radio').on('click', function () {
$(this).parent().find('.radio').removeClass('selected');
$(this).addClass('selected');
newStep = $(this).attr('data-value');
//$("#addStep option[value=" + newStep + "]").attr('selected', 'selected');

$('#addStep select').val(newStep);
ui.selectNewStepUi(newStep);
ui.addStepUi(newStep);
$(this).removeClass('selected');
});

/**
* @method displayMessageOnSaveSequence
* @description When a sequence is saved to a browser, notification is displayed.
* @returns {Null}
*/
function displayMessageOnSaveSequence() {
$('.savesequencemsg').fadeIn();
setTimeout(function () {
Expand All @@ -123,7 +133,7 @@ window.onload = function () {
}
}
$('#saveButton').on('click', function () {
// different handlers triggered for different dropdown options
// Different handlers triggered for different dropdown options.

let dropDownValue = $('#selectSaveOption option:selected').val();

Expand All @@ -145,9 +155,8 @@ window.onload = function () {

let isWorkingOnGifGeneration = false;

$('.js-view-as-gif').on('click', function (event) {
/* Prevent user from triggering generation multiple times*/
if (isWorkingOnGifGeneration) return;
$('.js-view-as-gif').on('click', function (event) { // GIF generation and display
if (isWorkingOnGifGeneration) return; // Prevent multiple button clicks

isWorkingOnGifGeneration = true;

Expand All @@ -156,12 +165,12 @@ window.onload = function () {
button.innerHTML = '<i class="fa fa-circle-o-notch fa-spin"></i>';

try {
/* Get gif resources of previous steps */
// Get GIF resources from previous steps
let options = getGifResources();

gifshot.createGIF(options, function (obj) { // gif generation
gifshot.createGIF(options, function (obj) { // GIF generation
if (!obj.error) {
// Final gif encoded with base64 format
// Final GIF encoded with base64 format
var image = obj.image;
var animatedImage = document.createElement('img');

Expand All @@ -171,9 +180,7 @@ window.onload = function () {
let modal = $('#js-download-gif-modal');

$('#js-download-as-gif-button').one('click', function () {
// Trigger download
downloadGif(image);
// Close modal
downloadGif(image); // Trigger GIF download
modal.modal('hide');
});

Expand All @@ -185,7 +192,6 @@ window.onload = function () {
// Insert image
gifContainer.appendChild(animatedImage);


// Open modal
modal.modal();

Expand All @@ -204,16 +210,16 @@ window.onload = function () {
});

function getGifResources() {
/* Returns an object with specific gif options */
// Returns an object with specific gif options
let imgs = document.getElementsByClassName('step-thumbnail');
var imgSrcs = [];

// Pushes image sources of all the modules in dom
// Pushes image sources of all the modules in the DOM
for (var i = 0; i < imgs.length; i++) {
imgSrcs.push(imgs[i].src);
}

var options = { // gif frame options
var options = { // GIF frame options
'gifWidth': imgs[0].width,
'gifHeight': imgs[0].height,
'images': imgSrcs,
Expand Down Expand Up @@ -271,7 +277,7 @@ window.onload = function () {


function downloadGif(image) {
download(image, 'index.gif', 'image/gif');// downloadjs library function
download(image, 'index.gif', 'image/gif'); // Downloadjs library function
}

function SaveToPubliclab() {
Expand All @@ -286,7 +292,7 @@ window.onload = function () {
postToPL($('img')[sequencer.steps.length - 1].src);
}

// image selection and drag/drop handling from examples/lib/imageSelection.js
// Image selection and drag/drop handling from examples/lib/imageSelection.js
sequencer.setInputStep({
dropZoneSelector: '#dropzone',
fileInputSelector: '#fileInput',
Expand Down Expand Up @@ -318,7 +324,7 @@ window.onload = function () {

setupCache();

if (urlHash.getUrlHashParameter('src')) {
if (urlHash.getUrlHashParameter('src')) { // Gets the sequence from the URL
insertPreview.updatePreviews(urlHash.getUrlHashParameter('src'), document.querySelector('#addStep'));
} else {
insertPreview.updatePreviews('images/tulips.png', document.querySelector('#addStep'));
Expand Down
63 changes: 43 additions & 20 deletions examples/lib/defaultHtmlStepUi.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
if (step.options && step.options.description)
step.description = step.options.description;

step.ui =
step.ui = // Basic UI markup for the step
'\
<div class="container-fluid step-container">\
<div class="panel panel-default">\
Expand Down Expand Up @@ -72,18 +72,20 @@ function DefaultHtmlStepUi(_sequencer, options) {
var util = intermediateHtmlStepUi(_sequencer, step);

var parser = new DOMParser();
step.ui = parser.parseFromString(step.ui, 'text/html');
step.ui = parser.parseFromString(step.ui, 'text/html'); // Convert the markup string to a DOM node.
step.ui = step.ui.querySelector('div.container-fluid');
step.$step = scopeQuery.scopeSelector(step.ui);

step.$step = scopeQuery.scopeSelector(step.ui); // Shorthand methods for scoped DOM queries. Read the docs [CONTRIBUTING.md](https://github.com/publiclab/image-sequencer/blob/main/CONTRIBUTING.md) for more info.
step.$stepAll = scopeQuery.scopeSelectorAll(step.ui);
let {$step, $stepAll} = step;
step.linkElements = step.ui.querySelectorAll('a');
step.imgElement = $step('a img.img-thumbnail')[0];

step.linkElements = step.ui.querySelectorAll('a'); // All the anchor tags in the step UI
step.imgElement = $step('a img.img-thumbnail')[0]; // The output image

if (_sequencer.modulesInfo().hasOwnProperty(step.name)) {
var inputs = _sequencer.modulesInfo(step.name).inputs;
var outputs = _sequencer.modulesInfo(step.name).outputs;
var merged = Object.assign(inputs, outputs); // combine outputs w inputs
var merged = Object.assign(inputs, outputs); // Combine outputs with inputs

for (var paramName in merged) {
var isInput = inputs.hasOwnProperty(paramName);
Expand All @@ -103,7 +105,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
else {
let paramVal = step.options[paramName] || inputDesc.default;

if (inputDesc.id == 'color-picker') { // separate input field for color-picker
if (inputDesc.id == 'color-picker') { // Separate input field for color-picker
html +=
'<div id="color-picker" class="input-group colorpicker-component">' +
'<input class="form-control target" type="' +
Expand All @@ -114,7 +116,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
paramVal + '">' + '<span class="input-group-addon"><i></i></span>' +
'</div>';
}
else { // use this if the the field isn't color-picker
else { // Non color-picker input types
html =
'<input class="form-control target" type="' +
inputDesc.type +
Expand Down Expand Up @@ -156,10 +158,10 @@ function DefaultHtmlStepUi(_sequencer, options) {
</div>';
$step('div.details').append(div);
}
$step('div.panel-footer').append(
$step('div.panel-footer').append( // Save button
'<div class="cal collapse in"><button type="submit" class="btn btn-sm btn-default btn-save" disabled = "true" >Apply</button> <small style="padding-top:2px;">Press apply to see changes</small></div>'
);
$step('div.panel-footer').prepend(
$step('div.panel-footer').prepend( // Markup for tools: download and insert step buttons
'<button class="pull-right btn btn-default btn-sm insert-step" >\
<span class="insert-text"><i class="fa fa-plus"></i> Insert Step</span><span class="no-insert-text" style="display:none">Close</span></button>\
<button class="pull-right btn btn-default btn-sm download-btn" style="margin-right:2px" >\
Expand All @@ -174,9 +176,10 @@ function DefaultHtmlStepUi(_sequencer, options) {
parser.parseFromString(tools, 'text/html').querySelector('div')
);

$stepAll('.remove').on('click', function() {notify('Step Removed', 'remove-notification');});
$step('.insert-step').on('click', function() { util.insertStep(step.ID); });
$stepAll('.remove').on('click', function() {notify('Step Removed', 'remove-notification');}); // Notification on removal of a step
$step('.insert-step').on('click', function() { util.insertStep(step.ID); }); // Insert a step in between the sequence
// Insert the step's UI in the right place

if (stepOptions.index == _sequencer.steps.length) {
stepsEl.appendChild(step.ui);
$('#steps .step-container:nth-last-child(1) .insert-step').prop('disabled', true);
Expand All @@ -193,8 +196,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
else $('#load-image .insert-step').prop('disabled', true);
}
else {
$('#load-image').append(step.ui);

$('#load-image').append(step.ui); // Default UI without extra tools for the first step(load image)

$step('div.panel-footer').prepend( `
<button class="right btn btn-default btn-sm insert-step" disabled="true">
Expand All @@ -205,12 +207,12 @@ function DefaultHtmlStepUi(_sequencer, options) {

$step('.insert-step').on('click', function() { util.insertStep(step.ID); });
}
$step('.toggle').on('click', () => {
$step('.toggle').on('click', () => { // Step container dropdown
$step('.toggleIcon').toggleClass('rotated');
$stepAll('.cal').collapse('toggle');
});

$(step.imgElement).on('mousemove', _.debounce(() => imageHover(step), 150));
$(step.imgElement).on('mousemove', _.debounce(() => imageHover(step), 150)); // Shows the pixel coordinates on hover
$(step.imgElement).on('click', (e) => {e.preventDefault(); });
$stepAll('#color-picker').colorpicker();

Expand All @@ -227,15 +229,23 @@ function DefaultHtmlStepUi(_sequencer, options) {
});
_sequencer.run({ index: step.index - 1 });

// modify the url hash
// Modify the URL hash
urlHash.setUrlHashParameter('steps', _sequencer.toString());
// disable the save button
// Disable the save button
$step('.btn-save').prop('disabled', true);
optionsChanged = false;
changedInputs = 0;
}
}

/**
* @method handleInputValueChange
* @description Enables the save button on input change
* @param {*} currentValue The current value of the input
* @param {*} initValue The initial/old value of the input
* @param {Boolean} hasChangedBefore Whether the input was changed before
* @returns {Boolean} True if the value has changed
*/
function handleInputValueChange(currentValue, initValue, hasChangedBefore) {
var inputChanged = !(isNaN(initValue) || isNaN(currentValue) ? currentValue === initValue : currentValue - initValue === 0);
changedInputs += hasChangedBefore ? inputChanged ? 0 : -1 : inputChanged ? 1 : 0;
Expand Down Expand Up @@ -293,7 +303,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
step.linkElements[index].href = step.imgElement.src;
}

// TODO: use a generalized version of this
// TODO: use a generalized version of this.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this means?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IDK. Whoever added the TODO must know.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did! I meant that we might use a standard lib to determine file extensions, rather then a one-off function I made up 😄

function fileExtension(output) {
return output.split('/')[1].split(';')[0];
}
Expand All @@ -314,7 +324,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
}
});

// fill inputs with stored step options
// Fill inputs with stored step options
if (_sequencer.modulesInfo().hasOwnProperty(step.name)) {
var inputs = _sequencer.modulesInfo(step.name).inputs;
var outputs = _sequencer.modulesInfo(step.name).outputs;
Expand Down Expand Up @@ -353,6 +363,12 @@ function DefaultHtmlStepUi(_sequencer, options) {
else $step('.wasm-tooltip').fadeOut();
}

/**
* @method imageHover
* @description Handler to display image coordinates on hover.
* @param {Object} step Current step variable
* @returns {Null}
*/
function imageHover(step){

var img = $(step.imgElement);
Expand Down Expand Up @@ -388,6 +404,13 @@ function DefaultHtmlStepUi(_sequencer, options) {
return step.imgElement;
}

/**
* @method notify
* @description General purpose DOM toast notification
* @param {String} msg Message to be displayed
* @param {String} id A unique identifier for the notification
* @returns {Null}
*/
function notify(msg, id){
if ($('#' + id).length == 0) {
var notification = document.createElement('span');
Expand Down
Loading