Skip to content

Remove jquery dependency #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Thrilleratplay wants to merge 3 commits into
base: gh-pages
Choose a base branch
from
Open

Remove jquery dependency #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a6e2282
Remove jquery dependency
Thrilleratplay Dec 14, 2015
dfa172a
Update other Quttons.js file
Thrilleratplay Dec 17, 2015
5283683
Update Readme
Thrilleratplay Dec 17, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
179 changes: 110 additions & 69 deletions Quttons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +1,41 @@
(function($) {

/********************************************
* Quttons.js *
* Quttons are buttons made of Quantum Paper *
* Author : Nash Vail *
*********************************************/

/********************************************
* Quttons.js *
* Quttons are buttons made of Quantum Paper *
* Author : Nash Vail *
* @license MIT *
*********************************************/

(function() {
'use strict';
// Exporting module to global
window.Qutton= {};

// Factory method for producing new Material Dialog objects
window.Qutton.getInstance = function(jQueryDOMElement) {
if(jQueryDOMElement === null) throw new Error("Passed in element doesn't exist in DOM");
return new Qutton(jQueryDOMElement);
window.Qutton.getInstance = function(domElement) {
if(domElement === null) throw new Error("Passed in element doesn't exist in DOM");
return new Qutton(domElement);
};

// Qutton Object
function Qutton(jQueryDOMElement) {
function Qutton(domElement) {

// Cache the important elements as jQuery object
this.$container = jQueryDOMElement;
this.$container = domElement;
// Dialog is alias of the box that pops up on clicking the Qutton
this.$dialog = this.$container.children();
this.$dialog = this.$container.children;
// Cache the close button if it exists
this.$closeButton = this.$container.find('.close');
this.$closeButton = this.$container.querySelectorAll('.close');

// When button is expanded into a dialog isOpen holds true
this.isOpen = false;

// Configuration of the popped up dialog
this.dialogConfig = {
width : this.$dialog.outerWidth(),
height : this.$dialog.outerHeight(),
backgroundColor : toHex(this.$dialog.css('background-color')),
borderRadius : this.$dialog.css('border-radius'),
zIndex : this.$dialog.css('z-index')
width : parseInt(getComputedStyle(this.$dialog[0])['width']),
height : parseInt(getComputedStyle(this.$dialog[0])['height']),
backgroundColor : toHex(getComputedStyle(this.$dialog[0])['background-color']),
borderRadius : getComputedStyle(this.$dialog[0])['border-radius'],
zIndex : getComputedStyle(this.$dialog[0])['z-index']
};


Expand All @@ -54,18 +54,17 @@
// Initializes the click listeners on the qutton itself, document and close button
Qutton.prototype.init = function(quttonConfig) {

$.extend(this.quttonConfig, quttonConfig);
this.$dialog.hide();
deepExtend(this.quttonConfig, quttonConfig);

this.$dialog[0].style.display = 'none';

// Set up the icon and other properties of the div
this.setIcon();
this.$container.css({
'width' : this.quttonConfig.width + "px",
'height' : this.quttonConfig.height + "px",
'background-color' : this.quttonConfig.backgroundColor,
'border-radius' : this.quttonConfig.height + "px"
});

this.$container.style.width = this.quttonConfig.width + "px";
this.$container.style.height = this.quttonConfig.height + "px";
this.$container.style.backgroundColor = this.quttonConfig.backgroundColor;
this.$container.style.borderRadius = this.quttonConfig.height + "px";

// Initialize the event handlers
this.events.click.call(this);
Expand Down Expand Up @@ -94,13 +93,13 @@
};

Qutton.prototype.setIcon = function() {
this.$container.css('background-image', 'url(' + this.quttonConfig.icon + ')');
this.$container.css('cursor', 'pointer');
this.$container.style.backgroundImage = 'url(' + this.quttonConfig.icon + ')';
this.$container.style.cursor = 'pointer';
};

Qutton.prototype.removeIcon = function() {
this.$container.css('background-image', 'none');
this.$container.css('cursor', 'auto');
this.$container.style.backgroundImage = 'none';
this.$container.style.cursor = 'auto';
};

// Animates the button into dialog
Expand All @@ -125,29 +124,30 @@
translateX : translate.X + this.keepInBounds().X + "px",
translateY : translate.Y + this.keepInBounds().Y + "px"
}, o : {
duration : 500,
duration : 500,
easing : this.quttonConfig.easing,
begin : function() {

var nextElement = that.$container.nextElementSibling;
var containerClone;
// add a placeholder in place to maintain the flow of document
if(!that.$container.next('.quttonClonePlaceHolder').length)
that.$container.after(that.$container.clone().addClass('quttonClonePlaceHolder'));
that.$container.css({
'position' : 'absolute',
'z-index' : '10000'
});
if(!(nextElement && nextElement.classList.contains('quttonClonePlaceHolder'))) {
containerClone = that.$container.cloneNode(true);
containerClone.classList.add('quttonClonePlaceHolder');
that.$container.parentNode.insertBefore(containerClone, nextElement);
}
that.$container.style.position = 'absolute';
that.$container.style.zIndex = '10000';
},
complete : function() {
that.isOpen = true;
that.isOpening = false;

that.isOpening = false;
}
}},

{e : this.$dialog, p : "fadeIn", o : {duration : 300, complete : function() { that.isOpen = true;}}}
];

$.Velocity.RunSequence(inSequence );
Velocity.RunSequence(inSequence);
};

// Animtes dialog into button
Expand All @@ -169,34 +169,38 @@
translateX : "0px",
translateY : "0px"
}, o : {
easing : this.quttonConfig.easing,
easing : this.quttonConfig.easing,
duration : 200,
complete : function() {
var nextElement = that.$container.nextElementSibling;
// Remove the placeholder
that.$container.next('.quttonClonePlaceHolder').remove();
that.$container.css({
'position' : 'static',
'z-index' : that.dialogConfig.zIndex
});
if (nextElement && nextElement.classList.contains('quttonClonePlaceHolder')) {
nextElement.parentNode.removeChild(nextElement);
}

that.$container.style.position = 'static';
that.$container.style.zIndex = that.dialogConfig.zIndex;
that.isOpen = false;
that.closing = false;
that.closing = false;
}
}}

];

