Created
June 28, 2017 11:26
-
-
Save batigolix/91d5f1931a4f3d484129b54067f94562 to your computer and use it in GitHub Desktop.
drupal 8 attached library & js settings to form element
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$form['interval'] = [ | |
'#type' => 'textfield', | |
'#title' => $this->t('Reactivation interval'), | |
'#description' => $this->t(''), | |
'#maxlength' => 64, | |
'#size' => 64, | |
'#default_value' => $config->get('interval'), | |
'#suffix' => "<div class='description' id='human-interval'></div>", | |
'#description'=> $this->('Period after which account must be reactivated. Must be entered in days.'), | |
'#attached' => [ | |
'library' => [ | |
'extraccount/human-interval', | |
], | |
'drupalSettings' => [ | |
'label' => $this->t('Period after which account must be reactivated. Must be entered as seconds. Current value corresponds with @days days, @hours hours, @minutes minutes and @seconds seconds.'), | |
'seconds' => $config->get('interval'), | |
], | |
], | |
]; | |
modulename.libraries.yml | |
human-interval: | |
version: 1.x | |
js: | |
js/human-interval.js: {} | |
dependencies: | |
- core/jquery | |
- core/jquery.once | |
- core/drupal | |
- core/drupalSettings | |
js: | |
/** | |
* @file | |
* Provides a timestamp in human readable format. | |
*/ | |
(function ($, Drupal) { | |
Drupal.behaviors.human_interval = { | |
attach: function (context, settings) { | |
// console.log('asdsadsa'); | |
//console.log(drupalSettings.tets); | |
// | |
// console.log(document.getElementById('human-interval').value); | |
// var max = 1; | |
var label = drupalSettings.label; | |
var seconds = drupalSettings.seconds; | |
var humanInterval = secondsToString(seconds); | |
console.log(humanInterval); | |
var displayed_label = label.replace('@days', humanInterval.numdays).replace('@hours', humanInterval.numhours).replace('@minutes', humanInterval.numminutes).replace('@seconds', humanInterval.numseconds); | |
//var label = 'saasd'; | |
jQuery('#human-interval').html(displayed_label); | |
jQuery('#edit-interval').keyup(function () { | |
//var len = jQuery(this).val().length; | |
//var char = max - len; | |
seconds = jQuery(this).val(); | |
humanInterval = secondsToString(seconds); | |
console.log(humanInterval); | |
//displayed_label = label.replace('@days', humanInterval.numdays); | |
displayed_label = label.replace('@days', humanInterval.numdays).replace('@hours', humanInterval.numhours).replace('@minutes', humanInterval.numminutes).replace('@seconds', humanInterval.numseconds); | |
//days = secondsToString(seconds); | |
// | |
//var displayed_label = label.replace('@days', days); | |
jQuery('#human-interval').html(displayed_label); | |
}); | |
function secondsToString(seconds) { | |
var humanInterval = { | |
numdays: Math.floor(seconds / 86400), | |
numhours: Math.floor((seconds % 86400) / 3600), | |
numminutes: Math.floor(((seconds % 86400) % 3600) / 60), | |
numseconds: ((seconds % 86400) % 3600) % 60 | |
}; | |
return humanInterval; | |
//return numdays + " days " + numhours + " hours " + numminutes + " minutes " + numseconds + " seconds"; | |
} | |
//var unixtime = 1301090400; | |
// | |
//var newDate = new Date(); | |
//newDate.setTime(unixtime * 1000); | |
//dateString = newDate.toUTCString(); | |
// | |
////document.getElementById("time").innerHTML = dateString; | |
// | |
// | |
//jQuery('#print-link').click(function () { | |
// window.print(); | |
//}); | |
} | |
} | |
})(jQuery, Drupal); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment