Jump to content
bernhard

[solved] why is $li.trigger('opened'); fired twice in the pw admin?

Recommended Posts

please see this screencast. i have two questions:

  1. dou you also experience the bug related to inputfield toggles that i demonstrate at 0:09 ? one does not see it clearly but i click the inputfield but the field does not get collapsed. i have this in all my installations. you have to click the chevron icon on the right first. after you clicked it once you can click everywhere on the inputfields label to toggle it.
  2. why is the opened and openReady event fired twice? i tried to understand the code but i have no explanation yet.
    the trigger is here: https://github.com/ryancramerdesign/ProcessWire/blob/master/wire/templates-admin/scripts/inputfields.js#L1018
    i put a console.log() here: https://github.com/ryancramerdesign/ProcessWire/blob/master/wire/templates-admin/scripts/inputfields.js#L1000 (fired only once)
    but if i catch the opened event like this, i always get 2 logs:
	<script>
	$(document).on('opened', 'li', function(e) {
		console.log('opened!');
		console.log($(e.target));
	});
	$(document).on('openReady', 'li', function() {
		console.log('openReady!');
	});
	</script>

i thought maybe the event is fired on different li elements, but e.target returns the same element...

 

  • Like 1

Share this post


Link to post
Share on other sites
8 hours ago, bernhard said:

but i click the inputfield but the field does not get collapsed. i have this in all my installations. you have to click the chevron icon on the right first. after you clicked it once you can click everywhere on the inputfields label to toggle it.

+1 and it also flashes a few times instead of closing it.

 

  • Like 1

Share this post


Link to post
Share on other sites

The first part is intended

// https://github.com/ryancramerdesign/ProcessWire/blob/a210ba0b5ea67e56fef8a27a620bcfa6f96ca0b8/wire/templates-admin/scripts/inputfields.js#L999
$(document).on('click', '.InputfieldStateToggle, .toggle-icon', function() {

  var $t = $(this); // clicked element, either label or the icon
  var $li = $t.closest('.Inputfield');
  var isIcon = $t.hasClass('toggle-icon');  // is the clicked element the icon?
  var $icon = isIcon ? $t : $li.children('.InputfieldHeader, .ui-widget-header').find('.toggle-icon'); // the icon
  // initially the $li doesn't have the classes InputfieldStateCollapsed and InputfieldStateWasCollapsed
  // they are added by clicking the toggle icon
  var isCollapsed = $li.hasClass("InputfieldStateCollapsed"); 
  var wasCollapsed = $li.hasClass("InputfieldStateWasCollapsed");
  if($li.hasClass('InputfieldAjaxLoading')) return false;
  ...
  if(isCollapsed || wasCollapsed || isIcon) { // all are false when clicking the label
  ...
  // https://github.com/ryancramerdesign/ProcessWire/blob/a210ba0b5ea67e56fef8a27a620bcfa6f96ca0b8/wire/templates-admin/scripts/inputfields.js#L1035
  } else {
    if(typeof jQuery.ui != 'undefined') {
      var color1 = $icon.css('color');
      var color2 = $li.children('.InputfieldHeader, .ui-widget-header').css('color'); 
      $icon.css('color', color2);
      // the flashing icon 
      $icon.effect('pulsate', 300, function () {
        $icon.css('color', color1);
      });
    }
    if(!$li.hasClass('InputfieldNoFocus')) $li.find(":input:visible:eq(0)").focus();
  }
    

 

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...