├── .gitignore ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── img └── favicon.ico ├── index.html ├── js └── loadTemplate.min.js └── pages ├── about.html ├── contact.html ├── main.html └── portfolio.html /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Code of Conduct 2 | 3 | As contributors and maintainers of this project, and in the interest of fostering an open and welcoming community, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities. 4 | 5 | We are committed to making participation in this project a harassment-free experience for everyone, regardless of level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, ethnicity, age, religion, or nationality. 6 | 7 | **Examples of unacceptable behavior by participants include:** 8 | 9 | - The use of sexualized language or imagery 10 | - Personal attacks 11 | - Trolling or insulting/derogatory comments 12 | - Public or private harassment 13 | - Publishing other's private information, such as physical or electronic addresses, without explicit permission 14 | - Other unethical or unprofessional conduct 15 | - Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. 16 | 17 | By adopting this Code of Conduct, project maintainers commit themselves to fairly and consistently applying these principles to every aspect of managing this project. Project maintainers who do not follow or enforce the Code of Conduct may be permanently removed from the project team. 18 | 19 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. 20 | 21 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting a project maintainer at [kate@indiekate.com](mailto:kate@indiekate.com). All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. Maintainers are obligated to maintain confidentiality with regard to the reporter of an incident. 22 | 23 | This Code of Conduct is adapted from the Contributor Covenant, version 1.3.0, available from http://contributor-covenant.org/version/1/3/0/ 24 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to LightSwitch 2 | 3 | Thanks for contributing! 4 | 5 | ## Table of Contents 6 | - Code of Conduct 7 | - Testing 8 | - Submitting Changes 9 | - Coding conventions 10 | 11 | ### Code of Conduct 12 | 13 | The LightSwitch [code of conduct](CODE_OF_CONDUCT.md) is adapted from the the [Contributor Covenant](http://contributor-covenant.org/version/1/3/0/). Please adhere to these guidelines when contributing to the project. Violations of this code of conduct should be reported to [Kate Klemp](kate@indiekate.com). 14 | 15 | ### Testing 16 | 17 | COMING SOON - no testing is currently in place on LightSwitch (feel free to contribute some testing!) 18 | 19 | ### Submitting Changes 20 | 21 | Contributions should be sent via [GitHub pull request](http://help.github.com/pull-requests/) through this project repository. 22 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | # The MIT License (MIT) 2 | Copyright (c) 2016 Kate Klemp 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 5 | 6 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 7 | 8 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # LightSwitch 2 | 3 | A lightweight HTML5 single-page website using jQuery templating to switch content 4 | 5 | ### Prerequisities 6 | 7 | * A server for local development (I recommend [node.js http-server](https://www.npmjs.com/package/http-server) because it's fast and easy) 8 | * A text editor or your preferred IDE 9 | * A browser that renders Javascript 10 | 11 | ### Installing 12 | 13 | Clone the repo locally, navigate to the repo folder, fire up your web server, view in the browser, edit in your IDE 14 | 15 | The initial version has no styling or templating; this is meant to be as bare a repo as possible while still maintaining simple HTML5 standards, semantic elements, and a simple div to switch content out on-click of nav elements. I have included several pages for demonstration. 16 | 17 | ### How it works 18 | 19 | All the actual functional code is inside `index.html` 20 | 21 | The script at the bottom of the index page does three things: 22 | 1) sets the initial template to `pages/main.html` 23 | 2) sets up the header tag to load `pages/main.html` if clicked anywhere 24 | 3) loops through the nav divs to get their ids, then loads the template with the matching name inside the `pages` directory 25 | 26 | ``` 27 | 38 | ``` 39 | 40 | To add a page, create a new div inside the `nav` tags with `id="pagename"`, then create a template at `pages/pagename.html`. 41 | 42 | ``` 43 | 49 | ``` 50 | 51 | To delete a page, delete both the `div` in `index.html`, and the template inside the `pages` directory. 52 | 53 | To change a page, change the value of the `id` in its `div`, and change the name of the template inside the `pages` directory. 54 | 55 | As long as the `id` and the template name inside the `pages` directory are the same, the templating will work. 56 | 57 | Content is loaded into the article tag inside the div with `id="content-container"` 58 | 59 | ``` 60 |
61 |
62 |
63 | ``` 64 | 65 | ## Running the tests 66 | 67 | *Coming soonish* 68 | 69 | ## Deployment 70 | 71 | FTP or your choice of deploy process - this is meant to be a vanilla install with all working parts in tact, without a strong opinion about deployment or environment setup 72 | 73 | ## Built With 74 | 75 | * [Atom Editor](https://atom.io/) 76 | * [jQuery.loadTemplate](https://github.com/codepb/jquery-template) 77 | * [html5Doctor HTML5 boilerplate](http://html5doctor.com/html-5-boilerplates/) 78 | * [PureCSS](http://purecss.io/) 79 | * [jQuery v2.2.1 CDN](https://code.jquery.com/) 80 | 81 | 82 | ## Contributing 83 | 84 | Please read [CONTRIBUTING.md](CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us. 85 | 86 | ## Versioning 87 | 88 | We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/kateklemp/lightswitch/tags). 89 | 90 | ## Authors 91 | 92 | * **Kate Klemp** - *Initial work* - [kateklemp](https://github.com/kateklemp) 93 | 94 | See also the list of [contributors](https://github.com/kateklemp/lightswitch/contributors) who participated in this project. 95 | 96 | ## License 97 | 98 | This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details 99 | 100 | ## Acknowledgments 101 | 102 | * [OpenGovernment's Contributing Documentation](https://github.com/opengovernment/opengovernment/blob/master/CONTRIBUTING.md) 103 | * [Atom Editor's Contributing Documentation](https://github.com/atom/atom/blob/master/CONTRIBUTING.md) 104 | -------------------------------------------------------------------------------- /img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/katelovescode/lightswitch/df859ea731c6fce954a47fbdc8927f5a1c42549c/img/favicon.ico -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LightSwitch 6 | 7 | 8 | 11 | 14 | 15 | 16 | 17 |
18 |
Header
19 |
Subhead
20 |
21 | 27 |
28 |
29 |
30 | 31 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /js/loadTemplate.min.js: -------------------------------------------------------------------------------- 1 | (function(a){var w={},v={},h={},m;function o(G,C,E){var B=this,A,D,F;C=C||{};F=a.extend(true,{async:true,overwriteCache:false,complete:null,success:null,error:function(){a(this).each(function(){a(this).html(F.errorMessage)})},errorMessage:"There was an error loading the template.",paged:false,pageNo:1,elemPerPage:10,append:false,prepend:false,beforeInsert:null,afterInsert:null,bindingOptions:{ignoreUndefined:false,ignoreNull:false,ignoreEmptyString:false}},E);if(a.type(C)==="array"){m=true;return t.call(this,G,C,F)}if(!g(G)){A=a(G);if(typeof G==="string"&&G.indexOf("#")===0){F.isFile=false}}D=F.isFile||(typeof F.isFile==="undefined"&&(typeof A==="undefined"||A.length===0));if(D&&!F.overwriteCache&&w[G]){r(G,B,C,F)}else{if(D&&!F.overwriteCache&&w.hasOwnProperty(G)){c(G,B,C,F)}else{if(D){n(G,B,C,F)}else{p(A,B,C,F)}}}return this}function b(B,A){if(A){h[B]=A}else{h=a.extend(h,B)}}function g(A){return typeof A==="string"&&A.indexOf("/")>-1}function t(K,B,H){H=H||{};var A=this,L=B.length,D=H.prepend&&!H.append,C=0,J=0,E=false,F=[],G;if(H.paged){var I=(H.pageNo-1)*H.elemPerPage;B=B.slice(I,I+H.elemPerPage);L=B.length}G=a.extend({},H,{async:false,complete:function(M){if(this.html){var N;if(D){N=a(this.html()).prependTo(A)}else{N=a(this.html()).appendTo(A)}if(H.afterInsert&&M){H.afterInsert(N,M)}}C++;if(C===L||E){if(E&&H&&typeof H.error==="function"){H.error.call(A,F)}if(H&&typeof H.complete==="function"){H.complete()}}},success:function(){J++;if(J===L){if(H&&typeof H.success==="function"){H.success()}}},error:function(M){E=true;F.push(M)}});if(!H.append&&!H.prepend){A.html("")}if(D){B.reverse()}a(B).each(function(){var M=a("
");o.call(M,K,this,G);if(E){return false}});return this}function c(D,B,A,C){if(v[D]){v[D].push({data:A,selection:B,settings:C})}else{v[D]=[{data:A,selection:B,settings:C}]}}function r(E,C,B,D){var A=w[E].clone();q.call(C,A,B,D);if(typeof D.success==="function"){D.success()}}function x(){return new Date().getTime()}function y(A){if(A.indexOf("?")!==-1){return A+"&_="+x()}else{return A+"?_="+x()}}function n(E,C,B,D){var A=a("
");w[E]=null;var F=E;if(D.overwriteCache){F=y(F)}a.ajax({url:F,async:D.async,success:function(G){A.html(G);l(A,E,C,B,D)},error:function(G){k(E,C,B,D,G)}})}function p(A,D,C,E){var B=a("
");if(A.is("script")||A.is("template")){A=a.parseHTML(a.trim(A.html()))}B.html(A);q.call(D,B,C,E);if(typeof E.success==="function"){E.success()}}function q(C,A,B){f(C,A,B);a(this).each(function(){var D=a(C.html());if(B.beforeInsert){B.beforeInsert(D,A)}if(B.append){a(this).append(D)}else{if(B.prepend){a(this).prepend(D)}else{a(this).html(D)}}if(B.afterInsert&&!m){B.afterInsert(D,A)}});if(typeof B.complete==="function"){B.complete.call(a(this),A)}}function k(E,C,A,D,B){var F;if(typeof D.error==="function"){D.error.call(C,B)}a(v[E]).each(function(G,H){if(typeof H.settings.error==="function"){H.settings.error.call(H.selection,B)}});if(typeof D.complete==="function"){D.complete.call(C)}while(v[E]&&(F=v[E].shift())){if(typeof F.settings.complete==="function"){F.settings.complete.call(F.selection)}}if(typeof v[E]!=="undefined"&&v[E].length>0){v[E]=[]}}function l(A,E,C,B,D){var F;w[E]=A.clone();q.call(C,A,B,D);if(typeof D.success==="function"){D.success.call(C)}while(v[E]&&(F=v[E].shift())){q.call(F.selection,w[E].clone(),F.data,F.settings);if(typeof F.settings.success==="function"){F.settings.success.call(F.selection)}}}function f(C,A,B){A=A||{};u("data-content",C,A,B,function(D,E){D.html(e(D,E,"content",B))});u("data-content-append",C,A,B,function(D,E){D.append(e(D,E,"content",B))});u("data-content-prepend",C,A,B,function(D,E){D.prepend(e(D,E,"content",B))});u("data-content-text",C,A,B,function(D,E){D.text(e(D,E,"content",B))});u("data-innerHTML",C,A,B,function(D,E){D.html(e(D,E,"content",B))});u("data-src",C,A,B,function(D,E){D.attr("src",e(D,E,"src",B))},function(D){D.remove()});u("data-href",C,A,B,function(D,E){D.attr("href",e(D,E,"href",B))},function(D){D.remove()});u("data-alt",C,A,B,function(D,E){D.attr("alt",e(D,E,"alt",B))});u("data-id",C,A,B,function(D,E){D.attr("id",e(D,E,"id",B))});u("data-value",C,A,B,function(D,E){D.attr("value",e(D,E,"value",B))});u("data-class",C,A,B,function(D,E){D.addClass(e(D,E,"class",B))});u("data-link",C,A,B,function(D,F){var E=a("");E.attr("href",e(D,F,"link",B));E.html(D.html());D.html(E)});u("data-link-wrap",C,A,B,function(D,F){var E=a("");E.attr("href",e(D,F,"link-wrap",B));D.wrap(E)});u("data-options",C,A,B,function(D,E){a(E).each(function(){var F=a("