Категорія: Javascript

An alternative solution to a problem when Safari does not support the download attribute

Березень 21, 2018 by admin

 toDataURL = (url, callback) => {
    const xhr = new XMLHttpRequest();
    xhr.onload = function () {
      const reader = new FileReader();
      reader.onloadend = function () {
        callback(reader.result.replace(/^data:image\/\w+;base64,/, ''));
      }
      reader.readAsDataURL(xhr.response);
    };
    xhr.open('GET', url);
    xhr.responseType = 'blob';
    xhr.send();
  }

  downloadImage = (file) => {
    const { name, url, file_type } = file;
    const fileType = file_type.split('/')[1];
    const link = document.createElement('a');
    link.style = 'position: fixed; left -10000px;';
    link.download = /\.\w+/.test(name) ? name : `${name}.${fileType}`;
    this.toDataURL(url, function (dataUrl) {
      link.href = `data:application/octet-stream;base64,${dataUrl}`;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    });
  };

  handleDownloadButton = (file) => {
    const imageTypes = ['bmp', 'ico', 'mp3', 'pdf', 'png', 'jpg', 'jpeg', 'gif', 'svg'];
    const { name, file_type, url } = file;
    const fileType = file_type.split('/')[1];
    const isSafari = navigator.userAgent.indexOf('Safari') !== -1;

    if (isSafari && (imageTypes.includes(fileType))) {
      this.downloadImage(file);
    } else {
      const link = document.createElement('a');
      link.download = name;
      link.href = url;
      link.click();
    }
  };

toDataURL = (url, callback) => {

const xhr = new XMLHttpRequest();

xhr.onload = function () {

const reader = new FileReader();

reader.onloadend = function () {

callback(reader.result.replace(/^data:image\/\w+;base64,/, ''));

}

reader.readAsDataURL(xhr.response);

};

xhr.open('GET', url);

xhr.responseType = 'blob';

xhr.send();

}

downloadImage = (file) => {

const { name, url, file_type } = file;

const fileType = file_type.split('/')[1];

const link = document.createElement('a');

link.style = 'position: fixed; left -10000px;';

link.download = /\.\w+/.test(name) ? name : `${name}.${fileType}`;

this.toDataURL(url, function (dataUrl) {

link.href = `data:application/octet-stream;base64,${dataUrl}`;

document.body.appendChild(link);

link.click();

document.body.removeChild(link);

});

};

handleDownloadButton = (file) => {

const imageTypes = ['bmp', 'ico', 'mp3', 'pdf', 'png', 'jpg', 'jpeg', 'gif', 'svg'];

const { name, file_type, url } = file;

const fileType = file_type.split('/')[1];

const isSafari = navigator.userAgent.indexOf('Safari') !== -1;

if (isSafari && (imageTypes.includes(fileType))) {

this.downloadImage(file);

} else {

const link = document.createElement('a');

link.download = name;

link.href = url;

link.click();

}

};

const file = ...
...
<span
  className={'react-grid-Cell-download'}
  style={editIcon}
  key={`downloadFile${id}`}
  onClick={() => this.handleDownloadButton(file)}
>

const file = ...

...

<span

className={'react-grid-Cell-download'}

style={editIcon}

key={`downloadFile${id}`}

onClick={() => this.handleDownloadButton(file)}

Ajax

Січень 15, 2018 by admin

JavaScript:

function check_conference_import_spreadsheet_status(url) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);

    xhr.onreadystatechange = function () {
        if (this.readyState != 4) return;

        if (this.status == 200) {
            var response = JSON.parse(this.responseText);
            if (response.status != 'in_processing') {
                location.reload();
            }
            return;
        }
    }
    xhr.send();
}

