#midcamp
@WeAreGenuine
D8 AJAX /
Michael Miles
MidCamp 2016
Follow Along: bit.ly/Mid16Ajax
@mikemiles86
Genuine (wearegenuine.com)
Credit: http://www.reddit.com/r/reactiongifs/comments/2hgu34/mrw_ive_just_shaved_and_missed_the_warmth
If an Ajax request was a Big Mac, then Callback Commands would be the secret sauce.
use Drupal\Core\Ajax\CommandInterface;
// An AJAX command for calling [commandName]() JavaScript method.
class [CommandName]Command implements CommandInterface {
// Implements Drupal\Core\Ajax\CommandInterface:render().
public function render() {
return array(
'command' => '[commandName]', // Name of JavaScript Method.
// other request arguments...
);
}
}
[CommandName]Command.php
[CommandName]Command.php
/**
* [commandName description]
*
* @param {Drupal.Ajax} [ajax]
* @param {object} response
* @param {number} [status]
*/
Drupal.AjaxCommands.prototype.[commandName] = function(ajax, response, status){
// Custom javascript goes here ...
}
Credit: http://www.nuskool.com/learn/wp-content/uploads/2016/01/star-wars-ron-1.gif
namespace Drupal\remove_example\Controller;
use Drupal\Core\Controller\ControllerBase;
class RemoveExampleController extends ControllerBase {
// Return output for displaying an image and ajax link for removing it.
public static function demo() {
$output['description']['#markup'] = '' . t('The following is an example of using the remove ajax callback command.') . '
';
// ...
// Attach the ajax library.
$output['#attached']['library'][] = 'core/drupal.ajax';
// Return render array
return $output;
}
// ...
}
remove_example/src/Controller/RemoveExampleController.php
namespace Drupal\remove_example\Controller;
use Drupal\Core\Controller\ControllerBase;
use Drupal\Core\Ajax\AjaxResponse;
use Drupal\Core\Ajax\RemoveCommand;
class RemoveExampleController extends ControllerBase {
// ...
/**
* Callback method for removing image from 'remove-example' page.
*
* @return \Drupal\Core\Ajax\AjaxResponse|mixed
*/
public static function removeImage() {
// Create an Ajax Response object.
$response = new AjaxResponse();
// Add a remove command.
$response->addCommand(new RemoveCommand('#example_remove_wrapper'));
// Return the response object.
return $response;
}
}
remove_example/src/Controller/RemoveExampleController.php
Credit: https://www.reddit.com/r/reactiongifs/comments/3a8akf/my_cats_reaction_when_i_leave_home
namespace Drupal\remove_example\Ajax;
use Drupal\Core\Ajax\CommandInterface;
// An AJAX command for calling the jQuery slideUp() and remove() methods.
class SlideRemoveCommand implements CommandInterface {
// Constructs an SlideRemoveCommand object.
public function __construct($selector, $duration = NULL) {
$this->selector = $selector;
$this->duration = $duration;
}
// Implements Drupal\Core\Ajax\CommandInterface:render().
public function render() {
return array(
'command' => 'slideRemove',
'selector' => $this->selector,
'duration' => $this->duration,
);
}
}
remove_example/src/Ajax/SlideRemoveCommand.php
remove_example/src/Ajax/SlideRemoveCommand.php
(function ($, window, Drupal, drupalSettings) {
'use strict';
// Command to slide up content before removing it from the page.
Drupal.AjaxCommands.prototype.slideRemove = function(ajax, response, status){
var duration = response.duration ? response.duration : "slow";
$(response.selector).each(function() {
$(this).slideUp(duration, function() {
$(this).remove();
});
});
}
})(jQuery, this, Drupal, drupalSettings);
remove_example/js/ajax.js
remove-example:
version: VERSION
js:
js/ajax.js: {}
dependencies:
- core/drupal.ajax
remove_example.libraries.yml
remove_example.libraries.yml
Credit: http://greatestgifsofalltime.tumblr.com/post/22262851765/greatest-magician-in-the-world
namespace Drupal\remove_example\Controller;
use Drupal\Core\Controller\ControllerBase;
class RemoveExampleController extends ControllerBase {
// Return output for displaying an image and ajax link for removing it.
public static function demo() {
$output['description']['#markup'] = '' . t('The following is an example of using the remove ajax callback command.') . '
';
// ...
// Attach custom Ajax command library.
$output['#attached']['library'][] = 'remove_example/remove-example';
// Return render array
return $output;
}
// ...
}
remove_example/src/Controller/RemoveExampleController.php
namespace Drupal\remove_example\Controller;
use Drupal\Core\Controller\ControllerBase;
use Drupal\Core\Ajax\AjaxResponse;
use Drupal\Core\remove_example\SlideRemoveCommand;
class RemoveExampleController extends ControllerBase {
// ...
/**
* Callback method for removing image from 'remove-example' page.
*
* @return \Drupal\Core\Ajax\AjaxResponse|mixed
*/
public static function removeImage() {
// Create an Ajax Response object.
$response = new AjaxResponse();
// Add a remove command.
$response->addCommand(new SlideRemoveCommand('#example_remove_wrapper'));
// Return the response object.
return $response;
}
}
remove_example/src/Controller/RemoveExampleController.php
Credit: https://literaryrapture.wordpress.com/2013/02/15/the-making-of-a-book-gif/
Credit: http://www.snappypixels.com/wp-content/uploads/2013/11/Nailed-it-like-a-boss-11.gif
Drupal 8 AJAX Api: bit.ly/Drupal8Ajax
This Presentation: bit.ly/Mid16Ajax
Presentation Slides: bit.ly/Mid16AjaxSlides
Example Code: bit.ly/Mid16AjaxEx
Creating Commands in D8: bit.ly/D8AjaxCmds
Sunday, March 20 at 10 am
(across the street from the venue)
Contributors of all skill sets and levels are welcome and encouraged to join us!
Help port the Examples module! drupal.org/node/2102639