Using bounds_changed on a map

Here is an example demonstrating the use of 'bounds_changed' in javascript.
It assumes your map id is 'key_1', that you have a page identifier class 'view-display-id-page'
and that 'show maplinks' is enabled in the view. Any markers that fall outside the viewport will be hidden in the list of links.
Edit 'mytheme_script' to whatever suits your needs.

Juicebox HTML5 Responsive Image Galleries

The Juicebox module helps integrate the Juicebox HTML5 responsive gallery library (http://juicebox.net/) with Drupal. Juicebox is in many ways the successor to Simpleviewer and offers a powerful and responsive image gallery front-end that's based on HTML5. See the project page for a detailed feature overview.

Installation (7.x and 8.x)

  1. Install and enable the required Libraries API module (version 2.0 or above) from http://drupal.org/project/libraries.
  2. Download the 3rd party Juicebox library from http://www.juicebox.net/download/ and extract it to a temporary location. Both the Lite (free) and Pro versions should work fine with this module, and the one you should choose depends on how much formatting flexibility you require.
  3. Copy the appropriate core Juicebox library files that you just extracted to Drupal's library directory. Typically, this means you will create a new directory called /sites/all/libraries/juicebox and then copy the full contents of the Juicebox "jbcore" directory to this library directory. You will end up with a structure like /sites/all/libraries/juicebox/juicebox.js and /sites/all/libraries/juicebox/classic/themes.css, etc.
  4. Install and enable this Juicebox module.

JavaScript Libraries

JavaScript libraries are registered by modules implementing hook_library().

Test Drupal 8 core javascript using TestSwarm

Steps

  1. Download Drupal 8: git clone --recursive --branch 8.0.x http://git.drupal.org/project/drupal.git (instructions)
  2. Install Drupal 8 using the standard install profile
  3. Go to sites/all/modules
  4. Download TestSwarm 8.x-1.x: git clone --recursive --branch 8.x-1.x http://git.drupal.org/project/testswarm.git (instructions)
  5. Enable TestSwarm, TestSwarm_forms and TestSwarm_tests
  6. Go to admin/people/permissions#module-TestSwarm
  7. Allow everybody (check all boxes) to "run TestSwarm tests"
  8. Go to TestSwarm-tests, you should see a list off all available tests
  9. Start all tests by clicking "Run all tests" (TestSwarm-run-all-tests). Do this as an authenticated user and as an anonymous user
  10. If you want to test with other themes, just enable the theme and run the tests again.

Remarks

  1. TestSwarm can use browscap.ini to identify the browser a speck better, but this is only important for reporting.
  2. Make sure all caching and aggregation is off

Entity JS

Entity JS allows for Javascript layer access to some commonly used entity-related functions such as EntityFieldQuery.

This is achieved through Drupal menu callbacks and jQuery $.ajax calls.

Note: jQuery's jqXHR Object uses the .done() method that requires later versions of jQuery (1.5+) than what currently ships with Drupal 7. In order to use these examples, we recommend installing jQuery Update. For more on .done(), review the .promise() method jQuery API docs.

entity_create

Create an entity by providing a type and an array of arguments. Shown printing response below.

values = {
    "name": "username", 
    "mail": "username@example.com",
}
entity_create('user', values).done(function(data) { console.log(data); });

Uses a $.post callback URL: /entity_create/[entity_type]

entity_render_view

Return a rendered entity using a view mode. Shown printing HTML to console below.

entity_render_view('node', 1, 'default').done(function(data) { console.log(data); });
Uses a $.get callback URL: /entity_js_drupal_render_entity_view/[entity_type]/[entity_id]/[view_mode]

Pass the theme path to javascript

Description

This extends Drupal.settings allowing you to get the theme path in a javascript file

Steps

Add a preprocess function to your theme's template.php

Using drupal_add_js we extend Drupal.settings in order to make it a variable that returns the path to the theme

p.s. don't copy the php tags into template.php just what's inside.

Pages

Subscribe with RSS Subscribe to RSS - javascript