ViewSwitcher

Developer
Kevin Gimbel
Size
4,203 Kb
Views
32,384
  1. ViewSwitcher Previews
  2. ViewSwitcher HTML Codes
  3. ViewSwitcher CSS Codes
  4. ViewSwitcher JS Codes

How do I make an viewswitcher?

A very very basic View Switcher, based on different HTML containers and data attributes.You can get the latest version from GitHub. https://github.com/kevingimbel/viewSwitcher. What is a viewswitcher? How do you make a viewswitcher? This script and codes were developed by Kevin Gimbel on 11 August 2022, Thursday.

ViewSwitcher Previews
IQ Test

ViewSwitcher - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>ViewSwitcher</title> <link href='http://fonts.googleapis.com/css?family=Roboto:300,400,500' rel='stylesheet' type='text/css'> <link href="http://kevingimbel.com/dest/css/style.css" rel="stylesheet" type="text/javascript"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header class="site__header"> <h1>ViewSwitcher <small>(v.0.0.3)</small></h1>
<nav id="nav" class="site__navigation">
</nav>
</header>
<main class="wrapper"> <section class="article box" data-view="home" data-view-url="/"> <h3>Welcome home</h3> <p>This is the default view, the "home" view.</p> <p>You can get the latest version from <a href="https://github.com/kevingimbel/viewSwitcher">GitHub</a>.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In cumque ratione neque ipsa, aut quos reprehenderit unde nisi quae aliquam recusandae dolor est odit, vel blanditiis quidem commodi molestiae voluptatum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In cumque ratione neque ipsa, aut quos reprehenderit unde nisi quae aliquam recusandae dolor est odit, vel blanditiis quidem commodi molestiae voluptatum.</p> </section> <section class="article box" data-view="search" data-view-url="/search"> <h3>Search</h3> <p>Search for stuff here.</p> <div class="gw"> <div class="g one-whole"> <input type="text" placeholder="Type here and hit enter..." /> </div> </div> </section> <section class="article box" data-view="profile" data-view-url="/user/_kevinatari"> <div class="gw"> <div class="g one-third small-one-whole"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12117/december.jpeg" alt="" /> </div> <div class="g two-thirds small-one-whole"> <h3>Kevin Gimbel</h3> <h4>I do stuff on the web.</h4> <p>GitHub: <a href="https://github.com/kevingimbel">/kevingimbel</a></p> <p>Twitter: <a href="https://twitter.com/_kevinatari">@_kevinatari</a></p> <p>Blog: <a href="http://kevingimbel.com">kevingimbel.com</a></p> </div> </div> </section> <section class="article box" data-view="edit" data-view-url="/user/edit"> <h3>Edit your data</h3> <p>Here you can edit your data. *Maybe* there is no data to edit so this screen is just here to show that it's posible to have as many screens as one wants. </section> <section class="article box "data-view="404" data-url-url="/404"> <h3>404</h3> <p>The View wasn't found, I'm deeply sorry.</p> </section>
</main> <script src="js/index.js"></script>
</body>
</html>

ViewSwitcher - Script Codes CSS Codes

.site__navigation { text-transform: capitalize;
}
h1 small { font-size: .5em;
}
input { padding: 1em; display: block; width: 20em; margin: 0 auto;
}
.wrapper, header { padding: 2rem;
}

ViewSwitcher - Script Codes JS Codes

/* * @version 0.0.3 * @author Kevin Gimbel */
var View = (function(window, document) { var VIEW_ATTRIBUTE = 'data-view', VIEW_ATTRIBUTE_NAME = 'view', url = window.location.hash, pageTitle = document.querySelector('head title') || '', originalTitle = pageTitle.textContent || '', TITLE_DEVIDER = '&mdash;', ERROR_VIEW = document.querySelector('[' + VIEW_ATTRIBUTE + '="error"]'); // select all the views var views = document.querySelectorAll('[' + VIEW_ATTRIBUTE + ']'); // hide all views by default. // @TODO this should may be optional. Array.prototype.forEach.call(views, function(view) { view.style.display = 'none'; }); // SETTERS // // Set a new URL or VIEW to be active, this // also hides all other open views! // function _setActive(url) { var viewSelector = '[' + VIEW_ATTRIBUTE + '="' + url + '"]'; var view = document.querySelector(viewSelector); if(!view) { view = ERROR_VIEW; } View.setTitle(view.dataset[VIEW_ATTRIBUTE_NAME]); View.setHash(url); Array.prototype.forEach.call(views, function(view) { view.style.display = 'none'; }); view.style.display = 'block'; } // _setHash // Update the page's hash. // // @param {String} - Hash function _setHash(hash) { window.location.hash = hash; } // _setTitle // Update the page's real title // // @param {String} - Title function _setTitle(title) { var titleFirstLetter = title.slice(0,1), titleRemaining = title.slice(1), title = titleFirstLetter.toUpperCase() + titleRemaining; pageTitle.innerHTML = title + ' '+ TITLE_DEVIDER +' ' + originalTitle; } // _initActive // set a view as active view when the page loads. // If there is a hash present, this one will load! // // @param {String} - default View function _initActive(defaultView) { if(window.location.hash) { View.setActive(window.location.hash.replace('#', '')); } else { View.setActive(defaultView); } } // _getHash // get the current hash // // @return url function _getHash() { return url; } // _createMenuHtml // Auto-Generate Basic HTML markup // // @params {String} - Class Name(s) // @return generated HTML function _createMenuHtml(className) { var output = '<ul>'; Array.prototype.forEach.call(views, function(view) { if(view.dataset.view === '404' || view.dataset.view === 'error' || view.dataset.viewExclude) { // return nothing and skip the Error Page. return; } output += '<li class="' + className + '"><a href="#'+ view.dataset[VIEW_ATTRIBUTE_NAME] +'">' + view.dataset[VIEW_ATTRIBUTE_NAME] + '</a></li>'; }); output += '</ul>'; return output; } // Public exposed functions. return { getHash: _getHash, getHtmlMenu: _createMenuHtml, setHash: _setHash, setActive: _setActive, setTitle: _setTitle, initActive: _initActive, }
}(window, document));
// When the page is loaded, make the /home "View" active.
View.initActive('home');
// get the navigation
var nav = document.querySelector('#nav'); nav.innerHTML = View.getHtmlMenu('nav__item'); nav.addEventListener('click', function(event) { event.preventDefault(); // viva la regex! var url = event.target.href.match(/#[a-zA-Z0-9]+/)[0].toString().replace('#', ''); View.setActive(url); });
ViewSwitcher - Script Codes
ViewSwitcher - Script Codes
Home Page Home
Developer Kevin Gimbel
Username kevingimbel
Uploaded August 11, 2022
Rating 4.5
Size 4,203 Kb
Views 32,384
Do you need developer help for ViewSwitcher?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kevin Gimbel (kevingimbel) Script Codes
Name
Pure CSS3 single element Link from TLOZ
An Object-Oriented ToDo-List
CSS3 only Aperture Science Retro Logo
Register or Sponsor Prototype
.LANG
Felixble Product Flags
Custom Rating buttons with Icon Fonts
CSS Pre-Block Overflow example
A Pen by Kevin Gimbel
Slide Menu
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!