[auto] theme: vanilla 1.6.3

wp-content/themes/vanilla/LICENSE

+Copyright 2016 Toro_Unit (email : mail@torounit.com)
+
+This program is free software; you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation; either version 2 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program; if not, write to the Free Software
+Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA

wp-content/themes/vanilla/assets/scripts/AppLayout/ContentSpacer.js

+import $ from 'jquery';
+
+export default class ContentSpacer {
+	/**
+	 *
+	 * @param {jQuery} $el
+	 */
+	constructor( $el ) {
+		this.$el = $el;
+		let header = $el.data('app-layout-header');
+		let content = $el.data('app-layout-spacer');
+
+		this.$header = $( header );
+		this.$content = $( content );
+		this.on();
+	}
+
+	on() {
+		$(window).on( 'load resize', () => {
+			this.setPadding()
+		} );
+	}
+
+	setPadding() {
+		this.$content.css({paddingTop: this.getHeaderHeight() + 'px'});
+	}
+
+	getHeaderHeight() {
+
+		return this.$header.height();
+	}
+}
\ No newline at end of file

wp-content/themes/vanilla/assets/scripts/AppLayout/HeaderClassController.js

+import $ from 'jquery';
+import _ from 'underscore';
+
+
+export default class AppLayoutClassController {
+	/**
+	 *
+	 * @param $el
+	 * @param classString
+	 * @param threshold クラスの設定をするためのスクロール位置
+	 */
+	constructor( $el, classString, threshold ) {
+		this.classString = classString;
+		this.threshold = threshold;
+		this.$el = $el;
+		let header = $el.data('app-layout-header');
+		let content = $el.data('app-layout-scroll-area');
+		this.$header = $( header );
+		if ( content && content != 'window' ) {
+			this.$content = $( content );
+		}
+		else {
+			this.$content = $( window );
+		}
+
+		this.initialize();
+		this.on();
+	}
+
+	initialize() {
+		//for override
+	}
+
+	on() {
+		this.$content.on( 'scroll resize', _.throttle(function(){
+			this.toggleClass();
+		}, 1 ).bind(this) );
+	}
+
+	toggleClass() {
+		if( this.isExceedsThreshold() ) {
+			this.$header.addClass( this.classString );
+		}
+		else {
+			this.$header.removeClass( this.classString );
+		}
+	}
+
+	getThreshold() {
+		if( typeof this.threshold  == "function" ) {
+			return this.threshold();
+		}
+		else {
+			return this.threshold;
+		}
+	}
+
+	isExceedsThreshold() {
+		let scrollTop = this.$content.scrollTop();
+		return ( scrollTop > this.getThreshold() );
+
+	}
+}
+

wp-content/themes/vanilla/assets/scripts/AppLayout/HeaderEscaper.js

+import HeaderClassController from './HeaderClassController';
+
+export default class extends HeaderClassController {
+
+	initialize() {
+		this.scrollPos = this.getScrollPosition();
+	}
+
+	getScrollPosition() {
+		return this.$content.scrollTop();
+	}
+
+	toggleClass() {
+		let currentPos = this.getScrollPosition();
+
+		if( ! this.isExceedsThreshold() ) {
+			this.$header.removeClass( this.classString );
+			this.$header.attr('aria-hidden', 'false');
+		}
+		else if(  currentPos - this.scrollPos > 5 ) {
+			//scroll to down
+			this.$header.addClass( this.classString );
+			this.$header.attr('aria-hidden', 'true');
+		}
+		else if (  currentPos - this.scrollPos < - 5 ) {
+			//scroll to up
+			this.$header.removeClass( this.classString );
+			this.$header.attr('aria-hidden', 'false');
+		}
+
+		this.scrollPos = currentPos;
+	}
+
+}

wp-content/themes/vanilla/assets/scripts/Drawer.js

