Create custom module with javascript .js

Question

I want to create a custom module to insert this .js javascript into my joomla site; joomla 3.x version

http://bigspaceship.github.io/shine.js/

how can I do to create my custom text to appear into a module into joomla?

thanks for your help folks!

Answer 1

There are several ways to achieve this in Joomla:

1. You might want to take a look at a plugin called Sourcerer from NoNumber:

Sourcerer enables you to place PHP and any kind of HTML style code (including CSS and JavaScript) right into your content! Not only in your articles, but also in sections, categories, modules, components, META tags, etc.

Then you can add javascript directly in the WYSIWYG editor (like TinyMCE), and the plugin will parse the code as needed. Example:

{source}
<script src="http://bigspaceship.github.io/shine.js/"></script>
{/source}

Other similar extensions can be found here: http://extensions.joomla.org/extensions/core-enhancements/coding-a-scripts-integration/custom-code-in-content

2. Another option is to install a custom module from http://extensions.joomla.org/extensions/core-enhancements/coding-a-scripts-integration/custom-code-in-modules. These are special modules that won't remove your code.

Edit:

For your specific requirements, I created a very quick n' dirty module to display the MouseFollow demo included in the package. You can find the module here: http://dospuntos.no/extensions/mod_addShine.zip. Simply install it like any other Joomla module and publish it to any page. (Provided as is, feel free to modify the code if needed).

Here's the code from the default.php file:

<?php
/**
* @package    Add Shine.js
* @author     Dos Puntos Design
* @copyright  Copyright (C) 2014 Dos Puntos Design
* @license    http://www.gnu.org/licenses/gpl-3.0.html
**/

// No direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
JHtml::_('script', JUri::root() . 'media/mod_addShine/js/shine.min.js');       // For JS files
$text = $params->get('shine_text');
?>
<style>
.demo-text {
  margin: auto;
  width: 100%;
  color: #fcfcfc;
  text-transform: uppercase;
  text-align: center;
  font-size: 8em;
  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2em;
}
</style>
    <h1 id="headline" class="demo-text"><?php echo $text ?></h1>
    <script type="text/javascript">
      // use new shinejs.Shine(...) if Shine is already defined somewhere else
      // var shine = new shinejs.Shine(document.getElementById('headline'));
      var shine = new Shine(document.getElementById('headline'));
      function handleMouseMove(event) {
        shine.light.position.x = event.clientX;
        shine.light.position.y = event.clientY;
        shine.draw();
      }
      window.addEventListener('mousemove', handleMouseMove, false);
</script>

Answer 2

I Assume that your current html editor is TinyMCE.

Go to Administrator -> Extensions -> Plugin Manager -> Editor - TinyMCE

Delete the word script if it is listed in the "Prohibited Elements" field and save the plugin.

Then create a new "Custom HTML Module" by Going to Administrator -> Extensions -> Module Manager -> +New -> Custom HTML

Click on the Toggle Editor and Add the code like this:

<style>
    /* In HTML5 you can use style tag inside the body. */
</style>

<script type="text/javascript" src="path/to/shine.min.js"></script>
<script type="text/javascript">
    var shine = new Shine(document.getElementById('my-shine-object'));
    window.addEventListener('mousemove', function(event) {
        shine.light.position.x = event.clientX;
        shine.light.position.y = event.clientY;
        shine.draw();
    }, false);
</script>

Then fill the "Title" field, select the "Position" and enable the module. You can select a desired module assignment as well. Then save it.