isotope.module in Isotope (with Masonry and Packery) 7.2

Load the isotope library and provide configuration and theme options.

File

isotope.module

<?php

/**
 * @file
 * Load the isotope library and provide configuration and theme options.
 */
define('ISOTOPE_CDN_PATH', 'https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js');
define('ISOTOPE_FILENAME', 'isotope.pkgd.min.js');

/**
 * Implements hook_permission().
 */
function isotope_permission() {
  return array(
    'administer isotope' => array(
      'title' => t('Administer Isotope Configuration'),
      'description' => t('Set configuration options for Isotope'),
    ),
  );
}

/**
 * Implements hook_ctools_plugin_api().
 *
 * Tell CTools that we support the default_isotope_preset API.
 */
function isotope_ctools_plugin_api($owner, $api) {
  if ($owner == 'isotope' && $api == 'default_isotope_configurations') {
    return array(
      'version' => 1,
    );
  }
}

/**
 * Implements hook_default_isotope_preset().
 *
 * Provide a couple of default presets.
 */
function isotope_default_isotope_configuration() {
  $export = array();
  $config = new stdClass();
  $config->api_version = 1;
  $config->name = 'isotope_default_config';
  $config->admin_title = 'Default config';
  $config->layoutMode = 'masonry';
  $config->transitionDuration = '0.4s';
  $config->urlFilters = NULL;
  $config->isFitWidth = NULL;
  $config->isHorizontal = NULL;
  $config->stamp = '.stamp';
  $config->horizontalAlignment = NULL;
  $config->verticalAlignment = NULL;
  $config->isOriginLeft = 1;

  // If imagesLoaded is available, add it by default.
  if (isotope_check_additional_libraries('imagesLoaded')) {
    $config->plugins = array(
      'imagesLoaded',
    );
  }
  else {
    $config->plugins = array();
  }
  $export['isotope_default_config'] = $config;
  return $export;
}

/**
 * Implements hook_ctools_plugin_directory().
 */
function isotope_ctools_plugin_directory($module, $type) {

  // Load the export_ui plugin.
  if ($type == 'export_ui') {
    return 'plugins/export_ui';
  }
}

/**
 * Implements hook_context_plugins().
 */
function isotope_context_plugins() {
  $plugins = array();
  $plugins['isotope_reaction'] = array(
    'handler' => array(
      'path' => drupal_get_path('module', 'isotope') . '/plugins/context',
      'file' => 'isotope_reaction.inc',
      'class' => 'isotope_reaction',
      'parent' => 'context_reaction',
    ),
  );
  return $plugins;
}

/**
 * Implements hook_context_registry().
 */
function isotope_context_registry() {
  return array(
    'reactions' => array(
      'isotope' => array(
        'title' => t('Isotope'),
        'description' => t('Set an Isotope configuration.'),
        'plugin' => 'isotope_reaction',
      ),
    ),
  );
}

/**
 * Return a list of available configs.
 *
 * @return array
 *   A list of available configs in a format ready for a select element.
 */
function isotope_available_configs() {
  $available_configs = ctools_export_crud_load_all('isotope_configurations');
  foreach ($available_configs as $key => $value) {
    $available_configs[$key] = $value->admin_title;
  }
  return $available_configs;
}

/**
 * Convert the name of a config into a JSON representation.
 *
 * Style as per http://isotope.metafizzy.co/#initialize-in-html.
 */
function isotope_get_config_json($config, array $additional_attributes) {
  ctools_include('export');
  $plugin = ctools_export_crud_load('isotope_configurations', $config);
  if (empty($plugin)) {
    return drupal_json_encode(array());
  }

  // Properties that should be passed directly to isotope.
  $allowed_attributes = array(
    'layoutMode',
    'transitionDuration',
    'urlFilters',
    'isFitWidth',
    'isHorizontal',
    'stamp',
    'horizontalAlignment',
    'verticalAlignment',
    'isOriginLeft',
  );

  // Default attributes.
  $attributes = array(
    'columnWidth' => '.isotope-grid-sizer',
    'itemSelector' => '.isotope-element',
    'gutter' => '.isotope-gutter-sizer',
  ) + $additional_attributes;
  foreach ($plugin as $key => $value) {
    if (in_array($key, $allowed_attributes)) {
      $attributes[$key] = $value;
    }
  }
  return drupal_json_encode($attributes);
}

/**
 * Check for the library and return the appropriate scope.
 */
function isotope_check_library() {

  // @TODO: Cache the result.
  if (function_exists('libraries_get_path') && file_exists(libraries_get_path('isotope') . '/' . ISOTOPE_FILENAME) === TRUE) {

    // Library has been installed correctly, so use it.
    return 'library';
  }
  if (isotope_check_url(ISOTOPE_CDN_PATH)) {

    // Library has not been installed correctly, but the cdn is available.
    return 'cdn';
  }

  // Neither option is available. Throw an error.
  return FALSE;
}

