Skip to content

Commit

Permalink
Minify script and module (#164)
Browse files Browse the repository at this point in the history 
* add .gitignore file

* add uglify as dev dependency

* add module support

* add the correct uglify-js dependency

* latest minification

* remove package-lock.json from gitignore

* add instructions for including as node module

* add instructions for react

* slight edit to react example

* another small edit to react example
  • Loading branch information
@naveed-fida
naveed-fida committed Feb 24, 2021
1 parent 4593943 commit 9c0559a
Show file tree
Hide file tree
Showing 6 changed files with 217 additions and 147 deletions.
2 changes: 2 additions & 0 deletions .gitignore
View file
@@ -0,0 +1,2 @@
/node_modules
/.idea
71 changes: 64 additions & 7 deletions README.md
View file
@@ -1,7 +1,3 @@
# This plugin/repo is looking for a maintainer. Please email aamirafridi@gmail.com if you are interested.

⚠️ This library is not maintained. Pull-requests and issues are not actively monitored. If you want a more modern and actively maintained version check out [Mattiacoll's vanilla-js](https://github.com/mattiacoll/vanilla-marquee)

# jQuery-Marquee with CSS3 Support [![Known Vulnerabilities](https://snyk.io/test/github/aamirafridi/jquery.marquee/badge.svg?targetFile=package.json)](https://snyk.io/test/github/aamirafridi/jquery.marquee?targetFile=package.json)
[![](https://data.jsdelivr.com/v1/package/npm/jquery.marquee/badge)](https://www.jsdelivr.com/package/npm/jquery.marquee)

Expand Down Expand Up @@ -63,6 +59,13 @@ Here is the list of all methods:

Usage:
----
### Requiring in The Node.js Environment
Here's how to import the plugin as a CommonJS module:

```javascript
var $ = require("jquery");
require("jquery.marquee");
```

### HTML:

Expand All @@ -89,7 +92,7 @@ Alternatively you can provide all the options listed above as data attributes:
}
```

### How to apply plugin:
### How to Apply Plugin:
```javascript
/**
* Example of starting a plugin with options.
Expand All @@ -110,7 +113,61 @@ $('.marquee').marquee({
});
```

### How to use methods:
### How to Use in a React Component (Class-Based)
```jsx
import React, { Component } from 'react';
import $ from 'jquery';
import 'jquery.marquee';

export default class Marquee extends Component {
componentDidMount() {
this.$el.marquee({
duration: 15000,
gap: 50,
delayBeforeStart: 0,
direction: 'left'
});
}

render() {
return (
<div ref={(el) => this.$el = $(el)}>
I'm using jQuery.Marquee with React!!!!
</div>
);
}
}
```
### How to Use in a React Component (Functional)
```jsx
import React, { useEffect, useRef } from 'react';
import $ from 'jquery';
import 'jquery.marquee';
export default function Marquee(props) {
const el = useRef();
useEffect(function() {
const $el = $(el.current);
$el.marquee({
duration: 5000,
gap: 50,
delayBeforeStart: 0,
direction: 'left'
});
});
return (
<div ref={el}>
I'm using jQuery.Marquee with React!!!!
</div>
);
}
```
### How to Use Methods:
```javascript
var $mq = $('.marquee').marquee();
Expand All @@ -135,7 +192,7 @@ $('.marquee')

```
### How to use events:
### How to Use Events:
Check demo page for example: http://aamirafridi.com/jquery/jquery-marquee-plugin#examples
Expand Down
207 changes: 108 additions & 99 deletions jquery.marquee.js
View file
@@ -1,88 +1,97 @@
/**
* jQuery.marquee - scrolling text like old marquee element
* @author Aamir Afridi - aamirafridi(at)gmail(dot)com / http://aamirafridi.com/jquery/jquery-marquee-plugin
*/;
(function($) {
*/
;(function(factory) {
'use strict';
if (typeof define === 'function' && define.amd) {
define(['jquery'], factory);
} else if (typeof exports !== 'undefined') {
module.exports = factory(require('jquery'));
} else {
factory(jQuery);
}
})(function($) {
$.fn.marquee = function(options) {
return this.each(function() {
// Extend the options if any provided
var o = $.extend({}, $.fn.marquee.defaults, options),
$this = $(this),
$marqueeWrapper, containerWidth, animationCss, verticalDir, elWidth,
loopCount = 3,
playState = 'animation-play-state',
css3AnimationIsSupported = false,

// Private methods
_prefixedEvent = function(element, type, callback) {
var pfx = ["webkit", "moz", "MS", "o", ""];
for (var p = 0; p < pfx.length; p++) {
if (!pfx[p]) type = type.toLowerCase();
element.addEventListener(pfx[p] + type, callback, false);
}
},

_objToString = function(obj) {
var tabjson = [];
for (var p in obj) {
if (obj.hasOwnProperty(p)) {
tabjson.push(p + ':' + obj[p]);
}
}
tabjson.push();
return '{' + tabjson.join(',') + '}';
},

_startAnimationWithDelay = function() {
$this.timer = setTimeout(animate, o.delayBeforeStart);
},

// Public methods
methods = {
pause: function() {
if (css3AnimationIsSupported && o.allowCss3Support) {
$marqueeWrapper.css(playState, 'paused');
} else {
// pause using pause plugin
if ($.fn.pause) {
$marqueeWrapper.pause();
}
}
// save the status
$this.data('runningStatus', 'paused');
// fire event
$this.trigger('paused');
},

resume: function() {
// resume using css3
if (css3AnimationIsSupported && o.allowCss3Support) {
$marqueeWrapper.css(playState, 'running');
} else {
// resume using pause plugin
if ($.fn.resume) {
$marqueeWrapper.resume();
}
}
// save the status
$this.data('runningStatus', 'resumed');
// fire event
$this.trigger('resumed');
},

toggle: function() {
methods[$this.data('runningStatus') === 'resumed' ? 'pause' : 'resume']();
},

destroy: function() {
// Clear timer
clearTimeout($this.timer);
// Unbind all events
$this.find("*").addBack().off();
// Just unwrap the elements that has been added using this plugin
$this.html($this.find('.js-marquee:first').html());
}
};
$this = $(this),
$marqueeWrapper, containerWidth, animationCss, verticalDir, elWidth,
loopCount = 3,
playState = 'animation-play-state',
css3AnimationIsSupported = false,

// Private methods
_prefixedEvent = function(element, type, callback) {
var pfx = ["webkit", "moz", "MS", "o", ""];
for (var p = 0; p < pfx.length; p++) {
if (!pfx[p]) type = type.toLowerCase();
element.addEventListener(pfx[p] + type, callback, false);
}
},

_objToString = function(obj) {
var tabjson = [];
for (var p in obj) {
if (obj.hasOwnProperty(p)) {
tabjson.push(p + ':' + obj[p]);
}
}
tabjson.push();
return '{' + tabjson.join(',') + '}';
},

_startAnimationWithDelay = function() {
$this.timer = setTimeout(animate, o.delayBeforeStart);
},

// Public methods
methods = {
pause: function() {
if (css3AnimationIsSupported && o.allowCss3Support) {
$marqueeWrapper.css(playState, 'paused');
} else {
// pause using pause plugin
if ($.fn.pause) {
$marqueeWrapper.pause();
}
}
// save the status
$this.data('runningStatus', 'paused');
// fire event
$this.trigger('paused');
},

resume: function() {
// resume using css3
if (css3AnimationIsSupported && o.allowCss3Support) {
$marqueeWrapper.css(playState, 'running');
} else {
// resume using pause plugin
if ($.fn.resume) {
$marqueeWrapper.resume();
}
}
// save the status
$this.data('runningStatus', 'resumed');
// fire event
$this.trigger('resumed');
},

toggle: function() {
methods[$this.data('runningStatus') === 'resumed' ? 'pause' : 'resume']();
},

destroy: function() {
// Clear timer
clearTimeout($this.timer);
// Unbind all events
$this.find("*").addBack().off();
// Just unwrap the elements that has been added using this plugin
$this.html($this.find('.js-marquee:first').html());
}
};

// Check for methods
if (typeof options === 'string') {
Expand All @@ -103,7 +112,7 @@
For details https://twitter.com/aamirafridi/status/403848044069679104 - Can't find a better solution :/
jQuery 1.3.2 doesn't support $.data().KEY hence writting the following */
var dataAttributes = {},
attr;
attr;
$.each(o, function(key) {
// Check if element has this data attribute
attr = $this.attr('data-' + key);
Expand Down Expand Up @@ -167,10 +176,10 @@

// Remove bottom margin from 2nd element if duplicated
if (o.duplicated) {
$this.find('.js-marquee:last').css({
'margin-bottom': 0
});
}
$this.find('.js-marquee:last').css({
'margin-bottom': 0
});
}

var elHeight = $this.find('.js-marquee:first').height() + o.gap;

Expand Down Expand Up @@ -215,11 +224,11 @@

if (o.allowCss3Support) {
var elm = document.body || document.createElement('div'),
animationName = 'marqueeAnimation-' + Math.floor(Math.random() * 10000000),
domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
animationString = 'animation',
animationCss3Str = '',
keyframeString = '';
animationName = 'marqueeAnimation-' + Math.floor(Math.random() * 10000000),
domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
animationString = 'animation',
animationCss3Str = '',
keyframeString = '';

// Check css3 support
if (elm.style.animation !== undefined) {
Expand Down Expand Up @@ -247,11 +256,11 @@
}

var _rePositionVertically = function() {
$marqueeWrapper.css('transform', 'translateY(' + (o.direction === 'up' ? containerHeight + 'px' : '-' + elHeight + 'px') + ')');
},
_rePositionHorizontally = function() {
$marqueeWrapper.css('transform', 'translateX(' + (o.direction === 'left' ? containerWidth + 'px' : '-' + elWidth + 'px') + ')');
};
$marqueeWrapper.css('transform', 'translateY(' + (o.direction === 'up' ? containerHeight + 'px' : '-' + elHeight + 'px') + ')');
},
_rePositionHorizontally = function() {
$marqueeWrapper.css('transform', 'translateX(' + (o.direction === 'left' ? containerWidth + 'px' : '-' + elWidth + 'px') + ')');
};

// if duplicated option is set to true than position the wrapper
if (o.duplicated) {
Expand All @@ -271,7 +280,7 @@

// If the text starts out visible we can skip the two initial loops
if (!o.startVisible) {
loopCount = 1;
loopCount = 1;
}
} else if (o.startVisible) {
// We only have two different loops if marquee is duplicated and starts visible
Expand Down Expand Up @@ -341,9 +350,9 @@
o.duration = o._completeDuration;
// Adjust the css3 animation as well
if (animationCss3Str) {
animationName = animationName + '0';
keyframeString = $.trim(keyframeString) + '0 ';
animationCss3Str = animationName + ' ' + o.duration / 1000 + 's 0s infinite ' + o.css3easing;
animationName = animationName + '0';
keyframeString = $.trim(keyframeString) + '0 ';
animationCss3Str = animationName + ' ' + o.duration / 1000 + 's 0s infinite ' + o.css3easing;
}
_rePositionVertically();
}
Expand Down Expand Up @@ -403,7 +412,7 @@
// Add css3 animation to the element
$marqueeWrapper.css(animationString, animationCss3Str);
var keyframeCss = keyframeString + ' { 100% ' + _objToString(animationCss) + '}',
$styles = $marqueeWrapper.find('style');
$styles = $marqueeWrapper.find('style');

// Now add the keyframe animation to the marquee element
if ($styles.length !== 0) {
Expand Down Expand Up @@ -486,4 +495,4 @@
// the marquee is visible initially positioned next to the border towards it will be moving
startVisible: false
};
})(jQuery);
});

0 comments on commit 9c0559a

Please sign in to comment.