Javascript

Solution to no CSS source map file generated under production mode in Webpack 4

The issue is in Webpack 4 under "production" mode there is no source map file generated only for CSS (no problem in javascript source map file) but there is no issue in generation of source map for CSS under "development" mode.

Here are my previous configurations:

package.json

Override a CKEditor notification message

There are some applications that needs changing the default notification message of a CKEditor plugin. Like this case, I have application that needs to check the size of a file being uploaded against the maximum file size limit allowed on a Drupal site and the upload should abort if it exceeds. Using this upload.abort(); method will display "Upload aborted by the user." notification message which obviously not applicable to the situation. The following code snippet will override the notification generated by uploadwidget plugin:

Adding external javascript library available to all pages with query string value came from PHP in Drupal 8

In Drupal 7, adding external javascript library available to all pages with query string value came either from PHP computed value or from database this can be done by:

  
/**
 * Implements hook_init()
 */
function mymodule_init() {
  drupal_add_js('//maps.googleapis.com/maps/api/js?key=' . variable_get('mymodule_google_map_api_key', NULL), 'external');
}
  

For Drupal 8 this is possible by:

Passing data from PHP to javascript variable available to all pages in Drupal 8

Most of us pass data from PHP to javascript variable available to all pages in Drupal 7 is by:

  
/**
 * Implements hook_init()
 */
function mymodule_init() {
  $computed_data = mymodule_get_data();
  drupal_add_js(array('mymodule_computed_data' => $computed_data), 'setting');
}
  

We can access this data in javascript by:

Twitter Bootstrap 3 navbar collapse button not working in Drupal Panolopoly site fix

As of this writing Drupal Panolopoly (version 7.x-1.30) recommended jQuery version is 1.7. Changing to its higher version, you will encounter some strange behavior in javascript enhanced widgets and menus on your site (still a limitation of Drupal Panolopoly is at most jQuery version is 1.7). However, the Twitter Bootstrap 3 minimum jQuery version is 1.9.0. Having the jQuery version set to 1.7, the only strange behavior I have encountered so far in Bootstrap theme is the navbar collapse button which it is not working.

Efficient way to target the outer HTML element in jQuery

Given the HTML structure below. The goal is to modify the inner text of closest outer div tag with "log" class when an anchor tag is clicked. For example when the anchor tag with content "3a" is clicked, the div tag with "log" class inside the div wrapper with "content-a" class inner text should have a value of "3a clicked".

HTML: