I cant work with cookies well in vue.js. I want to show data on another page in history.
How can I save data from my calculator with cookies in vue.js ?
Code :
<template>
<html>
<body>
<div id="app">
<div class="container">
<div class="calculator">
<div class="answer">{{ answer }}</div>
<div class="display">{{ logList + current }}</div>
<div #click="clear" id="clear" class="btn operator">C</div>
<div #click="sign" id="sign" class="btn operator">+/-</div>
<div #click="percent" id="percent" class="btn operator">
%
</div>
<div #click="divide" id="divide" class="btn operator">
/
</div>
<div #click="append('7')" id="n7" class="btn">7</div>
<div #click="append('8')" id="n8" class="btn">8</div>
<div #click="append('9')" id="n9" class="btn">9</div>
<div #click="times" id="times" class="btn operator">*</div>
<div #click="append('4')" id="n4" class="btn">4</div>
<div #click="append('5')" id="n5" class="btn">5</div>
<div #click="append('6')" id="n6" class="btn">6</div>
<div #click="minus" id="minus" class="btn operator">-</div>
<div #click="append('1')" id="n1" class="btn">1</div>
<div #click="append('2')" id="n2" class="btn">2</div>
<div #click="append('3')" id="n3" class="btn">3</div>
<div #click="plus" id="plus" class="btn operator">+</div>
<div #click="append('0')" id="n0" class="zero">0</div>
<div #click="dot" id="dot" class="btn">.</div>
<div #click="equal" id="equal" class="btn operator">=</div>
</div>
</div>
</div>
</body>
</html>
</template>
I cant work with model well in vue.js. I want to show what happened to numbers on another page in history.
This is my script :
<script>
export default {
data() {
return {
logList: '',
current: '',
answer: '',
operatorClicked: true,
}
},
methods: {
append(number) {
if (this.operatorClicked) {
this.current = ''
this.operatorClicked = false
}
this.current = `${this.current}${number}`
},
addtoLog(operator) {
if (this.operatorClicked == false) {
this.logList += `${this.current} ${operator} `
this.current = ''
this.operatorClicked = true
}
},
clear() {
this.current = ''
this.answer = ''
this.logList = ''
this.operatorClicked = false
},
sign() {
if (this.current != '') {
this.current =
this.current.charAt(0) === '-'
? this.current.slice(1)
: `-${this.current}`
}
},
percent() {
if (this.current != '') {
this.current = `${parseFloat(this.current) / 100}`
}
},
dot() {
if (this.current.indexOf('.') === -1) {
this.append('.')
}
},
divide() {
this.addtoLog('/')
},
times() {
this.addtoLog('*')
},
minus() {
this.addtoLog('-')
},
plus() {
this.addtoLog('+')
},
equal() {
if (this.operatorClicked == false) {
this.answer = eval(this.logList + this.current)
} else {
this.answer = 'wrong!'
}
},
},
}
</script>
mounted() {
if (localStorage.data) {
this.data = JSON.parse(localStorage.data);
}
},
watch: {
data(newData) {
localStorage.data = newData;
}
}
You could do something like this to save your data in local storage, and then load it on a page refresh. Or you can move the watcher into method and have it be triggered by "save" button.
I am trying to add an image on button click like we call an icon or shape in TUI image editor Mobile. So for this, I added the following code in service-mobile.js
var $btnAddImageShade = $('#btn-add-image-shade');
$btnAddImageShade.on('click', function() {
imageEditor.addImageObject('img/shade1.png').then(objectProps => {
imageEditor.setObjectPosition(objectProps.id, {
x: 530,
y: 0,
originX: 'left',
originY: 'top'
});
});
});
and on the main page
<button class="submenu-button" id="btn-add-image-shade">Image 1</button>
is it a correct code to call an image on button click?
/**
* mobile.js
* #author NHN Ent. FE Development Team <dl_javascript#nhn.com>
* #fileoverview
*/
/* eslint-disable vars-on-top,no-var,strict,prefer-template,prefer-arrow-callback,prefer-destructuring,object-shorthand,require-jsdoc,complexity */
'use strict';
var MAX_RESOLUTION = 3264 * 2448; // 8MP (Mega Pixel)
var supportingFileAPI = !!(window.File && window.FileList && window.FileReader);
var rImageType = /data:(image\/.+);base64,/;
var shapeOpt = {
fill: '#fff',
stroke: '#000',
strokeWidth: 10
};
var activeObjectId;
// Selector of image editor controls
var submenuClass = '.submenu';
var hiddenmenuClass = '.hiddenmenu';
var $controls = $('.tui-image-editor-controls');
var $menuButtons = $controls.find('.menu-button');
var $submenuButtons = $controls.find('.submenu-button');
var $btnShowMenu = $controls.find('.btn-prev');
var $msg = $controls.find('.msg');
var $subMenus = $controls.find(submenuClass);
var $hiddenMenus = $controls.find(hiddenmenuClass);
// Image editor controls - top menu buttons
var $inputImage = $('#input-image-file');
var $btnDownload = $('#btn-download');
var $btnUndo = $('#btn-undo');
var $btnRedo = $('#btn-redo');
var $btnRemoveActiveObject = $('#btn-remove-active-object');
// Image editor controls - bottom menu buttons
var $btnCrop = $('#btn-crop');
var $btnAddText = $('#btn-add-text');
// Image editor controls - bottom submenu buttons
var $btnApplyCrop = $('#btn-apply-crop');
var $btnFlipX = $('#btn-flip-x');
var $btnFlipY = $('#btn-flip-y');
var $btnRotateClockwise = $('#btn-rotate-clockwise');
var $btnRotateCounterClockWise = $('#btn-rotate-counter-clockwise');
var $btnAddArrowIcon = $('#btn-add-arrow-icon');
var $btnAddCancelIcon = $('#btn-add-cancel-icon');
var $btnAddCustomIcon = $('#btn-add-custom-icon');
var $btnAddImageShade = $('#btn-add-image-shade');
var $btnFreeDrawing = $('#btn-free-drawing');
var $btnLineDrawing = $('#btn-line-drawing');
var $btnAddRect = $('#btn-add-rect');
var $btnAddSquare = $('#btn-add-square');
var $btnAddEllipse = $('#btn-add-ellipse');
var $btnAddCircle = $('#btn-add-circle');
var $btnAddTriangle = $('#btn-add-triangle');
var $btnChangeTextStyle = $('.btn-change-text-style');
// Image editor controls - etc.
var $inputTextSizeRange = $('#input-text-size-range');
var $inputBrushWidthRange = $('#input-brush-range');
var $inputStrokeWidthRange = $('#input-stroke-range');
var $inputCheckTransparent = $('#input-check-transparent');
// Colorpicker
var iconColorpicker = tui.colorPicker.create({
container: $('#tui-icon-color-picker')[0],
color: '#000000'
});
var textColorpicker = tui.colorPicker.create({
container: $('#tui-text-color-picker')[0],
color: '#000000'
});
var brushColorpicker = tui.colorPicker.create({
container: $('#tui-brush-color-picker')[0],
color: '#000000'
});
var shapeColorpicker = tui.colorPicker.create({
container: $('#tui-shape-color-picker')[0],
color: '#000000'
});
// Create image editor
var imageEditor = new tui.ImageEditor('.tui-image-editor', {
cssMaxWidth: document.documentElement.clientWidth,
cssMaxHeight: document.documentElement.clientHeight,
selectionStyle: {
cornerSize: 50,
rotatingPointOffset: 100
}
});
var $displayingSubMenu, $displayingHiddenMenu;
function hexToRGBa(hex, alpha) {
var r = parseInt(hex.slice(1, 3), 16);
var g = parseInt(hex.slice(3, 5), 16);
var b = parseInt(hex.slice(5, 7), 16);
var a = alpha || 1;
return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + a + ')';
}
function base64ToBlob(data) {
var mimeString = '';
var raw, uInt8Array, i, rawLength;
raw = data.replace(rImageType, function(header, imageType) {
mimeString = imageType;
return '';
});
raw = atob(raw);
rawLength = raw.length;
uInt8Array = new Uint8Array(rawLength); // eslint-disable-line
for (i = 0; i < rawLength; i += 1) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], {type: mimeString});
}
function getBrushSettings() {
var brushWidth = $inputBrushWidthRange.val();
var brushColor = brushColorpicker.getColor();
return {
width: brushWidth,
color: hexToRGBa(brushColor, 0.5)
};
}
function activateShapeMode() {
imageEditor.stopDrawingMode();
}
function activateIconMode() {
imageEditor.stopDrawingMode();
}
function activateTextMode() {
if (imageEditor.getDrawingMode() !== 'TEXT') {
imageEditor.stopDrawingMode();
imageEditor.startDrawingMode('TEXT');
}
}
function setTextToolbar(obj) {
var fontSize = obj.fontSize;
var fontColor = obj.fill;
$inputTextSizeRange.val(fontSize);
textColorpicker.setColor(fontColor);
}
function setIconToolbar(obj) {
var iconColor = obj.fill;
iconColorpicker.setColor(iconColor);
}
function setImageToolbar(obj) {
//var iconColor = obj.fill;
return obj;
//iconColorpicker.setColor(iconColor);
}
function setShapeToolbar(obj) {
var strokeColor, fillColor, isTransparent;
var colorType = $('[name="select-color-type"]:checked').val();
if (colorType === 'stroke') {
strokeColor = obj.stroke;
isTransparent = (strokeColor === 'transparent');
if (!isTransparent) {
shapeColorpicker.setColor(strokeColor);
}
} else if (colorType === 'fill') {
fillColor = obj.fill;
isTransparent = (fillColor === 'transparent');
if (!isTransparent) {
shapeColorpicker.setColor(fillColor);
}
}
$inputCheckTransparent.prop('checked', isTransparent);
$inputStrokeWidthRange.val(obj.strokeWith);
}
function showSubMenu(type) {
var index;
switch (type) {
case 'shape':
index = 3;
break;
case 'icon':
index = 4;
break;
case 'text':
index = 5;
break;
default:
index = 0;
}
$displayingSubMenu.hide();
$displayingHiddenMenu.hide();
$displayingSubMenu = $menuButtons.eq(index).parent().find(submenuClass).show();
}
// Bind custom event of image editor
imageEditor.on({
undoStackChanged: function(length) {
if (length) {
$btnUndo.removeClass('disabled');
} else {
$btnUndo.addClass('disabled');
}
},
redoStackChanged: function(length) {
if (length) {
$btnRedo.removeClass('disabled');
} else {
$btnRedo.addClass('disabled');
}
},
objectScaled: function(obj) {
if (obj.type === 'text') {
$inputTextSizeRange.val(obj.fontSize);
}
},
objectActivated: function(obj) {
activeObjectId = obj.id;
if (obj.type === 'rect' || obj.type === 'circle' || obj.type === 'triangle') {
showSubMenu('shape');
setShapeToolbar(obj);
activateShapeMode();
} else if (obj.type === 'icon') {
showSubMenu('icon');
setIconToolbar(obj);
activateIconMode();
} else if (obj.type === 'text') {
showSubMenu('text');
setTextToolbar(obj);
activateTextMode();
}
}
});
// Image editor controls action
$menuButtons.on('click', function() {
$displayingSubMenu = $(this).parent().find(submenuClass).show();
$displayingHiddenMenu = $(this).parent().find(hiddenmenuClass);
});
$submenuButtons.on('click', function() {
$displayingHiddenMenu.hide();
$displayingHiddenMenu = $(this).parent().find(hiddenmenuClass).show();
});
$btnShowMenu.on('click', function() {
$displayingSubMenu.hide();
$displayingHiddenMenu.hide();
$msg.show();
imageEditor.stopDrawingMode();
});
// Image load action
$inputImage.on('change', function(event) {
var file;
var img;
var resolution;
if (!supportingFileAPI) {
alert('This browser does not support file-api');
}
file = event.target.files[0];
if (file) {
img = new Image();
img.onload = function() {
resolution = this.width * this.height;
if (resolution <= MAX_RESOLUTION) {
imageEditor.loadImageFromFile(file).then(() => {
imageEditor.clearUndoStack();
});
} else {
alert('Loaded image\'s resolution is too large!\nRecommended resolution is 3264 * 2448!');
}
URL.revokeObjectURL(file);
};
img.src = URL.createObjectURL(file);
}
});
// Undo action
$btnUndo.on('click', function() {
if (!$(this).hasClass('disabled')) {
imageEditor.undo();
}
});
// Redo action
$btnRedo.on('click', function() {
if (!$(this).hasClass('disabled')) {
imageEditor.redo();
}
});
// Remove active object action
$btnRemoveActiveObject.on('click', function() {
imageEditor.removeObject(activeObjectId);
});
// Download action
$btnDownload.on('click', function() {
var imageName = imageEditor.getImageName();
var dataURL = imageEditor.toDataURL();
var blob, type, w;
if (supportingFileAPI) {
blob = base64ToBlob(dataURL);
type = blob.type.split('/')[1];
if (imageName.split('.').pop() !== type) {
imageName += '.' + type;
}
// Library: FileSaver - saveAs
saveAs(blob, imageName); // eslint-disable-line
} else {
alert('This browser needs a file-server');
w = window.open();
w.document.body.innerHTML = '<img src=' + dataURL + '>';
}
});
// Crop menu action
$btnCrop.on('click', function() {
imageEditor.startDrawingMode('CROPPER');
});
$btnApplyCrop.on('click', function() {
imageEditor.crop(imageEditor.getCropzoneRect()).then(() => {
imageEditor.stopDrawingMode();
$subMenus.removeClass('show');
$hiddenMenus.removeClass('show');
});
});
// Orientation menu action
$btnRotateClockwise.on('click', function() {
imageEditor.rotate(90);
});
$btnRotateCounterClockWise.on('click', function() {
imageEditor.rotate(-90);
});
$btnFlipX.on('click', function() {
imageEditor.flipX();
});
$btnFlipY.on('click', function() {
imageEditor.flipY();
});
// Icon menu action
$btnAddArrowIcon.on('click', function() {
imageEditor.addIcon('arrow');
});
$btnAddCancelIcon.on('click', function() {
imageEditor.addIcon('cancel');
});
$btnAddCustomIcon.on('click', function() {
imageEditor.addIcon('customArrow');
});
$btnAddImageShade.on('click', function() {
imageEditor.addImageObject('img/shade1.png');
});
iconColorpicker.on('selectColor', function(event) {
imageEditor.changeIconColor(activeObjectId, event.color);
});
// Text menu action
$btnAddText.on('click', function() {
var initText = 'DoubleClick';
imageEditor.startDrawingMode('TEXT');
imageEditor.addText(initText, {
styles: {
fontSize: parseInt($inputTextSizeRange.val(), 10)
}
});
});
$btnChangeTextStyle.on('click', function() {
var styleType = $(this).attr('data-style-type');
var styleObj = {};
var styleObjKey;
switch (styleType) {
case 'bold':
styleObjKey = 'fontWeight';
break;
case 'italic':
styleObjKey = 'fontStyle';
break;
case 'underline':
styleObjKey = 'underline';
break;
case 'left':
styleObjKey = 'textAlign';
break;
case 'center':
styleObjKey = 'textAlign';
break;
case 'right':
styleObjKey = 'textAlign';
break;
default:
styleObjKey = '';
}
styleObj[styleObjKey] = styleType;
imageEditor.changeTextStyle(activeObjectId, styleObj);
});
$inputTextSizeRange.on('change', function() {
imageEditor.changeTextStyle(activeObjectId, {
fontSize: parseInt($(this).val(), 10)
});
});
textColorpicker.on('selectColor', function(event) {
imageEditor.changeTextStyle(activeObjectId, {
fill: event.color
});
});
// Draw line menu action
$btnFreeDrawing.on('click', function() {
var settings = getBrushSettings();
imageEditor.stopDrawingMode();
imageEditor.startDrawingMode('FREE_DRAWING', settings);
});
$btnLineDrawing.on('click', function() {
var settings = getBrushSettings();
imageEditor.stopDrawingMode();
imageEditor.startDrawingMode('LINE_DRAWING', settings);
});
$inputBrushWidthRange.on('change', function() {
imageEditor.setBrush({
width: parseInt($(this).val(), 10)
});
});
brushColorpicker.on('selectColor', function(event) {
imageEditor.setBrush({
color: hexToRGBa(event.color, 0.5)
});
});
// Add shape menu action
$btnAddRect.on('click', function() {
imageEditor.addShape('rect', tui.util.extend({
width: 500,
height: 300
}, shapeOpt));
});
$btnAddSquare.on('click', function() {
imageEditor.addShape('rect', tui.util.extend({
width: 400,
height: 400,
isRegular: true
}, shapeOpt));
});
$btnAddEllipse.on('click', function() {
imageEditor.addShape('circle', tui.util.extend({
rx: 300,
ry: 200
}, shapeOpt));
});
$btnAddCircle.on('click', function() {
imageEditor.addShape('circle', tui.util.extend({
rx: 200,
ry: 200,
isRegular: true
}, shapeOpt));
});
$btnAddTriangle.on('click', function() {
imageEditor.addShape('triangle', tui.util.extend({
width: 500,
height: 400,
isRegular: true
}, shapeOpt));
});
$inputStrokeWidthRange.on('change', function() {
imageEditor.changeShape(activeObjectId, {
strokeWidth: parseInt($(this).val(), 10)
});
});
$inputCheckTransparent.on('change', function() {
var colorType = $('[name="select-color-type"]:checked').val();
var isTransparent = $(this).prop('checked');
var color;
if (!isTransparent) {
color = shapeColorpicker.getColor();
} else {
color = 'transparent';
}
if (colorType === 'stroke') {
imageEditor.changeShape(activeObjectId, {
stroke: color
});
} else if (colorType === 'fill') {
imageEditor.changeShape(activeObjectId, {
fill: color
});
}
});
shapeColorpicker.on('selectColor', function(event) {
var colorType = $('[name="select-color-type"]:checked').val();
var isTransparent = $inputCheckTransparent.prop('checked');
var color = event.color;
if (isTransparent) {
return;
}
if (colorType === 'stroke') {
imageEditor.changeShape(activeObjectId, {
stroke: color
});
} else if (colorType === 'fill') {
imageEditor.changeShape(activeObjectId, {
fill: color
});
}
});
// Load sample image
imageEditor.loadImageFromURL('https://editor.studysciences.com/img/sampleImage.jpg', 'SampleImage').then(() => {
imageEditor.clearUndoStack();
});
<meta name="viewport" content="width=device-width, user-scalable=no">
<link type="text/css" href="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.css" rel="stylesheet">
<link type="text/css" href="https://editor.studysciences.com/css/service-mobile.css" rel="stylesheet">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.0/fabric.js"></script>
<script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js"></script>
<script src="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script type="text/javascript" src="https://editor.studysciences.com/js/tui-image-editor.js"></script>
<!-- Image editor controls - top area -->
<div class="header">
<div>
<span class="name">ImageEditor</span>
</div>
<div class="menu">
<span class="button">
<img src="https://editor.studysciences.com/img/openImage.png" style="margin-top: 5px;" />
<input type="file" accept="image/*" id="input-image-file">
</span>
<button class="button disabled" id="btn-undo"><img src="https://editor.studysciences.com/img/undo.png" /></button>
<button class="button disabled" id="btn-redo"><img src="https://editor.studysciences.com/img/redo.png" /></button>
<button class="button" id="btn-remove-active-object"><img src="https://editor.studysciences.com/img/remove.png" /></button>
<button class="button" id="btn-download"><img src="https://editor.studysciences.com/img/download.png" /></button>
</div>
</div>
<!-- Image editor area -->
<div class="tui-image-editor"></div>
<!-- Image editor controls - bottom area -->
<div class="tui-image-editor-controls">
<ul class="scrollable">
<li class="menu-item">
<button class="menu-button" id="btn-crop">Crop</button>
<div class="submenu">
<button class="btn-prev"><</button>
<ul class="scrollable">
<li class="menu-item"><button class="submenu-button" id="btn-apply-crop">Apply</button></li>
</ul>
</div>
</li>
<li class="menu-item">
<button class="menu-button">Orientation</button>
<div class="submenu">
<button class="btn-prev"><</button>
<ul class="scrollable">
<li class="menu-item"><button class="submenu-button" id="btn-rotate-clockwise">Rotate +90</button></li>
<li class="menu-item"><button class="submenu-button" id="btn-rotate-counter-clockwise">Rotate -90</button></li>
<li class="menu-item"><button class="submenu-button" id="btn-flip-x">FilpX</button></li>
<li class="menu-item"><button class="submenu-button" id="btn-flip-y">FilpY</button></li>
</ul>
</div>
</li>
<li class="menu-item">
<button class="menu-button" id="btn-draw-line">Drawing</button>
<div class="submenu">
<button class="btn-prev"><</button>
<ul class="scrollable">
<li class="menu-item">
<button class="submenu-button" id="btn-free-drawing">Free<br>Drawing</button>
</li>
<li class="menu-item">
<button class="submenu-button" id="btn-line-drawing">Line<br>Drawing</button>
</li>
<li class="menu-item">
<button class="submenu-button" id="btn-change-size">Brush<br>Size</button>
<div class="hiddenmenu">
<input id="input-brush-range" type="range" min="10" max="100" value="50" />
</div>
</li>
<li class="menu-item">
<button class="submenu-button" id="btn-change-text-color">Brush<br>Color</button>
<div class="hiddenmenu">
<div id="tui-brush-color-picker"></div>
</div>
</li>
</ul>
</div>
</li>
<li class="menu-item">
<button class="menu-button" id="btn-draw-shape">Shape</button>
<div class="submenu">
<button class="btn-prev"><</button>
<ul class="scrollable">
<li class="menu-item">
<button class="submenu-button" id="btn-add-rect">Rectagle</button>
</li>
<li class="menu-item">
<button class="submenu-button" id="btn-add-square">Square</button>
</li>
<li class="menu-item">
<button class="submenu-button" id="btn-add-ellipse">Ellipse</button>
</li>
<li class="menu-item">
<button class="submenu-button" id="btn-add-circle">Circle</button>
</li>
<li class="menu-item">
<button class="submenu-button" id="btn-add-triangle">Triangle</button>
</li>
<li class="menu-item">
<button class="submenu-button" id="btn-stroke-size">Stroke<br>Size</button>
<div class="hiddenmenu">
<input id="input-stroke-range" type="range" min="1" max="100" value="10" />
</div>
</li>
<li class="menu-item">
<button class="submenu-button" id="btn-change-shape-color">Color</button>
<div class="hiddenmenu">
<div class="top">
<label for="fill-color"><input type="radio" id="fill-color" name="select-color-type" value="fill" checked="checked" /> Fill</label>
<label for="stroke-color"><input type="radio" id="stroke-color" name="select-color-type" value="stroke" /> Stroke</label>
<label for="input-check-transparent"><input type="checkbox" id="input-check-transparent">Transparent</label>
</div>
<div id="tui-shape-color-picker"></div>
</div>
</li>
</ul>
</div>
</li>
<li class="menu-item">
<button class="menu-button">Icon</button>
<div class="submenu">
<button class="btn-prev"><</button>
<ul class="scrollable">
<li class="menu-item"><button class="submenu-button" id="btn-add-arrow-icon">Arrow<br>Icon</button></li>
<li class="menu-item"><button class="submenu-button" id="btn-add-cancel-icon">Cancel<br>Icon</button></li>
<li class="menu-item">
<button class="submenu-button" id="btn-change-icon-color">Color</button>
<div class="hiddenmenu">
<div id="tui-icon-color-picker"></div>
</div>
</li>
</ul>
</div>
</li>
<li class="menu-item">
<button class="menu-button" id="btn-add-text">Text</button>
<div class="submenu">
<button class="btn-prev"><</button>
<ul class="scrollable">
<li class="menu-item">
<button class="submenu-button" id="btn-change-size">Size</button>
<div class="hiddenmenu">
<input id="input-text-size-range" type="range" min="10" max="240" value="120">
</div>
</li>
<li class="menu-item">
<button class="submenu-button" id="btn-change-style">Style</button>
<div class="hiddenmenu">
<button class="hiddenmenu-button btn-change-text-style" data-style-type="bold"><b>Bold</b></button>
<button class="hiddenmenu-button btn-change-text-style" data-style-type="italic"><i>Italic</i></button>
<button class="hiddenmenu-button btn-change-text-style" data-style-type="underline"><u>Underline</u></button>
</div>
</li>
<li class="menu-item">
<button class="submenu-button" id="btn-change-align">Align</button>
<div class="hiddenmenu">
<button class="hiddenmenu-button btn-change-text-style" data-style-type="left">Left</button>
<button class="hiddenmenu-button btn-change-text-style" data-style-type="center">Center</button>
<button class="hiddenmenu-button btn-change-text-style" data-style-type="right">Right</button>
</div>
</li>
<li class="menu-item">
<button class="submenu-button" id="btn-change-text-color">Color</button>
<div class="hiddenmenu">
<div id="tui-text-color-picker"></div>
</div>
</li>
</ul>
</div>
<button class="submenu-button" id="btn-add-image-shade">Image 1</button>
</li>
</ul>
<p class="msg">Menu Scrolling <b>Left ⇔ Right</b></p>
</div>
I am using modal popup in my project and its working perfectly, I used it in two buttons Edit and Delete, but the problem is when I edit I want to maintain its height according to the project but in case of delete I have to maintain in some other case, so what should I need to do so that I can use one modal but with different functionality.
here, is my modal popup code
<div class="modal inmodal" id="dynamicModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content animated flipInY">
<div class="modal-header">
<div id="">
<button type="button" class="close" data-dismiss="modal" id="closeModal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
</div>
</div>
<div class="modal-body" id="jq-server-response">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary modal-primary-btn jq-modal-primary-btn pull-right margin-left-5">Save changes</button>
<button type="button" class="btn btn-white modal-close-btn pull-right" data-dismiss="modal">Close</button>
<div class="pull-right jq-modal-form-loader hide">
<div class="sk-spinner sk-spinner-wave">
<div class="sk-rect1"></div>
<div class="sk-rect2"></div>
<div class="sk-rect3"></div>
<div class="sk-rect4"></div>
<div class="sk-rect5"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="dynamic-modal-spinner hide">
<div class="sk-spinner sk-spinner-wave">
<div class="sk-rect1"></div>
<div class="sk-rect2"></div>
<div class="sk-rect3"></div>
<div class="sk-rect4"></div>
<div class="sk-rect5"></div>
</div>
</div>
and I give height to modal - body like this
.modal-dialog {
overflow-y: initial !important
}
.modal-body {
height: 600px;
overflow-y: auto;
}
At the time of Edit it open in the way I want like
But, in case of delete, I want less height
here is my javascript code ...
$(function () {
$('.searchclick').click(function () {
$('.jq-billing-meter').removeClass('search-meter');
$(this).parents('.form-group').find('.jq-billing-meter').addClass('search-meter')
//$('.searchclick').parentsUntil('.formgroup');
//$(this).children('input').addClass('activetext');
})
$('body').delegate('.open-dynamic-modal-link', 'click', function (ev) {
var $this = $(this);
modal($this);
});
//click event on modal primary btn
$('body').delegate('.jq-modal-primary-btn', 'click', function (ev) {
var $this = $(this);
var $form = $(this).parents('.modal').find('form');
$form.submit();
});
});
function modal($this) {
var $spinner = $('.dynamic-modal-spinner');
// $("h2").siblings("p").css({ "color": "red", "border": "2px solid red" });
var dataUrl = $this.data('url');
var dataClose = $this.data('close');
var dataPrimary = $this.data('primary');
var dataTitle = $this.data('title');
var onLoadCallback = $this.data('onload');
var hasDataUrl = dataUrl != undefined && typeof dataUrl != "undefined" && dataUrl != '';
var url = hasDataUrl ? dataUrl : $this.attr('href');
if (hasDataUrl == false) {
ev.preventDefault();
}
var isLargeModal = $this.data('large');
var isMiniModal = $this.data('mini');
if (isLargeModal) {
$('#dynamicModal .modal-dialog').addClass('modal-lg');
} else {
$('#dynamicModal .modal-dialog').removeClass('modal-lg');
}
if (isMiniModal) {
$('#dynamicModal .modal-dialog').addClass('modal-sm');
$('#dynamicModal .modal-title').addClass('modal-small-title');
} else {
$('#dynamicModal .modal-dialog').removeClass('modal-sm');
$('#dynamicModal .modal-title').removeClass('modal-small-title');
}
// $('#dynamicModal .modal-title').text(title);
$('#dynamicModal .modal-title').html(dataTitle);
$('#dynamicModal .modal-body').html($spinner.html());
if (dataPrimary) {
$('#dynamicModal .modal-primary-btn').text(dataPrimary)
} else {
$('#dynamicModal .modal-primary-btn').addClass('hide')
}
if (dataClose) {
$('#dynamicModal .modal-close-btn').text(dataClose)
} else {
$('#dynamicModal .modal-close-btn').addClass('hide')
}
$('#dynamicModal').modal({ backdrop: 'static', keyboard: false },'show');
$('#dynamicModal .modal-body').load(url, function () {
// Now that the DOM is updated let's refresh the unobtrusive validation rules on the form:
$('#dynamicModal form').removeData('validator')
.removeData('unobtrusiveValidation');
jQuery.validator.unobtrusive.parse('#dynamicModal form');
//crystalPower.initDatePicker();
if (typeof window[onLoadCallback] == "function") { //if onLoadCallback is a valid function
window[onLoadCallback](); //call function
//} else if (typeof crystalPower[onLoadCallback] == "function") { //if onLoadCallback is a valid function
// crystalPower[onLoadCallback](); //call function
}
//if page has autoCompleteInit function available
if (typeof window["autoCompleteInit"] == "function") {
window["autoCompleteInit"]();
}
});
}
I'm trying to figure out why the code I'm currently working on produces an error
Cannot read property css underfined.
Currently using jQuery 3.3.1. Not sure if the .css is deprecated. Can't seem to find a workaround it
(function($) {
'use strict';
var Slider = {
init: function() {
this.$sliderBanner = $('.slider-banner');
this.$sliderItemsWrapper = $('.slider-items', this.$sliderBanner);
this.$slides = $('.slides', this.$sliderItemsWrapper);
this.$sliderButtons = $('.arrow', this.$sliderBanner);
this.slideCount = $('.slides', this.$sliderItemsWrapper).length;
this.sliderBannerWidth = $(this.$sliderBanner).width();
this.$setSliderWrapperWidth = $(this.$sliderItemsWrapper).width(this.sliderBannerWidth * this.slideCount);
this.$slides.width(this.sliderBannerWidth);
this.bindButtons();
// $('.-next').on('click', function() {
// console.log('test');
// })
},
bindButtons: function() {
var position = 0;
$('.arrow.-next').on('click', function() {
// console.log('slide next');
var that = this;
position++;
if (position == -1) {
position = that.slideCount - 1;
}
console.log('test');
that.$sliderItemsWrapper.css('left', -(that.sliderBannerWidth * position));
});
}
};
$(document).ready(function() {
Slider.init();
});
})(jQuery);
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<div class="slider-banner">
prev
next
<div class="slider-items">
<div class="slides">
<div class="image" style="background-image:url(images/danny-howe-422500-unsplash.jpg)">
</div>
</div>
<div class="slides">
<div class="image" style="background-image:url(images/danny-howe-422500-unsplash.jpg)">
</div>
</div>
<div class="slides">
<div class="image" style="background-image:url(images/danny-howe-422500-unsplash.jpg)">
</div>
</div>
</div>
<div class="banner-detail">
<h2 class="preamble-heading" data-preamble="Test Preamble">Sample Page</h2>
</div>
</div>
Move var that = this; outside of the click function.
(function($) {
'use strict';
var Slider = {
init: function() {
this.$sliderBanner = $('.slider-banner');
this.$sliderItemsWrapper = $('.slider-items', this.$sliderBanner);
this.$slides = $('.slides', this.$sliderItemsWrapper);
this.$sliderButtons = $('.arrow', this.$sliderBanner);
this.slideCount = $('.slides', this.$sliderItemsWrapper).length;
this.sliderBannerWidth = $(this.$sliderBanner).width();
this.$setSliderWrapperWidth = $(this.$sliderItemsWrapper).width(this.sliderBannerWidth * this.slideCount);
this.$slides.width(this.sliderBannerWidth);
this.bindButtons();
// $('.-next').on('click', function() {
// console.log('test');
// })
},
bindButtons: function() {
var position = 0;
var that = this;
$('.arrow.-next').on('click', function() {
// console.log('slide next');
position++;
if (position == -1) {
position = that.slideCount - 1;
}
console.log('test');
that.$sliderItemsWrapper.css('left', -(that.sliderBannerWidth * position));
});
}
};
$(document).ready(function() {
Slider.init();
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider-banner">
prev
next
<div class="slider-items">
<div class="slides">
<div class="image" style="background-image:url(images/danny-howe-422500-unsplash.jpg)">
</div>
</div>
<div class="slides">
<div class="image" style="background-image:url(images/danny-howe-422500-unsplash.jpg)">
</div>
</div>
<div class="slides">
<div class="image" style="background-image:url(images/danny-howe-422500-unsplash.jpg)">
</div>
</div>
</div>
<div class="banner-detail">
<h2 class="preamble-heading" data-preamble="Test Preamble">Sample Page</h2>
</div>
</div>
app.js
$scope.add = function () {
$('#btn').click(function() {
// insert a SPAN tag with class="spn" at the end in all DIVs with class="cls"
$scope.data=[];
var add=' <input type="text" name="currency" id="autocomplete">' ;
$('div.cls').append(add);
i++;
$scope.count++;
});
}
$scope.autocomplete=function(){
var currencies = [
{ value: 'Afghan afghani' },
{ value: 'Albanian lek'},
{ value: 'Algerian dinar'},
{ value: 'European euro' }
];
// setup autocomplete function pulling from currencies[] array
$('#autocomplete').autocomplete({
lookup: currencies,
});
}
html
<div class="cls" id="idd"></div>
<button type="button" class="btn btn-default btn-sm" id="btn">
<span class="glyphicon glyphicon-plus"></span> Add
</button>
This auto complete function run without using as append.. but when i used it after appending text field like above it does not works.can anyone help me.
This sample show to you how can create autocomplete using Angular, without jQuery autocomplete.
var app = angular.module("app", []);
app.controller("ctrl", function ($scope, $filter) {
$scope.suggestions = [];
$scope.selectedData = [];
$scope.defaultData = [
{ value: "Afghan afghani" },
{ value: "Albanian lek" },
{ value: "Algerian dinar" },
{ value: "European euro" }
];
$scope.search = function () {
var length = $scope.autocomplete.length;
if (length === 0) {
$scope.suggestionsNotFound = false;
$scope.suggestions = [];
} else {
var result = $filter("filter")($scope.defaultData, { value: $scope.autocomplete });
$scope.suggestions = result;
$scope.suggestionsNotFound = false;
if (result.length === 0) {
$scope.suggestionsNotFound = true;
}
}
///select
$scope.select = function (item) {
var isExist = $filter("filter")($scope.selectedData, { value: item.value }, true)[0];
if (!isExist) {
$scope.selectedData.push(item);
$scope.autocomplete = null;
$scope.suggestions = [];
}
}
///remove
$scope.remove = function (index) {
$scope.selectedData.splice(index, 1);
}
}
});
.autocomplete span {
margin-left: 5px;
}
.autocomplete span i {
color: red;
cursor: pointer;
}
<!doctype html>
<html ng-app="app" ng-controller="ctrl">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="autocomplete">
<input class="form-control" type="text" ng-model="autocomplete" ng-change="search()" />
<div class="clearfix"></div>
<span class="label label-default" ng-repeat="data in selectedData">
{{data.value}}
<i ng-click="remove($index)" class="glyphicon glyphicon-remove"></i>
</span>
<ul class="list-group">
<li class="list-group-item" ng-repeat="suggestion in suggestions" ng-click="select(suggestion)">
{{suggestion.value}}
</li>
</ul>
<div class="alert alert-info" ng-if="suggestionsNotFound">
<b>[{{autocomplete}}] not found!</b>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</body>
</html>