+import $ from 'jquery';
+
+export default class Drawer {
+
+	constructor($el) {
+		this.$el = $el;
+		this.$container = $($el.data("drawer-container-selector"));
+		this.id = $el.attr('id');
+		this.$controller = $( '[aria-controls="'+this.id+'" ]' );
+		this.$container.addClass("drawer-container");
+		this.on();
+
+	}
+
+	on() {
+		this.$controller.on('click', this.toggle.bind(this));
+		this.$el.on('click', this.close.bind(this));
+		this.$el.children().on('click', function(event){
+			event.stopPropagation();
+		})
+
+		$(document).on('keyup', (event) => {
+			if (event.keyCode == 27) {
+				this.close();
+			}
+		})
+
+		this.$el.on('transitionend', this.transitionend.bind(this));
+	}
+
+	transitionend() {
+		this.$el.removeClass('is-animated');
+	}
+
+	toggle(event) {
+		event.preventDefault();
+		if ( this.$el.attr('aria-expanded') == "false" ) {
+			this.open();
+		} else {
+			this.close();
+		}
+	}
+
+	open() {
+		this.$el.addClass('is-animated');
+		this.$el.attr('aria-expanded',"true");
+		this.$el.attr('aria-hidden',"false");
+		this.$controller.attr('aria-expanded',"true");
+		this.$container.addClass("is-drawer-open");
+
+
+	}
+
+	close() {
+		this.$el.addClass('is-animated');
+		this.$el.attr('aria-expanded',"false");
+		this.$el.attr('aria-hidden',"true");
+		this.$controller.attr('aria-expanded',"false");
+		this.$container.removeClass("is-drawer-open");
+	}
+
+	static init() {
+		$("[data-drawer]").each(function(){
+			new Drawer($(this));
+		});
+	}
+}
\ No newline at end of file

wp-content/themes/vanilla/assets/scripts/customizer/color.js

+(function (api) {
+	var cssTemplate = wp.template('vanilla-color');
+	var colorSchemeKeys = [
+		'background_color',
+		'link_color',
+		'text_color',
+		'header_textcolor',
+		'navbar_textcolor',
+		'navbar_background_color',
+		'archive_header_textcolor',
+		'archive_header_background_color',
+		'post_thumbnail_background_color',
+		'footer_textcolor',
+		'footer_background_color',
+
+	];
+
+	function updateCSS() {
+		var css,
+			colors = colorSchemeKeys;
+
+		// Merge in color scheme overrides.
+		_.each(colorSchemeKeys, function (setting) {
+			var color = api(setting)();
+			if( !color ) {
+				if ( setting.indexOf('background_color') ) {
+					color = 'transparent'
+				}
+				else {
+					color = 'inherit'
+				}
+			}
+			colors[setting] = color;
+		});
+
+		css = cssTemplate(colors);
+
+		api.previewer.send('update-color-css', css);
+	}
+
+	// Update the CSS whenever a color setting is changed.
+	_.each(colorSchemeKeys, function (setting) {
+		api(setting, function (setting) {
+			setting.bind(updateCSS);
+		});
+	});
+})(wp.customize);

wp-content/themes/vanilla/assets/scripts/customizer/controls.js

+/**
+ * Live-update changed settings in real time in the Customizer preview.
+ */
+
+( function( $ ) {
+	var api = wp.customize;
+	api.bind( 'ready', function() {
+		"use strict";
+		//Detect when the front page sections section is expanded (or closed) so we can adjust the preview accordingly.
+		api.section( 'theme_options', function( section ) {
+			section.expanded.bind( function( isExpanding ) {
+
+				// Value of isExpanding will = true if you're entering the section, false if you're leaving it.
+				api.previewer.send( 'section-highlight', { expanded: isExpanding });
+			} );
+		} );
+	});
+
+} )( jQuery );

wp-content/themes/vanilla/assets/scripts/customizer/preview.js