/**
 * Return a list of accepted plugins.
 *
 * @return array
 *   Plugins accepted by this module.
 */
function isotope_additional_libraries_list() {
  $libraries['cellsByRow'] = array(
    'filename' => 'cells-by-row.js',
    'type' => 'layout',
    'url' => 'https://raw.githubusercontent.com/metafizzy/isotope-cells-by-row/master/cells-by-row.js',
    'description' => t('A grid layout where items are centered inside each cell.'),
  );
  $libraries['packery'] = array(
    'filename' => 'packery-mode.pkgd.min.js',
    'type' => 'layout',
    'url' => 'https://raw.githubusercontent.com/metafizzy/isotope-packery/master/packery-mode.pkgd.min.js',
    'description' => t('The packery layout mode uses a bin-packing algorithm. This is a fancy way of saying “it fills empty gaps.”'),
  );
  $libraries['masonryHorizontal'] = array(
    'filename' => 'masonry-horizontal.js',
    'type' => 'layout',
    'url' => 'https://raw.githubusercontent.com/metafizzy/isotope-masonry-horizontal/master/masonry-horizontal.js',
    'description' => t('masonryHorizontal is the horizontal version of masonry. It works by placing elements in optimal position based on available horizontal space.'),
  );
  $libraries['fitColumns'] = array(
    'filename' => 'fit-columns.js',
    'type' => 'layout',
    'url' => 'https://raw.githubusercontent.com/metafizzy/isotope-fit-columns/master/fit-columns.js',
    'description' => t('Items are arranged into columns. Columns progress horizontally. fitColumns is ideal for items that have the same width.'),
  );
  $libraries['cellsByColumn'] = array(
    'filename' => 'cells-by-column.js',
    'type' => 'layout',
    'url' => 'https://raw.githubusercontent.com/metafizzy/isotope-cells-by-column/master/cells-by-column.js',
    'description' => t('A horizontal grid layout where items are centered inside each cell.'),
  );
  $libraries['horizontal'] = array(
    'filename' => 'horizontal.js',
    'type' => 'layout',
    'url' => 'https://raw.githubusercontent.com/metafizzy/isotope-horizontal/master/horizontal.js',
    'description' => t('Items are arranged horizontally.'),
  );
  $libraries['imagesLoaded'] = array(
    'filename' => 'imagesloaded.pkgd.min.js',
    'type' => 'plugin',
    'url' => 'http://imagesloaded.desandro.com/imagesloaded.pkgd.min.js',
    'description' => t('Detect when images have been loaded. (Requires jQuery version 1.9 or later.)'),
  );
  return $libraries;
}

/**
 * Check for all additional libraries.
 *
 * Return the ones that have been detected, or an empty array. If passed a
 * specific libname to check for, will return the path to the library or FALSE.
 */
function isotope_check_additional_libraries($libname = FALSE) {
  $detected_libraries = array();
  $libraries = isotope_additional_libraries_list();
  if (function_exists('libraries_get_path')) {
    foreach ($libraries as $lib_name => $library) {

      // Check both for files inside the "isotope" folder and files inside a
      // plugin-named folder.
      $layout_path = libraries_get_path('isotope') . '/' . $library['filename'];
      if (file_exists($layout_path) === TRUE) {
        $detected_libraries[$layout_path] = $lib_name;
      }
      $plugin_path = libraries_get_path($lib_name) . '/' . $library['filename'];
      if (file_exists($plugin_path) === TRUE) {
        $detected_libraries[$plugin_path] = $lib_name;
      }
    }
  }
  if ($libname && in_array($libname, $detected_libraries)) {
    return array_search($libname, $detected_libraries);
  }
  elseif ($libname) {
    return FALSE;
  }
  return $detected_libraries;
}

/**
 * Function to add the right version of the js file.
 */
function isotope_addjs($config_name) {
  $isotope_scope = isotope_check_library();
  if ($isotope_scope == 'library') {
    drupal_add_js(libraries_get_path('isotope') . '/' . ISOTOPE_FILENAME);
  }
  elseif ($isotope_scope == 'cdn') {
    drupal_add_js(ISOTOPE_CDN_PATH, 'external');
  }
  ctools_include('export');
  $config = ctools_export_crud_load('isotope_configurations', $config_name);
  $libraries = isotope_additional_libraries_list();
  $selected_libraries = array(
    $config->layoutMode,
  );
  foreach ($config->plugins as $value) {
    if (!empty($value)) {
      $selected_libraries[] = $value;
    }
  }
  foreach ($selected_libraries as $lib_name) {
    if (!empty($libraries[$lib_name])) {
      $path = isotope_check_additional_libraries($lib_name);
      if (!empty($path)) {
        drupal_add_js($path);
      }
    }
  }
}

