Magento 2 Documentation  2.3
Documentation for Magento 2 CMS v2.3 (December 2018)
edit.phtml
Go to the documentation of this file.
1 <?php
7 // @codingStandardsIgnoreFile
8 
9 ?>
10 <?php
19 ?>
20 <style>
21  .highlighted {
22  background-color: #DFF7FF!important;
23  }
24 </style>
25 <form action="<?= /* @escapeNotVerified */ $block->getSaveUrl() ?>" method="post" id="config-edit-form" enctype="multipart/form-data">
26  <?= $block->getBlockHtml('formkey') ?>
27  <div class="accordion">
28  <?= $block->getChildHtml('form') ?>
29  </div>
30 </form>
31 <script>
32 require([
33  "jquery",
34  "uiRegistry",
35  "mage/mage",
36  "prototype",
37  "mage/adminhtml/form",
38  "domReady!",
39  "jquery/ui"
40 ], function(jQuery, registry){
41 
42  var adminSystemConfig = {
43  navigateToElement: function (searchRequest) {
44  if ('section' in searchRequest) {
45  var section = searchRequest.section;
46  }
47  if ('group' in searchRequest) {
48  var group = searchRequest.group;
49  }
50  if ('field' in searchRequest) {
51  var field = searchRequest.field;
52  }
53  if (typeof section === 'undefined') {
54  return;
55  }
56  if (typeof group !== 'undefined') {
57  var groupElement = jQuery('#' + section + '_' + group);
58 
59  var parentSection = groupElement.parents('.section-config');
60  parentSection.addClass('highlighted');
61  setTimeout(function() {
62  parentSection.removeClass('highlighted', 2000, "easeInBack");
63  }, 3000);
64  if (!parentSection.hasClass('active')) {
65  Fieldset.toggleCollapse(section + '_' + group);
66  }
67  }
68  },
69  getUp: function (element, tag) {
70  var $element = Element.extend(element);
71  if (typeof $element.upTag == 'undefined') {
72  $element.upTag = {};
73  }
74  if (typeof $element.upTag[tag] == 'undefined') {
75  $element.upTag[tag] = Element.extend($element.up(tag));
76  }
77  return $element.upTag[tag];
78  },
79  getUpTd: function (element) {
80  return this.getUp(element, 'td');
81  },
82  getUpTr: function (element) {
83  return this.getUp(element, 'tr');
84  },
85  getScopeElement: function(element) {
86  var $element = Element.extend(element);
87  if (typeof $element.scopeElement == 'undefined') {
88  var scopeElementName = element.getAttribute('name').replace(/\[value\]$/, '[inherit]');
89  $element.scopeElement = this.getUpTr(element).select('input[name="' + scopeElementName + '"]')[0];
90  if (typeof $element.scopeElement == 'undefined') {
91  $element.scopeElement = false;
92  }
93  }
94  return $element.scopeElement;
95  },
96  getDeleteElement: function(element) {
97  var $element = Element.extend(element);
98  if (typeof $element.deleteElement == 'undefined') {
99  $element.deleteElement = this.getUpTd(element)
100  .select('input[name="'+ element.getAttribute('name') + '[delete]"]')[0];
101  if (typeof $element.deleteElement == 'undefined') {
102  $element.deleteElement = false;
103  }
104  }
105  return $element.deleteElement;
106  },
107  mapClasses: function(element, full, callback, classPrefix) {
108  if (typeof classPrefix == 'undefined') {
109  classPrefix = 'shared'
110  }
111  element.classNames().each(function(className) {
112  if (className.indexOf(classPrefix + '-') == 0
113  || (full && className.indexOf(classPrefix + '_') == 0)
114  ) {
115  callback(className);
116  }
117  });
118  },
119  getRegisteredEvents: function(element) {
120  var events = [];
121  var registry = Element.retrieve(Element.extend(element), 'prototype_event_registry');
122  if (!registry) {
123  return events;
124  }
125  registry.each(function(pair) {
126  var eventName = pair.key;
127  if (!eventName) {
128  return;
129  }
130  var responders = registry.get(eventName);
131  if (!responders) {
132  return;
133  }
134  responders.each(function(responder) {
135  if (!responder.handler) {
136  return;
137  }
138  events.push({
139  'eventName': eventName,
140  'handler': responder.handler
141  });
142  });
143  });
144  return events;
145  },
146  onchangeSharedElement: function(event) {
147  var element = Element.extend(Event.element(event));
148  adminSystemConfig.mapClasses(element, true, function(className) {
149  $$('.' + className).each(function(el) {
150  if (element == el) {
151  return;
152  }
153 
154  var tagName = el.tagName.toLowerCase();
155  if (tagName == 'input' && el.getAttribute('type') == 'file') {
156  var $el = Element.extend(el);
157  var events = adminSystemConfig.getRegisteredEvents(el);
158  $el.stopObserving('change');
159  var elId = $el.id;
160  $el.replace($el.outerHTML);
161  events.each(function(event) {
162  Event.observe(Element.extend(document.getElementById(elId)), event.eventName, event.handler);
163  });
164  } else {
165  el.stopObserving('change', adminSystemConfig.onchangeSharedElement);
166  if (tagName == 'input' && el.getAttribute('type') == 'checkbox') {
167  if (el.checked != element.checked) {
168  Element.extend(el).click();
169  }
170  } else if (tagName == 'select') {
171  var $el = Element.extend(el);
172  Element.extend(element).select('option').each(function(option) {
173  var relatedOption = $el.select('option[value="' + option.value + '"]')[0];
174  if (typeof relatedOption != 'undefined') {
175  relatedOption.selected = option.selected;
176  }
177  });
178  } else {
179  el.value = element.getValue();
180  }
181  if (Element.extend(el).requiresObj) {
182  Element.extend(el).requiresObj.indicateEnabled();
183  }
184  fireEvent(el, 'change');
185  Event.observe(el, 'change', adminSystemConfig.onchangeSharedElement);
186  }
187  });
188  });
189  },
190  checkRequired: function(element, callback) {
191  var tagName = this.tagName.toLowerCase();
192  if (tagName != 'fieldset') {
193  if (adminSystemConfig.getUpTr(this).visible()) {
194 
195  if (this.hasClassName('not-required')) {
196  return;
197  }
198 
199  var typeAttr = null;
200  if (tagName == 'input') {
201  typeAttr = this.getAttribute('type').toLowerCase();
202  }
203  var valueIsEmpty = false;
204  var scopeElement = adminSystemConfig.getScopeElement(this);
205  if (!scopeElement || !scopeElement.checked) {
206  if (typeAttr == 'file') {
207  var deleteUploadedElement = adminSystemConfig.getDeleteElement(this);
208  valueIsEmpty = !deleteUploadedElement && this.value == ''
209  || deleteUploadedElement && deleteUploadedElement.checked;
210  }
211  valueIsEmpty = valueIsEmpty
212  || (typeAttr == 'text' || typeAttr == 'password') && this.value == ''
213  || (tagName == 'select') && (this.getAttribute('multiple') != null)
214  && this.getValue().length == 0
215  || (tagName == 'select') && (this.getAttribute('multiple') == null)
216  && this.getValue() == null;
217  }
218 
219  if (valueIsEmpty) {
220  if (element.value != 0) {
221  element.value = 0;
222  fireEvent(element, 'change');
223  }
224  element.disable();
225  }
226  }
227  } else {
228  this.select('input,select').each(function(inputElement) {
229  adminSystemConfig.checkRequired.call(Element.extend(inputElement), element, callback);
230  });
231  }
232  callback(this);
233  }
234  };
235 
236  window.configForm = jQuery('#config-edit-form').mage('form').mage('validation', {
237  submitHandler: function(form)
238  {
239  $$('.requires').each(function(element) {
240  var scopeElement = adminSystemConfig.getScopeElement(element);
241  if (!scopeElement || !scopeElement.checked) {
242  Element.extend(element).disabled = false;
243  }
244  });
245  jQuery(form).trigger('afterValidate');
246  form.submit();
247  }
248  });
249 
250  $$('.shared').each(function(element){
251  Event.observe(element, 'change', adminSystemConfig.onchangeSharedElement);
252 
253  // scope should be shared together with the field
254  var scopeElement = adminSystemConfig.getScopeElement(element);
255  if (scopeElement) {
256  adminSystemConfig.mapClasses(element, false, function(className) {
257  scopeElement.addClassName('shared_scope-' + className.substr(7));
258  });
259  Event.observe(scopeElement, 'change', adminSystemConfig.onchangeSharedElement);
260  }
261 
262  // file fields should share deletion
263  if (element.tagName.toLowerCase() == 'input' && element.getAttribute('type') == 'file') {
264  var deleteUploadedElement = adminSystemConfig.getDeleteElement(element);
265  if (deleteUploadedElement) {
266  adminSystemConfig.mapClasses(element, false, function(className) {
267  deleteUploadedElement.addClassName('shared_delete-' + className.substr(7));
268  });
269  Event.observe(deleteUploadedElement, 'change', adminSystemConfig.onchangeSharedElement);
270  }
271  }
272 
273  // process situation, when control is complex
274  adminSystemConfig.mapClasses(element, true, function(className) {
275  var controls = adminSystemConfig.getUpTd(element).select('.' + className);
276  if (controls.length < 2) {
277  return;
278  }
279 
280  var counter = 0;
281  controls.each(function(controlElement) {
282  controlElement.removeClassName(className);
283  controlElement.addClassName('shared_' + counter + className.substr(6));
284  counter++;
285  });
286  });
287  });
288 
289  $$('.requires').each(function(element) {
290  var eventObj = {
291  'element': Element.extend(element),
292  'requires': [],
293  'callback': function(required) {},
294  checkRequirements: function() {
295  var scopeElement = adminSystemConfig.getScopeElement(eventObj.element);
296  if (!scopeElement || !scopeElement.checked) {
297  eventObj.element.enable();
298  eventObj.requires.each(function(required) {
299  adminSystemConfig.checkRequired.call(Element.extend(required), eventObj.element, eventObj.callback);
300  }.bind(this));
301  }
302  },
303  keydownCheckRequirements: function() {
304  window.setTimeout(eventObj.checkRequirements, 1);
305  },
306  bindCheckingObserver: function(element) {
307  if (element.tagName.toLowerCase() == 'fieldset') {
308  Element.extend(element).select('input,select').each(function(subElement) {
309  eventObj.bindCheckingObserver(subElement);
310  })
311  } else {
312  var scopeElement = adminSystemConfig.getScopeElement(element);
313  if (scopeElement) {
314  Event.observe(scopeElement, 'click', eventObj.checkRequirements);
315  }
316  Event.observe(element, 'change', eventObj.checkRequirements);
317  Event.observe(element, 'keydown', eventObj.keydownCheckRequirements);
318  }
319  },
320  indicateEnabled: function() {
321  var labelElement = adminSystemConfig.getUpTr(eventObj.element).select('td.label label')[0];
322  if (typeof labelElement != 'undefined') {
323  if (eventObj.element.value == 1) {
324  labelElement.addClassName('enabled');
325  } else {
326  labelElement.removeClassName('enabled');
327  }
328  }
329  }
330  };
331 
332  // fill eventObj with required elements
333  adminSystemConfig.mapClasses(element, false, function(className) {
334  var requiredElement = Element.extend(document.getElementById(className.substr(9)));
335  if (requiredElement) {
336  eventObj.requires.push(requiredElement);
337  }
338  }, 'requires');
339  Element.extend(element).requiresObj = eventObj;
340 
341  // replacing "Use Default" action with checking requirements
342  var scopeElement = adminSystemConfig.getScopeElement(element);
343  if (scopeElement) {
344  Event.stopObserving(scopeElement, 'click');
345  Event.observe(scopeElement, 'click', function(event) {
346  toggleValueElements(scopeElement, Element.previous(scopeElement.parentNode));
347  eventObj.checkRequirements();
348  });
349  }
350 
351  // binding events
352  eventObj.requires.each(function(required) {
353  eventObj.bindCheckingObserver(required);
354  });
355  Event.observe(eventObj.element, 'change', eventObj.indicateEnabled);
356  eventObj.checkRequirements();
357  eventObj.indicateEnabled();
358  });
359 
360  var handleHash = function () {
361  if (window.location.hash == '') {
362  return false;
363  }
364  try {
365  var hashString = window.location.hash.replace('#', ''),
366  containerId = hashString.replace('-link', ''),
367  state = jQuery('#' + containerId + '-state'),
368  head = jQuery('#' + containerId + '-head');
369  if (state.length) {
370  state.val(1);
371  }
372  if (head.length) {
373  head.collapsed = 0;
374  }
375  Fieldset.applyCollapse(containerId);
376  } catch(err) {
377  }
378  return false;
379  };
380 
381  window.addEventListener('hashchange', handleHash);
382  handleHash();
383 
384  registry.set('adminSystemConfig', adminSystemConfig);
385 
386  adminSystemConfig.navigateToElement(<?php echo /* @noEscape */ $block->getConfigSearchParamsJson(); ?>);
387 });
388 </script>
$block setTitle( 'CMS Block Title') -> setIdentifier('fixture_block') ->setContent('< h1 >Fixture Block Title</h1 >< a href=" store url</a><p> Config value
Definition: block.php:9
jquery extjs ext tree mage adminhtml form
Definition: tree.phtml:41
$block
Definition: block.php:8
jQuery('.store-switcher .dropdown-menu li a').each(function()
Definition: switcher.phtml:203
$element
Definition: element.phtml:12