From 3939512b53c62258a91d211c9b191bf318b85372 Mon Sep 17 00:00:00 2001 From: zmonteca Date: Fri, 29 Apr 2016 13:56:44 -0500 Subject: [PATCH 1/2] Added package and grunt files It looks like jumping to an anchor from a hash used to be in the code, however, it was no longer in 3.0 version. This was reintroduced. Now SMINT works by either click, scroll or url hash http://yoursite.com/#my-selector --- .gitignore | 2 + Gruntfile.js | 53 ++++++++++ README.md | 19 ++-- dist/jquery.smint.js | 218 +++++++++++++++++++++++++++++++++++++++ dist/jquery.smint.min.js | 2 + package.json | 19 ++++ 6 files changed, 305 insertions(+), 8 deletions(-) create mode 100644 .gitignore create mode 100644 Gruntfile.js create mode 100644 dist/jquery.smint.js create mode 100644 dist/jquery.smint.min.js create mode 100644 package.json diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..c346b13 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +bower_components/ +node_modules/ diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 0000000..c1c0469 --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,53 @@ +'use strict'; + +module.exports = function(grunt) { + + // Project configuration. + grunt.initConfig({ + pkg: grunt.file.readJSON('package.json'), + concat: { + options: { + stripBanners: true, + banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' + + '<%= grunt.template.today("yyyy-mm-dd") %> */' + + '\n', + }, + pub: { + src: './dist/jquery.smint.js', + dest: './dist/jquery.smint.min.js' + } + }, + jshint: { + files: ['*.js'], + beforeconcat: ['.js'], + afterconcat: ['<%= pkg.name %>.js'], + options: { + ignores: ['jquery.*'] + } + }, + uglify: { + options: { + stripBanners: true, + banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' + + '<%= grunt.template.today("yyyy-mm-dd") %> */' + + '\n', + }, + pub: { + files: { + './dist/jquery.smint.min.js': ['./dist/jquery.smint.min.js'] + } + } + } + }); + + // Load the plugin that provides the "uglify" task. + grunt.loadNpmTasks('grunt-contrib-uglify'); + grunt.loadNpmTasks('grunt-contrib-jshint'); + grunt.loadNpmTasks('grunt-contrib-concat'); + + // test task(s) + grunt.registerTask('test', ['jshint', 'concat']); + // Default task(s). + grunt.registerTask('default', ['concat', 'uglify']); + +}; diff --git a/README.md b/README.md index 2b1572d..e5ccb4d 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,13 @@ -SMINT -===== +# SMINT SMINT is a simple plugin for lovers of one page websites -What exactly does it do again? +### What exactly does it do again? Smint is a simple jQuery plugin that helps with the navigation on one page style websites. It has 2 main elements, a sticky navigation bar that stays at the top of the page while you scroll down and menu buttons that automatically scroll the page to the section you clicked on. - -So how do I use it? +### So how do I use it? Create a 'div' for your menu and give it a class name. Inside this you put your 'a' tags and give each one an #id. This is your menu wrapper and it should be set to position:absolute @@ -22,19 +20,24 @@ Add the jquery.smint.js to the head section of your page. Call the function with the following script: +``` js $(document).ready( function() { -$('.subMenu').smint(); + $('.subMenu').smint(); }); +``` You can replace .subMenu with the class name of your menu To give you a littl emore flexability, the class.fxd gets added to your menu when it becomes fixed to the top of the screen, allowing some extra styleing to be added if needed. -Options +### Options SMINT is a simple plugin, so only has an option for how fast the page scrolls. +``` js $('.subMenu').smint({ -'scrollSpeed' : 1000 + 'scrollSpeed' : 1000, + 'mySelector': 'section' }); +``` The default speed is 500 (half a second) but you can now set that to be whatever you like. diff --git a/dist/jquery.smint.js b/dist/jquery.smint.js new file mode 100644 index 0000000..09658df --- /dev/null +++ b/dist/jquery.smint.js @@ -0,0 +1,218 @@ +/** + * SMINT JQuery Plugin v3.0.1 + * Copyright 2012-2016 Robert McCracken + * SMINT V1.0 by Robert McCracken + * SMINT V2.0 by robert McCracken with some awesome help from Ryan Clarke (@clarkieryan) and mcpacosy ‏(@mcpacosy) + * SMINT V3.0 by robert McCracken with some awesome help from Ryan Clarke (@clarkieryan) and mcpacosy ‏(@mcpacosy) + * + * SMINT is my first dabble into jQuery plugins! + * http://www.outyear.co.uk/smint/ + * If you like Smint, or have suggestions on how it could be improved, send me a tweet @rabmyself +**/ + +/** + * SMINT JQuery + * @version 3.0.1 + * @author Robert McCracken + * @license The MIT License (MIT) + */ + +(function(){ + $.fn.smint = function( options ) { + + var settings = $.extend({ + 'scrollSpeed' : 500, + 'mySelector' : 'div' + }, options); + + // adding a class to users div + $(this).addClass('smint'); + + //Set the variables needed + var optionLocs = new Array(), + lastScrollTop = 0, + menuHeight = $(".smint").height(), + smint = $('.smint'), + smintA = $('.smint a'), + myOffset = smint.height(); + + if ( settings.scrollSpeed ) { + var scrollSpeed = settings.scrollSpeed + } + + if ( settings.mySelector ) { + var mySelector = settings.mySelector + }; + + var scrollTo = function( hash ) { + + if (smint.hasClass('fxd')) { + var goTo = $(mySelector+'.'+ hash).position().top-myOffset; + } else { + var goTo = $(mySelector+'.'+ hash).position().top-myOffset; + } + console.log("goto:" + goTo + " myOffset" + myOffset); + $("html, body").stop().animate({ scrollTop: goTo }, scrollSpeed); + + if ($(this).hasClass("extLink")) + { + return false; + } + + }; + + var $chainableReturn = smintA.each( function(index) { + + var id = $(this).attr('href').split('#')[1]; + + if (!$(this).hasClass("extLink")) { + $(this).attr('id', id); + } + + //Fill the menu + optionLocs.push(Array( + $(mySelector+"."+id).position().top-menuHeight, + $(mySelector+"."+id).height()+$(mySelector+"."+id).position().top, id) + ); + + /////////////////////////////////// + + // get initial top offset for the menu + var stickyTop = smint.offset().top; + + // check position and make sticky if needed + var stickyMenu = function(direction){ + + // current distance top + var scrollTop = $(window).scrollTop()+myOffset; + + // if we scroll more than the navigation, change its position to fixed and add class 'fxd', otherwise change it back to absolute and remove the class + if (scrollTop > stickyTop+myOffset) { + smint.css({ 'position': 'fixed', 'top':0,'left':0 }).addClass('fxd'); + + // add padding to the body to make up for the loss in heigt when the menu goes to a fixed position. + // When an item is fixed, its removed from the flow so its height doesnt impact the other items on the page + $('body').css('padding-top', menuHeight ); + } else { + smint.css( 'position', 'relative').removeClass('fxd'); + //remove the padding we added. + $('body').css('padding-top', '0' ); + } + + // Check if the position is inside then change the menu + // Courtesy of Ryan Clarke (@clarkieryan) + if(optionLocs[index][0] <= scrollTop && scrollTop <= optionLocs[index][1]){ + if(direction == "up"){ + $("#"+id).addClass("active"); + $("#"+optionLocs[index+1][2]).removeClass("active"); + } else if(index > 0) { + $("#"+id).addClass("active"); + $("#"+optionLocs[index-1][2]).removeClass("active"); + } else if(direction == undefined){ + $("#"+id).addClass("active"); + } + $.each(optionLocs, function(i){ + if(id != optionLocs[i][2]){ + + $("#"+optionLocs[i][2]).removeClass("active"); + } + }); + } + }; + + // run functions + stickyMenu(); + + // run function every time you scroll + $(window).scroll(function() { + //Get the direction of scroll + var st = $(this).scrollTop()+myOffset; + if (st > lastScrollTop) { + direction = "down"; + } else if (st < lastScrollTop ){ + direction = "up"; + } + lastScrollTop = st; + stickyMenu(direction); + + // Check if at bottom of page, if so, add class to last as sometimes the last div + // isnt long enough to scroll to the top of the page and trigger the active state. + + if($(window).scrollTop() + $(window).height() == $(document).height()) { + smintA.removeClass('active') + $(".smint a:not('.extLink'):last").addClass('active') + + } else { + smintA.last().removeClass('active') + } + }); + + /////////////////////////////////////// + + $(this).on('click', function(e){ + // gets the height of the users div. This is used for off-setting the scroll so the menu doesnt overlap any content in the div they jst scrolled to + var myOffset = smint.height(); + + // stops hrefs making the page jump when clicked + e.preventDefault(); + + // get the hash of the button you just clicked + var hash = $(this).attr('href').split('#')[1]; + + return scrollTo(hash); + + var goTo = $(mySelector+'.'+ hash).offset().top-myOffset; + console.log("goto:" + goTo + " myOffset" + myOffset); + // Scroll the page to the desired position! + $("html, body").stop().animate({ scrollTop: goTo }, scrollSpeed); + + // if the link has the '.extLink' class it will be ignored + // Courtesy of mcpacosy ‏(@mcpacosy) + if ($(this).hasClass("extLink")) + { + return false; + } + + }); + + + //This lets yo use links in body text to scroll. Just add the class 'intLink' to your button and it will scroll + + $('.intLink').on('click', function(e){ + var myOffset = smint.height(); + + e.preventDefault(); + + var hash = $(this).attr('href').split('#')[1]; + + return scrollTo(hash); + + if (smint.hasClass('fxd')) { + var goTo = $(mySelector+'.'+ hash).position().top-myOffset; + } else { + var goTo = $(mySelector+'.'+ hash).position().top-myOffset; + } + console.log("goto:" + goTo + " myOffset" + myOffset); + $("html, body").stop().animate({ scrollTop: goTo }, scrollSpeed); + + if ($(this).hasClass("extLink")) + { + return false; + } + + }); + + }); + + // see if we have a hash and if so, jump to it using smint + var hashLocation = location.hash; + if(hashLocation && hashLocation != '#') { + var hashClass = hashLocation.replace(/^(#)/, ''); + scrollTo(hashClass); + } + + return $chainableReturn; + }; + + $.fn.smint.defaults = { 'scrollSpeed': 500, 'mySelector': 'div'}; +})(jQuery); diff --git a/dist/jquery.smint.min.js b/dist/jquery.smint.min.js new file mode 100644 index 0000000..686dd92 --- /dev/null +++ b/dist/jquery.smint.min.js @@ -0,0 +1,2 @@ +/*! jquery.smint - v3.0.1 - 2016-04-29 */ +!function(){$.fn.smint=function(a){var b=$.extend({scrollSpeed:500,mySelector:"div"},a);$(this).addClass("smint");var c=new Array,d=0,e=$(".smint").height(),f=$(".smint"),g=$(".smint a"),h=f.height();if(b.scrollSpeed)var i=b.scrollSpeed;if(b.mySelector)var j=b.mySelector;var k=function(a){if(f.hasClass("fxd"))var b=$(j+"."+a).position().top-h;else var b=$(j+"."+a).position().top-h;return console.log("goto:"+b+" myOffset"+h),$("html, body").stop().animate({scrollTop:b},i),$(this).hasClass("extLink")?!1:void 0},l=g.each(function(a){var b=$(this).attr("href").split("#")[1];$(this).hasClass("extLink")||$(this).attr("id",b),c.push(Array($(j+"."+b).position().top-e,$(j+"."+b).height()+$(j+"."+b).position().top,b));var i=f.offset().top,l=function(d){var g=$(window).scrollTop()+h;g>i+h?(f.css({position:"fixed",top:0,left:0}).addClass("fxd"),$("body").css("padding-top",e)):(f.css("position","relative").removeClass("fxd"),$("body").css("padding-top","0")),c[a][0]<=g&&g<=c[a][1]&&("up"==d?($("#"+b).addClass("active"),$("#"+c[a+1][2]).removeClass("active")):a>0?($("#"+b).addClass("active"),$("#"+c[a-1][2]).removeClass("active")):void 0==d&&$("#"+b).addClass("active"),$.each(c,function(a){b!=c[a][2]&&$("#"+c[a][2]).removeClass("active")}))};l(),$(window).scroll(function(){var a=$(this).scrollTop()+h;a>d?direction="down":d>a&&(direction="up"),d=a,l(direction),$(window).scrollTop()+$(window).height()==$(document).height()?(g.removeClass("active"),$(".smint a:not('.extLink'):last").addClass("active")):g.last().removeClass("active")}),$(this).on("click",function(a){f.height();a.preventDefault();var b=$(this).attr("href").split("#")[1];return k(b)}),$(".intLink").on("click",function(a){f.height();a.preventDefault();var b=$(this).attr("href").split("#")[1];return k(b)})}),m=location.hash;if(m&&"#"!=m){var n=m.replace(/^(#)/,"");k(n)}return l},$.fn.smint.defaults={scrollSpeed:500,mySelector:"div"}}(jQuery); \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..13bb71f --- /dev/null +++ b/package.json @@ -0,0 +1,19 @@ +{ + "name": "jquery.smint", + "version": "3.0.1", + "devDependencies": { + "grunt": "*", + "grunt-contrib-jshint": "*", + "grunt-contrib-nodeunit": "*", + "grunt-contrib-uglify": "*", + "grunt-contrib-concat": "*", + "grunt-contrib-cssmin": "*" + }, + "description": "ERROR: No README data found!", + "main": "Gruntfile.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "BSD" +} From 93caa28a0d024a781fb0d44df7d33c013bdcb1b1 Mon Sep 17 00:00:00 2001 From: zmonteca Date: Fri, 29 Apr 2016 14:05:07 -0500 Subject: [PATCH 2/2] added more files to ignore --- .gitignore | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/.gitignore b/.gitignore index c346b13..15f4d76 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,16 @@ -bower_components/ -node_modules/ +*.iml +.sass-cache +.bowerrc +.idea +bower_components +node_modules +*.sublime* +*.zip +.DS_Store +*/.DS_Store +.DS_Store? +.Spotlight-V100 +.Trashes +ehthumbs.db +Thumbs.db +.grunt