<commit_before>import $ from 'jquery';
import waitForElement from 'wait-for-element';

const get_format = ($wrapper) => {
	const text = $wrapper.text();
	const isMixin = /mixin|include/i.test(text);
	return isMixin ? 'mixin' : 'classes';
}

class DemoCode {
	constructor(elem){
		this.$wrapper = $(elem);
		this.type = this.get_type();
		this.format = get_format(this.$wrapper);
		console.log(this);
		if (this.type === 'html' && this.format === 'classes'){
			this.add_html_class();
		} else if (this.type === 'scss' && this.format === 'mixin') {
			this.add_mixin_setting();
		}
	}

	get_type(){
		const classes = this.$wrapper.attr('class');
		const result = /\s([A-z]+)$/.exec(classes);
		return result[1];
	}

	add_html_class(){
		waitForElement('.hljs-string').then(()=>{
			const $hljsStrings = this.$wrapper.find('.hljs-string');
			const $filtered = $hljsStrings.filter((i,elem) => {
				return $(elem).text().indexOf('grid ') > -1;
			})
			$filtered.each(function(){
				const text = $(this).text();
				const newText = text.replace(/"$/g, ' grid--wrap"');
				$(this).text(newText);
			});
		})
	}

	add_mixin_setting(){
		const $hljsStrings = this.$wrapper.find('.hljs-string');
	}
}

class DemoResult {
	constructor(resultElem){
		this.$result = $(resultElem);
		this.format = get_format(this.$result);

		if (this.format === 'classes') {
			this.add_wrap_class();
		}
	}

	add_wrap_class(){
		const $grids = this.$result.find('> * > .grid, > .grid');

		const $wraps = $grids.filter(function(){
			return $(this).attr('class').indexOf('grid--cols') > -1;
		})

		$wraps.not('.grid--noWrap').addClass('grid--wrap');
	}
}

class Demo {
	constructor(demoElem){
		this.$demo = $(demoElem);
		this.$results = this.$demo.find('.demo__result');
		this.$codeBlocks = this.$demo.find('.demo__markup');
		this.results =  this.gather_classes(this.$results, DemoResult);
		this.codeBlocks = this.gather_classes(this.$codeBlocks, DemoCode);
	}

	gather_classes($elem, Cls){
		const classArray = [];

		$elem.each((i,elem)=>{
			const Class = new Cls(elem);
			classArray.push(Class);
		});

		return classArray;
	}
}

export default function(){
	if (
		!Modernizr.flexbox &&
		window.location.pathname !== '/pages/05-control-wrapping/'
	){
		$('.demo').each(function(){
			new Demo(this);
		})
	}
}<commit_msg>Adding $wrap variable to displayed sass mixin<commit_after>import $ from 'jquery';
import waitForElement from 'wait-for-element';

const get_format = ($wrapper) => {
	const text = $wrapper.text();
	const isMixin = /mixin|include/i.test(text);
	return isMixin ? 'mixin' : 'classes';
}

class DemoCode {
	constructor(elem){
		this.$wrapper = $(elem);
		this.type = this.get_type();
		this.format = get_format(this.$wrapper);
		if (this.type === 'html' && this.format === 'classes'){
			this.add_html_class();
		} else if (this.type === 'scss' && this.format === 'mixin') {
			this.add_mixin_wrap_setting();
		}
	}

	get_type(){
		const classes = this.$wrapper.attr('class');
		const result = /\s([A-z]+)$/.exec(classes);
		return result[1];
	}

	add_html_class(){
		waitForElement('.hljs-string').then(()=>{
			const $hljsStrings = this.$wrapper.find('.hljs-string');
			const $filtered = $hljsStrings.filter((i,elem) => {
				const text = $(elem).text();
				const isInitialiser = text.indexOf('grid ') > -1;
				const hasColumns = text.indexOf('grid--cols-') > -1;
				const isVertical = text.indexOf('grid--vertical') > -1;
				return isInitialiser && hasColumns && !isVertical;
			})
			$filtered.each(function(){
				const text = $(this).text();
				const newText = text.replace(/"$/g, ' grid--wrap"');
				$(this).text(newText);
			});
		})
	}

	add_mixin_wrap_setting(){
		const html = this.$wrapper.html();
		if (html.indexOf('<span class="hljs-variable">$wrap</span>: false') === -1){
			let newHTML = html.replace(/include<\/span> grid\(<span class="hljs-number">(.+)\)/gi, 'include</span> grid(<span class="hljs-number">$1, <span class="hljs-variable">$wrap</span>: true)');
			if (html.indexOf('.mixin-13</span>') > -1){
				const prevHTML = '@<span class="hljs-keyword">include</span> grid(<span class="hljs-number">3</span>, <span class="hljs-variable">$MQs</span>: false';
				newHTML = html.replace(prevHTML, prevHTML+', <span class="hljs-variable">$wrap</span>: true');
			}
			this.$wrapper.html(newHTML);
		}
	}
}

class DemoResult {
	constructor(resultElem){
		this.$result = $(resultElem);
		this.format = get_format(this.$result);

		if (this.format === 'classes') {
			this.add_wrap_class();
		}
	}

	add_wrap_class(){
		const $grids = this.$result.find('> * > .grid, > .grid, > figure > * > .grid');

		const $wraps = $grids.filter(function(){
			const hasCols = $(this).attr('class').indexOf('grid--cols') > -1;
			return hasCols;
		})

		$wraps.not('.grid--noWrap').not('grid--vertical').addClass('grid--wrap');
	}
}

class Demo {
	constructor(demoElem){
		this.$demo = $(demoElem);
		this.$results = this.$demo.find('.demo__result');
		this.$codeBlocks = this.$demo.find('.demo__markup');
		this.$summary = this.$demo.find('.demo__summary');

		if (this.can_modify()) {
			this.results =  this.gather_classes(this.$results, DemoResult);
			this.codeBlocks = this.gather_classes(this.$codeBlocks, DemoCode);
		}
	}

	can_modify(){
		return this.$summary.text().trim() != 'Using nested grids to vertically align text inside full sized grid cells';
	}

	gather_classes($elem, Cls){
		const classArray = [];

		$elem.each((i,elem)=>{
			const Class = new Cls(elem);
			classArray.push(Class);
		});

		return classArray;
	}
}

export default function(){
	const excludedPages = [
		'/pages/04-using-columns/',
		'/pages/05-control-wrapping/',
		'/pages/09-nesting-grids/',
		'/pages/10-borders-and-shadows-on-guttered-cells/',
	];

	if (
		!Modernizr.flexbox &&
		excludedPages.indexOf(window.location.pathname) === -1
	){
		$('.demo').each(function(){
			new Demo(this);
		})
	}
}
{'fraction_non_alphanumeric': 0.20920006764755622, 'fraction_numerical': 0.004227972264501945, 'mean_word_length': 3.9655751469353486, 'pattern_counts': {'":': 0, '<': 20, '<?xml version=': 0, '>': 44, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5802812', 'n_tokens_mistral': 2321, 'n_tokens_neox': 2077, 'n_words': 360}