/**
 * Helper function to check if a url exists.
 */
function isotope_check_url($url) {
  $header_response = get_headers($url, 1);
  if (strpos($header_response[0], "200") === FALSE) {
    return FALSE;
  }
  return TRUE;
}

/**
 * Strip all special chars to make value suitable for css class name.
 *
 * @param string $raw
 *   The raw value to be sanitized.
 *
 * @return string
 *   The sanitized value.
 */
function isotope_sanitize($raw) {
  $safe = $raw;
  if (is_array($raw)) {
    $safe = array();
    foreach ($raw as $i) {
      $safe[] = isotope_sanitize($i);
    }
    return implode(' ', $safe);
  }

  // Transliterate other language chars to latin.
  if (function_exists('transliteration_get')) {
    $safe = transliteration_get($safe, '?', language_default('language'));
  }

  // Basic class-name rules.
  $safe = strtolower($safe);
  $safe = preg_replace('/[^a-z0-9]/s', '-', $safe);
  $safe = preg_replace('/-{2,}/', '-', $safe);

  // Allow other modules to modify it with hook_isotope_sanitize_alter().
  drupal_alter('isotope_sanitize', $safe, $raw);
  return $safe;
}

/**
 * Implements hook_theme().
 *
 * Defines the theming capabilities provided by this module.
 *
 * A default 'instance' of NULL means an optionset should apply to all instances
 * on the page, unless restricted to one or more.
 */
function isotope_theme($existing, $type, $theme, $path) {
  return array(
    'isotope_grid' => array(
      'variables' => array(
        'config' => 'isotope_default_config',
        'items' => array(),
        'instance' => NULL,
      ),
    ),
    'isotope_filter' => array(
      'variables' => array(
        'items' => array(),
        'instance' => NULL,
        'filtername' => 'filter',
        'filtertitle' => NULL,
      ),
    ),
    'isotope_sorter' => array(
      'variables' => array(
        'sorts' => array(),
        'original' => NULL,
        'instance' => NULL,
      ),
    ),
  );
}

/**
 * Default theme implementation for the grid.
 *
 * @param array $vars
 *   Variables for theming.
 *
 * @return string
 *   Markup.
 */
function theme_isotope_grid(array $vars) {

  // A config name specified in context will override whatever we have been
  // passed.
  $config_name = $vars['config'];
  if (module_exists('context')) {
    if ($plugin = context_get_plugin('reaction', 'isotope')) {
      $context_name = $plugin
        ->execute();
      if (!empty($context_name)) {
        $config_name = $context_name;
      }
    }
  }

  // Add the sorting options to the initial configuration.
  $additional_config = array(
    'getSortData' => array(),
  );
  foreach ($vars['items'] as $item) {
    $item['data'] = !empty($item['data']) ? $item['data'] : array();
    foreach ($item['data'] as $key => $value) {
      $additional_config['getSortData'][$key] = '.' . $key;
    }
  }

  // Retrieve the desired configuration (plus sorting options).
  $config = isotope_get_config_json($config_name, $additional_config);

  // Make sure the instance name is unique per page load.
  $global_instances =& drupal_static(__FUNCTION__);
  $global_instances = isset($global_instances) ? $global_instances : array();
  if (!empty($vars['instance']) && !in_array($vars['instance'], $global_instances)) {
    $instance_name = $vars['instance'];
  }
  else {
    for ($i = 0; $i >= 0; $i++) {
      if (!in_array($i, $global_instances)) {
        $instance_name = $i;

        // Break the infinite loop when successful.
        break;
      }
    }
  }
  $global_instances[] = $instance_name;
  $instance = 'isotope-instance-' . $instance_name;
  $items = array(
    array(
      'data' => '',
      'class' => array(
        'isotope-grid-sizer',
      ),
    ),
    array(
      'data' => '',
      'class' => array(
        'isotope-gutter-sizer',
      ),
    ),
  );
  foreach ($vars['items'] as $item) {
    $sorts = '';
    $item['data'] = !empty($item['data']) ? $item['data'] : array();
    foreach ($item['data'] as $key => $value) {
      if (!is_array($value)) {
        $value = array(
          $value,
        );
      }
      foreach ($value as $sort) {
        $sorts .= '<div class="sort-data ' . $key . '">' . isotope_sanitize($sort) . '</div>';
      }
      $item['data'][$key] = isotope_sanitize($value);
    }
    $classes = array_values($item['data']);
    $classes[] = 'isotope-element';
    $items[] = array(
      'data' => $item['value'] . $sorts,
      'class' => $classes,
    );
  }
  $return = array(
    '#theme' => 'item_list',
    '#items' => $items,
    '#type' => 'ul',
    '#attributes' => array(
      'class' => 'isotope-container js-isotope',
      'id' => $instance,
      'data-isotope-options' => $config,
    ),
    '#attached' => array(
      'js' => array(
        drupal_get_path('module', 'isotope') . '/isotope.js',
      ),
      'css' => array(
        drupal_get_path('module', 'isotope') . '/isotope.css',
      ),
    ),
  );
  isotope_addjs($config_name);
  return drupal_render($return);
}