function check_conference_import_spreadsheet_status(url) {

var xhr = new XMLHttpRequest();

xhr.open('GET', url, true);

xhr.onreadystatechange = function () {

if (this.readyState != 4) return;

if (this.status == 200) {

var response = JSON.parse(this.responseText);

if (response.status != 'in_processing') {

location.reload();

}

return;

}

xhr.send();

}

Jquery

Добавляємо class до картинки, яку вставляємо в CKEditor’і

Вересень 29, 2017 by admin

ckeditor/config.js

CKEDITOR.on( 'dialogDefinition', function( ev )
{
  var dialogName = ev.data.name;
  var dialogDefinition = ev.data.definition;

  if ( dialogName == 'image' )
  {
    var advTab = dialogDefinition.getContents( 'advanced' );
    var urlField = advTab.get( 'txtGenClass' );
    urlField['default'] = 'new_class_for_image';
  }
});

CKEDITOR.on( 'dialogDefinition', function( ev )

{

var dialogName = ev.data.name;

var dialogDefinition = ev.data.definition;

if ( dialogName == 'image' )

{

var advTab = dialogDefinition.getContents( 'advanced' );

var urlField = advTab.get( 'txtGenClass' );

urlField['default'] = 'new_class_for_image';

}

});

SergeLand Image Zoomer

Вересень 9, 2017 by admin

SergeLand Image Zoomer – безкоштовний jQuery плагін емуляції зображення екранної лупи

Send form when press enter

Серпень 9, 2017 by admin

Example

$(document).ready(function() {
  $('.submit_on_enter').keydown(function(event) {
    if (event.keyCode == 13) {
      $('#form_id').submit();
      return false;
    }
  });

});

$(document).ready(function() {

$('.submit_on_enter').keydown(function(event) {

if (event.keyCode == 13) {

$('#form_id').submit();

return false;

}

});

jQuery Validation Plugin on Rails

Серпень 4, 2017 by admin

Приклад використання валідації на стороні клієнта за допомогою плагіна jQuery Validation в Rails

Gemfile

gem 'jquery-validation-rails'

1 2	gem 'jquery-validation-rails'

app/assets/javascripts/application.js

//= require jquery.validate

1 2	//= require jquery.validate

$("#form_call").validate({
    debug: true,
    rules: {
      "contact[name]": {required: true},
      "contact[phone]": {required: true},
      "contact[message]": {required: true}
    },
    messages: {
      "contact[name]": "Введіть ваше ім'я",
      "contact[phone]": "Введіть номер телефону",
      "contact[message]": "Введіть текст повідомлення",
    }
  });

$("#form_call").validate({

debug: true,

rules: {

"contact[name]": {required: true},

"contact[phone]": {required: true},

"contact[message]": {required: true}

messages: {

"contact[name]": "Введіть ваше ім'я",

"contact[phone]": "Введіть номер телефону",

"contact[message]": "Введіть текст повідомлення",

}

});

JavaScript: inspect Object

Березень 6, 2017 by admin

console.dir(JSON.parse(JSON.stringify(object)));

1	console.dir(JSON.parse(JSON.stringify(object)));

Submit form with delay while entering data into input or select field

Січень 9, 2017 by admin

I have to submit form by ajax, and I wanеd set delay before submit my entering data but only when I put in input field. When I change in select field, form submit at once

var timerid;
$(document).on('input change',".mode_cost_update", function(e) {
	form_id = "#edit_model_cost_"+$(this).data('id');

	type=$(this).get(0).tagName;
	// For select submit at once
	if (type=='SELECT')
	{
		$(form_id).submit();	
	}
	// For other submit after 1s
	else
	{
		clearTimeout(timerid);
		timerid = setTimeout(function() { $(form_id).submit(); }, 1000);
	}
});

var timerid;

$(document).on('input change',".mode_cost_update", function(e) {

form_id = "#edit_model_cost_"+$(this).data('id');

type=$(this).get(0).tagName;

// For select submit at once

if (type=='SELECT')

{

$(form_id).submit();

}

// For other submit after 1s

else

{

clearTimeout(timerid);

timerid = setTimeout(function() { $(form_id).submit(); }, 1000);

}

});

How to change the css of color of select2 tag

Січень 9, 2017 by admin

For instance, we have select with id="element id" and we have to set red color for text

#select2-element_id-container {
  color: red;
}
#select2-element_id-container .select2-selection__placeholder
{
  color: red;
}

#select2-element_id-container {

color: red;

}

#select2-element_id-container .select2-selection__placeholder

{

color: red;

}

select2 для select отриманого у відповіль на AJAX-запит

Січень 9, 2017 by admin

Завів окремий клас filter_select для селектів, які мають бути select2

$(".filter_select" ).select2({
  theme: "bootstrap"
});

$(".filter_select" ).select2({

theme: "bootstrap"

});

Проблема виникла, коли я селект із цим класом отримую як відповідь на ajax-запит. В результаті маємо select із класом select2, але функціонал не діє, використати document on не можем, так як дії немає

Вирішив проблему наступним чином

$(document).ajaxComplete(function() {
  $(".filter_select" ).select2({
    theme: "bootstrap"
  });	
});

$(document).ajaxComplete(function() {

$(".filter_select" ).select2({

theme: "bootstrap"

});

Веб-Розробка

WebDevelop

Category Archives: Javascript

An alternative solution to a problem when Safari does not support the download attribute

Ajax

Добавляємо class до картинки, яку вставляємо в CKEditor’і

SergeLand Image Zoomer

Send form when press enter

jQuery Validation Plugin on Rails

JavaScript: inspect Object

Submit form with delay while entering data into input or select field

How to change the css of color of select2 tag

select2 для select отриманого у відповіль на AJAX-запит