Monthly Archives: August 2018

Work stuff

DropzoneJs 5.5 & Thumbnail Problems

Leave a comment

DropzoneJs is a very good JavaScript upload script and flexible.

Too bad, upgrade is something a bit tricky and make existing script not work.  Well I would not complain if there is a good document, but there is not.

Problem with thumbnail not display when retrieve existing file. It used to be function createThumbnailFromUrl.  The parameter has changed so this solution does work

dz is your Dropzone object. The key is to have dataURL set on your file.

var thumb = { name: filename, size: 0, dataURL: ‘/upload-directory/’ + ‘filename’ };
dz.files.push(thumb);

// Call the default addedfile event handler
dz.emit(‘addedfile’, thumb);

dz.createThumbnailFromUrl(thumb,
dz.options.thumbnailWidth, dz.options.thumbnailHeight,
dz.options.thumbnailMethod, true, function (thumbnail) {
dz.emit(‘thumbnail’, thumb, thumbnail);
});

// Make sure that there is no progress bar, etc…
dz.emit(‘complete’, thumb);

Work stuff

jQuery Toggle/Manipulate FontAwesome 5

Leave a comment

FontAwesome is great, but after upgrade to 5, there are prefix types (far, fas, fab) added and then the way to render with SVG/JS to make its mess.  There are 2 types of use, but SVG/JS is way better in advance features to decorate the icons.

Not sure if it’s only me that seems the manual/instruction on how to manipulate the font awesome using SVG/JS does not work as promise. I have to figure it out myself.

So here is my solutions

This is jQuery toggle function to change from <i class=”fas fa-plus-circle”></i> to <i class=”fas fa-minus-circle”></i> icon

jQuery('.btn').on("click", function(){
   jQuery(this).find('[data-fa-i2svg]')
       .attr('data-prefix', 'fas');
    if (jQuery(this).find('[data-fa-i2svg]')
       .attr('data-icon') == 'minus-circle') {
         jQuery(this).find('[data-fa-i2svg]')
           .removeClass('fa-minus-circle')
           .addClass('fa-plus-circle')
           .attr('data-icon', 'plus-circle');
   }else{
         jQuery(this).find('[data-fa-i2svg]')
           .removeClass('fa-plus-circle')
           .addClass('fa-minus-circle')
           .attr('data-icon', 'minus-circle');
   }
});

Explanation:

  1. There are 2 elements that shared ‘data-fa-i2svg’ attribute (<i> and <svg>)
  2. You have to find the element with attribute ‘data-fa-i2svg’ then  add/remove class with original FontAwesome class which starts with fa-xxxxx.
  3. Change the attribute ‘data-icon’ to the FontAwesome class (eliminate the fa- prefix)
  4. Last thing, change the attribute ‘data-prefix'  to make it correct prefix type for each icon.