+/**
+ * Live-update changed settings in real time in the Customizer preview.
+ */
+
+( function( $ ) {
+	var style = $( '#vanilla-color-css' ),
+		api = wp.customize;
+
+	api.bind( 'preview-ready', function() {
+		"use strict";
+		$( '.panel--placeholder' ).hide();
+		api.preview.bind( 'section-highlight', function( data ) {
+			// When the section is expanded, show and scroll to the content placeholders, exposing the edit links.
+
+			if ( true === data.expanded ) {
+				$( 'body' ).addClass( 'highlight-front-sections' );
+				$( '.panel--placeholder' ).slideDown( 200, function() {
+					$("html, body").animate({
+						scrollTop: $( '#panel1' ).offset().top
+					}, 600);
+				});
+
+				// If we've left the panel, hide the placeholders and scroll back to the top.
+			} else {
+				$( 'body' ).removeClass( 'highlight-front-sections' );
+				// Don't change scroll when leaving - it's likely to have unintended consequences.
+				$( '.panel--placeholder' ).slideUp( 200 );
+			}
+		});
+	});
+
+
+	if ( ! style.length ) {
+		style = $( 'head' ).append( '<style type="text/css" id="vanilla-color-css" />' )
+			.find( '#vanilla-color-css' );
+	}
+
+	// Color Scheme CSS.
+	api.bind( 'preview-ready', function() {
+		api.preview.bind( 'update-color-css', function( css ) {
+			style.html( css );
+			//$("#vanilla-color-css").remove();
+		} );
+	} );
+
+	// Page layouts.
+	api( 'posts_layout_on_front_page', function( value ) {
+		value.bind( function( to ) {
+			if ( 'list' === to ) {
+				$( 'body' ).addClass( 'postlist-style-list' ).removeClass( 'postlist-style-block' );
+			} else {
+				$( 'body' ).removeClass( 'postlist-style-list' ).addClass( 'postlist-style-block' );
+			}
+		} );
+	} );
+
+	// Site title.
+	api( 'blogname', function( value ) {
+		value.bind( function( to ) {
+			$( '.site-title a' ).text( to );
+		} );
+	} );
+
+	// Site tagline.
+	api( 'blogdescription', function( value ) {
+		value.bind( function( to ) {
+			$( '.site-description' ).text( to );
+		} );
+	} );
+
+	// Add custom-background-image body class when background image is added.
+	api( 'background_image', function( value ) {
+		value.bind( function( to ) {
+			$( 'body' ).toggleClass( 'custom-background-image', '' !== to );
+		} );
+	} );
+
+
+
+
+	// Header text color.
+	api( 'header_textcolor', function( value ) {
+		value.bind( function( to ) {
+			if ( 'blank' === to ) {
+				$( '.custom-header__branding' ).css({
+					clip: 'rect(1px, 1px, 1px, 1px)',
+					position: 'absolute'
+				});
+				// Add class for different logo styles if title and description are hidden.
+				$( 'body' ).addClass( 'title-tagline-hidden' );
+			} else {
+
+				// Check if the text color has been removed and use default colors in theme stylesheet.
+				if ( ! to.length ) {
+					$( '#vanilla-custom-header-styles' ).remove();
+				}
+				// $( '.custom-header__branding' ).css({
+				// 	clip: 'auto',
+				// 	position: 'relative'
+				// });
+				$( '.custom-header' ).css({
+					color: to
+				});
+				// Add class for different logo styles if title and description are visible.
+				$( 'body' ).removeClass( 'title-tagline-hidden' );
+			}
+		});
+	});
+
+	// Whether a header image is available.
+	function hasHeaderImage() {
+		var image = api( 'header_image' )();
+		return '' !== image && 'remove-header' !== image;
+	}
+
+
+	// Toggle a body class if a custom header exists.
+	$.each( [ 'header_image' ], function( index, settingId ) {
+		wp.customize( settingId, function( setting ) {
+			setting.bind(function() {
+				if ( hasHeaderImage() ) {
+					$( ".custom-header" ).addClass( 'custom-header--has-image' );
+				} else {
+					$( ".custom-header" ).removeClass( 'custom-header--has-image' );
+				}
+			} );
+		} );
+	} );
+
+
+
+} )( jQuery );

wp-content/themes/vanilla/assets/scripts/skip-link-focus-fix.js