/**
 * Default theme implementation for the filter list.
 *
 * @param array $vars
 *   Variables for theming.
 *
 * @return string
 *   Markup.
 */
function theme_isotope_filter(array $vars) {
  $multi_field_logic = 'OR';
  $attributes['class'] = 'isotope-options clearfix';
  if (!empty($vars['instance'])) {
    $attributes['data-instance-id'] = 'isotope-instance-' . $vars['instance'];
  }
  if (!empty($vars['filtername'])) {
    $attributes['data-filter-group'] = $vars['filtername'];
  }
  else {
    $attributes['data-filter-group'] = 'unnamed_filter';
  }
  $title = !empty($vars['filtertitle']) ? $vars['filtertitle'] : NULL;
  $items[] = l(t('All'), '', array(
    'attributes' => array(
      'class' => 'filterbutton',
      'data-filter' => '',
    ),
    'fragment' => 'filter',
    'external' => TRUE,
  ));
  foreach ($vars['items'] as $key => $label) {
    $keys = explode(',', $key);
    foreach ($keys as $k => $v) {
      $keys[$k] = '.' . isotope_sanitize($v);
    }
    if ($multi_field_logic == 'OR') {
      $keys = implode(', ', $keys);
    }
    else {
      $keys = implode('', $keys);
    }
    $items[] = l($label, '', array(
      'attributes' => array(
        'class' => 'filterbutton',
        'data-filter' => $keys,
      ),
      'fragment' => 'filter',
      'external' => TRUE,
      'html' => TRUE,
    ));
  }
  $return = array(
    '#theme' => 'item_list',
    '#items' => $items,
    '#type' => 'ul',
    '#title' => $title,
    '#attributes' => $attributes,
  );
  return drupal_render($return);
}

/**
 * Default theme implementation for the sorting list.
 *
 * @param array $vars
 *   Variables for theming.
 *
 * @return string
 *   Markup.
 */
function theme_isotope_sorter(array $vars) {
  $attributes['class'] = 'isotope-options sorts clearfix';
  if (!empty($vars['instance'])) {
    $attributes['data-instance-id'] = 'isotope-instance-' . $vars['instance'];
  }
  if (!empty($vars['original'])) {
    $vars['sorts'] = array(
      $vars['original'] => 'original-order',
    ) + $vars['sorts'];
  }
  foreach ($vars['sorts'] as $key => $value) {
    $sort = is_array($value) ? implode(',', $value) : $value;
    $label = empty($key) || is_numeric($key) ? $sort : $key;
    $items[] = l($label, '', array(
      'attributes' => array(
        'class' => 'sorterbutton',
        'data-sort-by' => $sort,
      ),
      'fragment' => 'sorter',
      'external' => TRUE,
      'html' => TRUE,
    ));
  }
  $return = array(
    '#theme' => 'item_list',
    '#items' => $items,
    '#type' => 'ul',
    '#title' => t('Sort By'),
    '#attributes' => $attributes,
  );
  return drupal_render($return);
}

Functions

Name	Description
isotope_additional_libraries_list	Return a list of accepted plugins.
isotope_addjs	Function to add the right version of the js file.
isotope_available_configs	Return a list of available configs.
isotope_check_additional_libraries	Check for all additional libraries.
isotope_check_library	Check for the library and return the appropriate scope.
isotope_check_url	Helper function to check if a url exists.
isotope_context_plugins	Implements hook_context_plugins().
isotope_context_registry	Implements hook_context_registry().
isotope_ctools_plugin_api	Implements hook_ctools_plugin_api().
isotope_ctools_plugin_directory	Implements hook_ctools_plugin_directory().
isotope_default_isotope_configuration	Implements hook_default_isotope_preset().
isotope_get_config_json	Convert the name of a config into a JSON representation.
isotope_permission	Implements hook_permission().
isotope_sanitize	Strip all special chars to make value suitable for css class name.
isotope_theme	Implements hook_theme().
theme_isotope_filter	Default theme implementation for the filter list.
theme_isotope_grid	Default theme implementation for the grid.
theme_isotope_sorter	Default theme implementation for the sorting list.

Constants

Name	Description
ISOTOPE_CDN_PATH	@file Load the isotope library and provide configuration and theme options.
ISOTOPE_FILENAME