$.Velocity.RunSequence(outSequence);
Velocity.RunSequence(outSequence);
};

// Check if the explosion of Qutton is within the document bounds.
// Returns an object containing values to translate in X or Y direction in order to
// Returns an object containing values to translate in X or Y direction in order to
// keep the dialog in bounds of the document on explosion.
Qutton.prototype.keepInBounds= function() {
var $window = $(window);
var windowWidth = $window.width();
var windowHeight = $window.height();
var windowWidth = window.document.documentElement.clientWidth;
var windowHeight = window.document.documentElement.clientHeight;

var position = this.$container.position();
var position = {
left: this.$container.offsetLeft,
top: this.$container.offsetTop
};

// Coordinates of top center of Qutton before it converts to a a dialog
var buttonCenterTop = {
Expand All @@ -220,18 +224,18 @@

// Amount to translate in X and Y if possible to bring dialog in bounds of document
var translateInBounds = {
X : this.calculateTranslateAmount(extend.left, extend.right),
Y : this.calculateTranslateAmount(extend.top, extend.bottom)
X : this.calculateTranslateAmount(extend.left, extend.right),
Y : this.calculateTranslateAmount(extend.top, extend.bottom)
};

return translateInBounds;
};

// Calculates and returns the amount to translate the dialog to keep in bounds of the window
Qutton.prototype.calculateTranslateAmount = function(extendSideOne, extendSideTwo) {
if((extendSideOne < 0 && extendSideTwo < 0) ||
(extendSideOne > 0 && extendSideTwo > 0 )) {
return 0;
if((extendSideOne < 0 && extendSideTwo < 0) ||
(extendSideOne > 0 && extendSideTwo > 0 )) {
return 0;
}

// We want to translate in opposite direction of extension
Expand All @@ -240,12 +244,12 @@
};


// Event listeners
// Event listeners
Qutton.prototype.events = {
// Handles the click on Qutton
click : function() {
var that = this;
this.$container.on('click', function(){
this.$container.addEventListener('click', function(){
if(!that.isOpen){
that.openDialog();
}
Expand All @@ -256,8 +260,8 @@
// Handle clicks on the document, aimed at closing the dialog
click_document : function() {
var that = this;
$(document).on('click', function(event) {
if(!$(event.target).closest(that.$container.selector).length){
document.addEventListener('click', function(event) {
if(!closest(event.target, that.$container.selector).length){
if(that.isOpen){
that.closeDialog();
}
Expand All @@ -269,7 +273,7 @@
click_close_button : function() {
var that = this;
if(this.$closeButton.length){
this.$closeButton.on('click', function(event){
this.$closeButton.addEventListener('click', function(event){
if(that.isOpen){
that.closeDialog();
}
Expand All @@ -287,4 +291,41 @@
("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : '';
}
})(jQuery);

// Source: http://youmightnotneedjquery.com/
function deepExtend(out) {
out = out || {};

for (var i = 1; i < arguments.length; i++) {
var obj = arguments[i];

if (!obj)
continue;

for (var key in obj) {
if (obj.hasOwnProperty(key)) {
if (typeof obj[key] === 'object')
deepExtend(out[key], obj[key]);
else
out[key] = obj[key];
}
}
}

return out;
};

// Source: http://youmightnotneedjquery.com/
function closest(el, selector) {
var matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;

while (el) {
if (matchesSelector.call(el, selector)) {
return el;
} else {
el = el.parentElement;
}
}
return [];
};
})();
3 changes: 1 addition & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,5 @@ Meanwhile check out this [demo(beta)](http://nashvail.github.io/Quttons)

![Slow Mo Demo](http://i.imgur.com/I6xeQkn.gif)

#Dependencies
* jQuery
#Dependencies
* Velocity.js with UI Pack
7 changes: 3 additions & 4 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@
</head>
<body>
<!-- Fork me on github ribbon -->
<a href="https://github.com/nashvail/Quttons"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/82b228a3648bf44fc1163ef44c62fcc60081495e/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_red_aa0000.png"></a>
<a href="https://github.com/nashvail/Quttons"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/82b228a3648bf44fc1163ef44c62fcc60081495e/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_red_aa0000.png"></a>
<!-- End Ribbon -->

<div class="buttonCollection">
<!-- Upload Qutton -->
<div class="qutton" id = "qutton_upload">
Expand Down Expand Up @@ -43,10 +43,9 @@ <h2>Sure?</h2>
</div>
</div>
<!-- End Comment Qutton -->

</div>

<script type = "text/javascript" src = "js/lib/jquery-1.11.2.min.js"></script>
<script src="js/lib/velocity.js"></script>
<script src = "js/lib/velocity.ui.js" type = "text/javascript"></script>
<script src="js/lib/Quttons.js" type = "text/javascript"></script>
Expand Down
Loading