//a single component from it's own file
import {strings} from '@htmlguyllc/jpack/src/utilities/strings';
strings.ucfirst('bob');

//or a single component from the collection file
import {strings} from '@htmlguyllc/jpack/src/utilities';
strings.ucfirst('bob');

//or multiple components from the collection file
import {strings, dom} from '@htmlguyllc/jpack/src/utilities';
strings.ucfirst('bob');
dom.exists('a.my-link');

//or a namespaced object containing all components
import * as utilities from '@htmlguyllc/jpack/src/utilities';
utilities.strings.ucfirst('bob');

//or a namespaced object containing all
import {jpack} from '@htmlguyllc/jpack';
jpack.objects.user.getId();

import {navigation} from '@htmlguyllc/jpack/src/components'; 

//handles browser back/forward buttons
navigation.initHistoryHandlers();

//a selector that contains the HTML you'd like to pull from the response
navigation.setIncomingElement('#main-content');

//a selector that will be replaced with the incoming HTML
navigation.setReplaceElement('#main-content');

//enables a loader to show if a request takes more than 300ms
navigation.loaderEnabled = true;
navigation.setLoaderDelay(300);

//things to do when a page loads
navigation.onLoad(function(e){
    var params = e.detail; //get info from the event
    //if a current_route meta was set in the incoming HTML, it'll be provided to you here
    //you can use this to kick off your page-specific JS
    var route = params.route; 
    //the data you set prior to loading the page, if any
    var data = params.data; //or navigation.getPassthroughData()
    //the DOM element that was added to the page replacing the previous
    var el = params.el;
    //the incomingElement selector from this request 
    // since the new element MAY have a different selector than the last,
    // you may want to run navigation.setReplaceElement(el_selector)
    var el_selector = params.el_selector;
   
   //if gtag is set (google analytics), push a page view
   if( typeof gtag !== 'undefined' ) {
       gtag('config', 'GA_MEASUREMENT_ID', {
           page_path: url.replace(request.getDomainWithProtocol(), '')
       });
   }
   
   //scroll to the top of the page
   window.scrollTo(0, 0);
   
   //.. do something...like init tooltip plugins
});

//things to do when leaving a page
navigation.onUnload(function(){
   //.. do something...like remove generic event handlers or destroy plugins 
});

//things to do when a page fails to load
navigation.onNavigationFailure(function(e){
    var error = e.detail.error;
    //.. do something...like show an error popup for the user or log the issue
});

//to prevent duplicate code, you can run your onload callbacks immediately
navigation.triggerOnLoad(dom.getDomElement('body'), 'body', navigation.getRouteFromMeta());

//now use the plugin to load pages
//if you're lazy, the fastest way to integrate is to just add data-href to all internal links 
//and then attach a handler like this:
import {events} from '@htmlguyllc/jpack/src/utilities';
events.onClick('[data-href]', function(){
   navigation.load(this.href); 
});

//you can use the load method at any time to load a new page 
// the second param is an optional callback that only runs for that page
navigation.load('/my-page', function(){
    //my page is now loaded
});

//if you have a page that isn't structure the same as the rest that you're requesting, 
// you can set the incoming parent element on-the-fly
navigation.load('/my-popup', null, '.popup-content');

//now .popup-content is on the page instead of the previous element, 
// so you probably want to set future requests to replace that one instead
//see note in the onLoad block above regarding how you can do this automatically for every request
navigation.setIncomingElement('.popup-content');

import {request} from '@htmlguyllc/jpack/src/objects'; 

//get product_id from the querystring
var product_id = request.query.get('product_id');

var current_full_url = request.getFullURL();

var full_blog_url = request.appendSlash(request.getDomainWithProtocol())+'blog'; //https://my-domain.com/blog

import {site} from '@htmlguyllc/jpack/src/objects';
 
//this example uses jQuery's shorthand AJAX call, you can use axios or any request you want
$.get('/my-site-info-endpoint.php', function(data){
    //don't forget error handling!
    site.populate(JSON.parse(data));
});

import {site} from '@htmlguyllc/jpack/src/objects';

var site_id = site.getId();

import {user} from '@htmlguyllc/jpack/src/objects';
 
$.get('/my-user-info-endpoint.php', function(data){
    //don't forget error handling!
    user.populate(JSON.parse(data));
});

import {site} from '@htmlguyllc/jpack/src/objects';

var site_id = site.getId();

import {strings} from '@htmlguyllc/jpack/src/utilities';

strings.ucfirst('bob'); //returns 'Bob'
strings.getter('name'); //returns 'getName';
strings.setter('name'); //returns 'setName';

import {dom} from '@htmlguyllc/jpack/src/utilities';

//Dont do this. Most of these are dumb examples.
dom.getDomElement('.my-fav-button', true, true); //will throw an error if it doesn't fine it, or if it finds more than 1
dom.getDomElements('.links', true); //will throw an error if none are found
dom.getDomElement('.my-button'); //returns the button, or null (if multiple, it returns the first)
dom.getDomElements('.links'); //returns an array of any matches for .links
dom.getDomElement($('a')); //returns the native DOM element for the link and removes the jQuery wrapper
dom.getDomElement(document.querySelectorAll('a')); //returns the first anchor

dom.exists('a'); //returns true if there is an anchor on the page
dom.multipleExist('a'); //returns true if more than 1 anchor on the page

import {type_checks} from '@htmlguyllc/jpack/src/utilities';

var my_obj = {id:null, name:'John Doe', email:'john@doe.com'};

//make sure my_obj contains the keys: 'id', 'name', 'email'
//force all keys to exist
//block any keys that aren't in that list
//throw an error if the object fails any checks
type_checks.isDataObject(my_obj, ['id', 'name', 'email'], true, true, true);

import {events} from '@htmlguyllc/jpack/src/utilities';

events.onClick('a.my-link', function(){
   //do something without the page redirecting to the href 
});

events.onSubmit('form.my-form', function(){
   //do something and submit the form using XHR 
});

//trigger submit on a form and pass an object as additional data in the event
events.trigger('.my-form', 'submit', {id:1});