+/**
+ * File skip-link-focus-fix.js.
+ *
+ * Helps with accessibility for keyboard only users.
+ *
+ * Learn more: https://git.io/vWdr2
+ */
+( function() {
+	var isWebkit = navigator.userAgent.toLowerCase().indexOf( 'webkit' ) > -1,
+		isOpera  = navigator.userAgent.toLowerCase().indexOf( 'opera' )  > -1,
+		isIe     = navigator.userAgent.toLowerCase().indexOf( 'msie' )   > -1;
+
+	if ( ( isWebkit || isOpera || isIe ) && document.getElementById && window.addEventListener ) {
+		window.addEventListener( 'hashchange', function() {
+			var id = location.hash.substring( 1 ),
+				element;
+
+			if ( ! ( /^[A-z0-9_-]+$/.test( id ) ) ) {
+				return;
+			}
+
+			element = document.getElementById( id );
+
+			if ( element ) {
+				if ( ! ( /^(?:a|select|input|button|textarea)$/i.test( element.tagName ) ) ) {
+					element.tabIndex = -1;
+				}
+
+				element.focus();
+			}
+		}, false );
+	}
+})();

wp-content/themes/vanilla/assets/scripts/theme.js

+import $ from 'jquery';
+import Drawer from './Drawer';
+import HeaderClassController from './AppLayout/HeaderClassController';
+import HeaderEscaper from './AppLayout/HeaderEscaper';
+import ContentSpacer from './AppLayout/ContentSpacer';
+import './skip-link-focus-fix';
+
+$(function() {
+
+	$("[data-drawer]").each(function(){
+		new Drawer($(this));
+	});
+
+});
+
+
+$(function() {
+
+	let $toplevelMenuItems = $('.primary-menu .menu-item-has-children, .primary-menu .page_item_has_children');
+	// Add dropdown toggle that displays child menu items.
+	let $dropdownToggle = $( '<button />', {
+		'class': 'dropdown-toggle',
+		'aria-expanded': false
+	} ).append( $( '<span />', {
+		'class': 'screen-reader-text',
+		text: screenReaderText.expand
+	} ) );
+
+	$toplevelMenuItems.children('a').after( $dropdownToggle );
+
+
+	$(".primary-menu .sub-menu, .primary-menu .children").each(function () {
+		$(this).attr('aria-expanded',"false");
+	});
+
+	$toplevelMenuItems.find('.dropdown-toggle').on( 'click', function (event) {
+		let self = $(this);
+		let expanded = '';
+		if( 'true' == self.attr('aria-expanded')  ) {
+			expanded = 'false';
+			self.find('.screen-reader-text').text(screenReaderText.expand);
+		}
+		else {
+			expanded = 'true';
+			self.find('.screen-reader-text').text(screenReaderText.collapse);
+		}
+		self.attr('aria-expanded', expanded);
+
+		self.siblings('.sub-menu,.children').attr('aria-expanded', expanded);
+	})
+
+});
+
+
+$(function() {
+
+	let $appLayout = $(".app-layout");
+	$(window).on( 'load resize', () => {
+		$appLayout.removeClass("app-layout--disable");
+	} );
+	new HeaderClassController( $appLayout, "app-layout__header--fixed", 46 );
+	new HeaderEscaper( $appLayout, "app-layout__header--escape", 64 );
+	new ContentSpacer( $appLayout );
+
+});
+

wp-content/themes/vanilla/assets/styles/Base/embed.styl

+// Embed
+//
+// Styleguide 1.5
+
+img,
+svg {
+	max-width: 100%;
+	height: auto;
+}
+
+iframe {
+	max-width: 100%;
+}
+
+video {
+	margin-bottom: 1em;
+}
+
+figure {
+
+	margin: 1em 0;
+
+	figcaption {
+		text-align: center;
+
+		font-size: 1em;
+	}
+}
+

wp-content/themes/vanilla/assets/styles/Base/form.styl

+// Form
+//
+// Styleguide 1.6
+
+select {
+	line-height: inherit;
+	box-sizing: border-box;
+	padding: 6px 12px;
+	color: #555;
+	background-image: none;
+	border: none;
+	border-radius: 4px;
+	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+}
+
+select {
+	height: 1.75em;
+}
+
+select,
+input[type="text"],
+input[type="date"],
+input[type="tel"],
+input[type="url"],
+input[type="email"],
+input[type="search"],
+input[type="datetime"],
+input[type="image"],
+input[type="password"],
+input[type="submit"],
+input[type="button"],
+input[type="reset"],
+button,
+textarea {
+	box-sizing: border-box;
+	padding: .25em 1em;
+	font-size: 1em;
+	line-height: 1.75;
+	background-color: inherit;
+	border: 1px solid rgba(0,0,0,.15);
+	//box-shadow: inset 0 0 1px rgba(0, 0, 0, .3);
+	&:focus {
+		outline: thin dotted;
+	}
+}
+select,
+input[type="text"],
+input[type="date"],
+input[type="tel"],
+input[type="url"],
+input[type="email"],
+input[type="search"],
+input[type="datetime"],
+input[type="image"],
+input[type="password"],
+textarea {
+	max-width 100%;
+	background-color: #fff;
+	background-image: none;
+	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+}
+
+textarea {
+	height: auto;
+}
+
+input[type="submit"],
+input[type="button"],
+input[type="reset"],
+button {
+	text-align: center;
+	white-space: nowrap;
+	touch-action: manipulation;
+	cursor: pointer;
+	user-select: none;
+	background-image: none;
+}

