welenofsky · April 18, 2019 04:26
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 </head>
 <style>
 /* The switch - the box around the slider */
 .switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
 }

 /* Hide default HTML checkbox */
 .switch input {
  opacity: 0;
  width: 0;
  height: 0;
 }

 /* The slider */
 .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
 }

 .slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
 }

 input:checked + .slider {
  background-color: #2196F3;
 }

 input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
 }

 input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
 }

 /* Rounded sliders */
 .slider.round {
  border-radius: 34px;
 }

 .slider.round:before {
  border-radius: 50%;
 }

 .note-wrapper {
  padding-right: 50px;
 }

 .note-row {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
 }
 .output {
  width: 100%;
 }

 .output textarea {
  width: 100%;
  height: 100%;
 }

 .app-wrapper {
  display: flex;
  flex-direction: row;
 }
 </style>
 <body>
  <div id="app">
    <label>
      Character Limit:
    <input v-model.number="characterLimit" type="number">
    </label>
    <br />
    <label>
    Row Count:
    <input v-model.number="rowCount" type="number">
    </label>
    <div class="app-wrapper">
      <div class="note-wrapper">
        <div v-for="row in rowCount" class="note-row">
          <textarea v-on:input="updateRow($event, row)" v-bind:value="getRowData(row)" cols="30" rows="10"></textarea>
          <label class="switch">
            <input type="checkbox" v-on:change="updateStatus($event, row)" v-bind:value="getStatus(row)"   true-value="yes"
      false-value="no" v-bind:checked="getStatus(row) === 'yes'">
            <span class="slider"></span>
          </label>
        </div>
      </div>

      <div class="output">
        <b>Output:</b>
        <textarea name="output" id="output" cols="" rows="">{{ output }}</textarea>
      </div>
    </div>
  </div>
      
  <script>
    Vue.config.devtools = true
    new Vue({
    el: "#app",
    data() {
      return {
        characterLimit: 140,
        rowCount: 3,
        rowData: {},
      }
    },
    methods: {
      updateRow(event, rowNumber) {
        if(!this.rowData[rowNumber]) {
          Vue.set(this.rowData, rowNumber, {enabled: 'yes'});
        }
        Vue.set(this.rowData[rowNumber], 'text', event.target.value);
      },
      getRowData(rowNumber) {
        return this.rowData[rowNumber] && this.rowData[rowNumber].text || '';
      },
      updateStatus(event, rowNumber) {
        if(!this.rowData[rowNumber]) {
          Vue.set(this.rowData, rowNumber, {text: ''});    	
        }
        Vue.set(this.rowData[rowNumber], 'enabled', event.target.value === 'yes' ? 'no' : 'yes');
      },
      getStatus(rowNumber) {
        return this.rowData[rowNumber] && this.rowData[rowNumber].enabled || "yes";
      }
    },
    computed: {
      output() {
        let content = "";
        const entries = Object.entries(this.rowData);
        for(let i = 0; i < entries.length; i++) {
          const [index, textData] = entries[i];
          let string = this.rowData[index].text;
          if(this.rowData[index].enabled === 'yes' && string.length) {
            if(string.length > this.characterLimit) {
              const partitions = Math.ceil(string.length / this.characterLimit);
              let count = 1;          
              while(string.length) {
                let substring = string.substr(0, this.characterLimit);
                content += `${substring} ${count}/${partitions}\n`;
                string = string.substr(this.characterLimit);
                count++;
              }
            } else {
              content += string + "\n";       	
            }
          }
        }
        return content;
      }
    }
  })
  </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<style>
	/* The switch - the box around the slider */
	.switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
	}

	/* Hide default HTML checkbox */
	.switch input {
	opacity: 0;
	width: 0;
	height: 0;
	}

	/* The slider */
	.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
	}

	.slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
	}

	input:checked + .slider {
	background-color: #2196F3;
	}

	input:focus + .slider {
	box-shadow: 0 0 1px #2196F3;
	}

	input:checked + .slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
	}

	/* Rounded sliders */
	.slider.round {
	border-radius: 34px;
	}

	.slider.round:before {
	border-radius: 50%;
	}

	.note-wrapper {
	padding-right: 50px;
	}

	.note-row {
	display: flex;
	align-items: center;
	margin-bottom: 25px;
	}
	.output {
	width: 100%;
	}

	.output textarea {
	width: 100%;
	height: 100%;
	}

	.app-wrapper {
	display: flex;
	flex-direction: row;
	}
	</style>
	<body>
	<div id="app">
	<label>
	Character Limit:
	<input v-model.number="characterLimit" type="number">
	</label>
	<br />
	<label>
	Row Count:
	<input v-model.number="rowCount" type="number">
	</label>
	<div class="app-wrapper">
	<div class="note-wrapper">
	<div v-for="row in rowCount" class="note-row">
	<textarea v-on:input="updateRow($event, row)" v-bind:value="getRowData(row)" cols="30" rows="10"></textarea>
	<label class="switch">
	<input type="checkbox" v-on:change="updateStatus($event, row)" v-bind:value="getStatus(row)" true-value="yes"
	false-value="no" v-bind:checked="getStatus(row) === 'yes'">
	<span class="slider"></span>
	</label>
	</div>
	</div>

	<div class="output">
	<b>Output:</b>
	<textarea name="output" id="output" cols="" rows="">{{ output }}</textarea>
	</div>
	</div>
	</div>

	<script>
	Vue.config.devtools = true
	new Vue({
	el: "#app",
	data() {
	return {
	characterLimit: 140,
	rowCount: 3,
	rowData: {},
	}
	},
	methods: {
	updateRow(event, rowNumber) {
	if(!this.rowData[rowNumber]) {
	Vue.set(this.rowData, rowNumber, {enabled: 'yes'});
	}
	Vue.set(this.rowData[rowNumber], 'text', event.target.value);
	},
	getRowData(rowNumber) {
	return this.rowData[rowNumber] && this.rowData[rowNumber].text \|\| '';
	},
	updateStatus(event, rowNumber) {
	if(!this.rowData[rowNumber]) {
	Vue.set(this.rowData, rowNumber, {text: ''});
	}
	Vue.set(this.rowData[rowNumber], 'enabled', event.target.value === 'yes' ? 'no' : 'yes');
	},
	getStatus(rowNumber) {
	return this.rowData[rowNumber] && this.rowData[rowNumber].enabled \|\| "yes";
	}
	},
	computed: {
	output() {
	let content = "";
	const entries = Object.entries(this.rowData);
	for(let i = 0; i < entries.length; i++) {
	const [index, textData] = entries[i];
	let string = this.rowData[index].text;
	if(this.rowData[index].enabled === 'yes' && string.length) {
	if(string.length > this.characterLimit) {
	const partitions = Math.ceil(string.length / this.characterLimit);
	let count = 1;
	while(string.length) {
	let substring = string.substr(0, this.characterLimit);
	content += `${substring} ${count}/${partitions}\n`;
	string = string.substr(this.characterLimit);
	count++;
	}
	} else {
	content += string + "\n";
	}
	}
	}
	return content;
	}
	}
	})
	</script>
	</body>
	</html>