wp-content/themes/vanilla/assets/styles/Base/heading.styl

+// Heading
+//
+// Markup:
+// <h1>h1</h1>
+// <h2>h2</h2>
+// <h3>h3</h3>
+// <h4>h4</h4>
+// <h5>h5</h5>
+// <h6>h6</h6>
+//
+// Styleguide 1.2
+
+h1 {
+	font-weight: 600;
+	font-size: 2em;
+	margin: 0.5em 0;
+}
+
+h2 {
+	font-weight: 600;
+	clear: both;
+	box-sizing: border-box;
+	font-size: 1.7em;
+	margin: 1em 0;
+	border-top: 1px solid rgba(0, 0, 0, .1);
+	padding-top: 1em;
+
+}
+
+h3 {
+	font-weight: 600;
+	font-size: 1.38em;
+	border-top: 1px solid rgba(0, 0, 0, .05);
+	padding-top: 1em;
+
+}
+
+h4 {
+	font-weight: 600;
+	font-size: 1.15em;
+	//border-top: 1px solid rgba(0, 0, 0, .3);
+	//padding-top: 1.33em;
+}
+
+h5 {
+	font-weight: 600;
+	font-size: 1em;
+}
+
+h6 {
+	font-weight: normal;
+	font-size: 1em;
+	margin: 1.67em 0;
+}

wp-content/themes/vanilla/assets/styles/Base/hr.styl

+hr {
+	border: none;
+	border-top: #666 3px solid;
+	width: 80%;
+	margin: 20px auto;
+	clear: both;
+}
\ No newline at end of file

wp-content/themes/vanilla/assets/styles/Base/links.styl

+// Anchor
+//
+// Markup:
+// <a href="#">Link</a>
+//
+// Styleguide 1.3
+
+a {
+	color: #337ab7;
+	text-decoration: none;
+
+	&:hover {
+		text-decoration: underline;
+	}
+
+	&:hover {
+		img {
+			opacity: 0.8;
+		}
+	}
+
+	&:focus {
+		outline: thin dotted;
+	}
+
+}

wp-content/themes/vanilla/assets/styles/Base/list.styl

+
+// List
+//
+// Markup:
+// <ul>
+//   <li>Element</li>
+//   <li>Element</li>
+//   <li>Element</li>
+// </ul>
+//
+// <ol>
+//   <li>Element</li>
+//   <li>Element</li>
+//   <li>Element</li>
+// </ol>
+//
+// Styleguide 1.4
+
+ol,
+ul {
+	padding-left: 1.5em;
+}
+
+dd {
+	margin-left: 1.5em;
+}
+

wp-content/themes/vanilla/assets/styles/Base/table.styl

+// Table
+//
+// Table Base Style.
+//
+// Styleguide 1.7
+
+table {
+	width: 100%;
+}
+
+thead {
+	background-color: #999;
+	color: #FFF;
+}
+tr {
+
+	&:nth-child(2n) {
+		background-color: #f2f2f2;
+	}
+	//display: block;
+	//@media $small-up {
+	//	display: table-row;
+	//	border-bottom: none;
+	//}
+}
+
+th,
+td {
+	padding: 1em;
+	text-align: center;
+	white-space: nowrap;
+	border: 1px solid #fff;
+
+	//display: block;
+	//@media $small-up {
+	//	display: table-cell;
+	//}
+}
+
+th {
+	font-weight: bold;
+}
\ No newline at end of file