<div>
<image style="width: 280px;height: 280px;margin-left:250px;margin-top:100px" :src="picPath"></image>
</div>
In above foo.vue, it specified the image width and height, but in some cases, we need to change image width and height after image loaded into imageview. My question is, in order for that, what should i do from foo.vue to native android/ios? Thanks in advance.
just use the load event. e.g:
<template>
<div style="width: 750px; background-color: #f4f4f4; margin-top: 10px;" v-for="(item, index) in storyJson">
<image v-if="item.type === 'image'" :src="item.value" style="width: 750px; height: 468px; margin-bottom: 10px;" #load="load" resize="contain"></image>
</div>
</template>
<script>
module.exports = {
props: {
storyJson: {
default: function () {
return [];
}
}
},
methods: {
setUpStoryJson(json) {
this.storyJson = JSON.parse(json);
},
load(e) {
const naturalSize = e.size;
const showHeight = naturalSize.naturalHeight * 750 / naturalSize.naturalWidth;
e.target.setStyle('height', showHeight + 'px');
}
}
};</script>
Related
I am trying to create a visual studio extension. This extension gives the user an input form and calls the api when user hits submit button.
But the api is not getting hit in the form action method
Below is extension.js file
// #ts-nocheck
// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
const vscode = require('vscode');
const fs = require('fs');
const path = require('path');
const { parentPort } = require('worker_threads');
// This method is called when your extension is activated
// Your extension is activated the very first time the command is executed
/**
* #param {vscode.ExtensionContext} context
*/
function activate(context) {
console.log('Congratulations, your extension "Unit Test Generator" is now active!');
let disposable = vscode.commands.registerCommand('testytest.createBoilerplate', function () {
vscode.window.showInformationMessage('Unit Test Generator is now active!');
createInputFormWebView();
});
context.subscriptions.push(disposable);
}
function createInputFormWebView()
{
const panel = vscode.window.createWebviewPanel(
'This webview will be used for taking user input for the type of test cases', // Identifies the type of the webview. Used internally
'Unit Test Generator', // Title of the panel displayed to the user
vscode.ViewColumn.One, // Editor column to show the new webview panel in.
{
enableForms:true,
enableScripts: true
} // Webview options. More on these later.
);
const htmlFormContent = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Input</title>
<style>
* {
box-sizing: border-box;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=submit] {
background-color: #1b78cc;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
input[type=submit]:hover {
background-color: #527ba1;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
</style>
</head>
<body>
<div class = "container">
<form enctype="multipart/form-data" action="http://localhost:35637" method="post" id="getUserInput">
<label for="testFramework">Test Framework</label><br>
<input type="radio" id="testFramework" name="test_framework" value="MSTest">
<label for="testFramework">MSTest</label><br>
<input type="radio" id="testFramework" name="test_framework" value="XUnit">
<label for="testFramework">XUnit</label><br>
<label for="projectName">Project Name:</label><br>
<input type="text" id="projectName" name="projectName"><br>
<label for="namespace">Namespace:</label><br>
<input type="text" id="namespace" name="namespace"><br>
<label for="testClassName">Test Class Name:</label><br>
<input type="text" id="testClassName" name="testClassName"><br>
<label for="testMethodName">Test Method Name:</label><br>
<input type="text" id="testMethodName" name="testMethodName"><br>
<input type="hidden" name="MAX_FILE_SIZE" value="100000" /><br>
Choose file to upload: <input name="uploadedfile" type="file" /><br>
<input type="submit" value="Generate Unit Tests" />
</form>
</div>
</body>
</html>`;
panel.webview.html = htmlFormContent;
}
// This method is called when your extension is deactivated
function deactivate() {}
module.exports = {
activate,
deactivate
}
This thing is working correctly in fiddler but not in extension.
I have WebView Options I have set enableScripts and enableForms to true. Is there anything else which needs to be set or there is problem with some other part of the code.
vscode.ViewColumn.One, // Editor column to show the new webview panel in.
{
enableForms:true,
enableScripts: true
} // Webview options. More on these later.
Any pointers would be helpful.
Only divs with id are clicking, div with class names are not clicking.
By clicking on div with id, you need to change the color. Class divs do not have to be clicked and they do not have to change their color. I added it to imput type color class, so it does not click also.
If I try document.getElementByID ("backgroundcolor"). Value; works normally
if I try document.getElementsByClassName ("backgroundcolor"). value; does not work.
I need to call the ByClassName function(color), but it does not work, Ideas?
#divid{
width: 450px;
height: 170px;
margin: 10px;
padding: 10px;
background-color: blue;
}
.divclass{
width: 450px;
height: 170px;
margin: 10px;
padding: 10px;
background-color: blue;
}
<input type="color" class="backgroundcolor" onchange="BackgroundColor()">
<div class="divclass">
</div>
<div id="divid">
</div>
var div = document.getElementsByTagName("div");
var divCount = div.length;
var clickedDivId;
for (var i = 0; i < divCount; i += 1) {
div[i].onclick = function(e) {
if (e.target.id) alert(this.id);
clickedDivId = this.id;
e.stopPropagation();
};
}
function BackgroundColor(){
var x = document.getElementsByClassName("backgroundcolor").value;
document.getElementById(clickedDivId).style.backgroundColor = x;
}
var x = document.getElementsByClassName("backgroundcolor")[0].value;
I have the following directive:
import Vue from 'vue'
const Dialog = Vue.extend({
template: `
<div v-if="show" class="modal">
<div class="modal-body">
<div class="modal-header"><h3>Aktion bestätigen</h3></div>
<div class="modal-content">
<div class="uk-flex">
<div class="uk-margin-small-right">
<span uk-icon="icon: question; ratio: 3"></span>
</div>
<div>
Are You sure?
</div>
</div>
<hr>
<div class="uk-flex uk-flex-right">
<button class="uk-button uk-button-danger uk-margin-small-right" #click="confirmed">Yes</button>
<button class="uk-button uk-button-default" #click="show = false">Cancel</button>
</div>
</div>
</div>
</div>
`
});
Vue.directive('confirm', {
bind(el, binding, vnode) {
let confirm_method = binding.value;
el.handleClick = (e) => {
const data = { confirmed: confirm_method , show: true};
let dialog = new Dialog({data: data}).$mount();
document.getElementsByTagName('body')[0].appendChild(dialog.$el);
}
el.addEventListener('click', el.handleClick);
},
unbind(el) {
el.removeEventListener('click', el.handleClick);
}
});
This works fine. When I click on "Cancel", the modal closes. When I click "Yes", the method defined in Vue template
<button v-confirm="delete">delete</button>
is executed.
But the modal does not appear. How to tell the modal to close after the method has been executed, and maybe show an error message, when there was an error?
You can pass methods to Dialog:
Vue.directive('confirm', {
bind(el, binding, vnode) {
let confirm_method = binding.value;
el.handleClick = (e) => {
const data = { confirmed: confirm_method , show: true};
let dialog = new Dialog({
data: data,
methods: {
confirmedInternal() {
this.show = false
this.confirmed()
}
}
}).$mount();
document.getElementsByTagName('body')[0].appendChild(dialog.$el);
}
el.addEventListener('click', el.handleClick);
},
unbind(el) {
el.removeEventListener('click', el.handleClick);
}
});
then calling confirmedInternal when yes button is click
<button class="uk-button uk-button-danger uk-margin-small-right" #click="confirmedInternal">Yes</button>
Demo: https://jsfiddle.net/guqc2src/
Vue documentation has pretty good example of modal.
The key option is $emit('close'). You can call $emit('close') on your method success.
// register modal component
Vue.component('modal', {
template: '#modal-template'
})
// start app
new Vue({
el: '#app',
data: {
showModal: false
}
})
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
display: table;
transition: opacity .3s ease;
}
.modal-wrapper {
display: table-cell;
vertical-align: middle;
}
.modal-container {
width: 300px;
margin: 0px auto;
padding: 20px 30px;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
transition: all .3s ease;
font-family: Helvetica, Arial, sans-serif;
}
.modal-header h3 {
margin-top: 0;
color: #42b983;
}
.modal-body {
margin: 20px 0;
}
.modal-default-button {
float: right;
}
/*
* The following styles are auto-applied to elements with
* transition="modal" when their visibility is toggled
* by Vue.js.
*
* You can easily play with the modal transition by editing
* these styles.
*/
.modal-enter {
opacity: 0;
}
.modal-leave-active {
opacity: 0;
}
.modal-enter .modal-container,
.modal-leave-active .modal-container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
<script src="https://unpkg.com/vue#2.5.16/dist/vue.js"></script>
<!-- template for the modal component -->
<script type="text/x-template" id="modal-template">
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header">
default header
</slot>
</div>
<div class="modal-body">
<slot name="body">
default body
</slot>
</div>
<div class="modal-footer">
<slot name="footer">
default footer
<button class="modal-default-button" #click="$emit('close')">
OK
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</script>
<!-- app -->
<div id="app">
<button id="show-modal" #click="showModal = true">Show Modal</button>
<!-- use the modal component, pass in the prop -->
<modal v-if="showModal" #close="showModal = false">
<!--
you can use custom content here to overwrite
default content
-->
<h3 slot="header">custom header</h3>
</modal>
</div>
<link rel="stylesheet" href="themes/base/jquery-ui.css" />
<link rel="stylesheet" href="themes/base/jquery.ui.all.css">
<script src="jquery-1.8.2.js"></script>
<script src="ui/jquery-ui.js"></script>
<script src="ui/jquery.ui.core.js"></script>
<script src="ui/jquery.ui.widget.js"></script>
<script src="ui/jquery.ui.mouse.js"></script>
<script src="ui/jquery.ui.draggable.js"></script>
<script src="ui/jquery.ui.droppable.js"></script>
<script src="ui/jquery.ui.resizable.js"></script>
<script src="ui/jquery.ui.position.js"></script>
<script src="ui/jquery.ui.dialog.js"></script>
<link rel="stylesheet" href="demos.css">
<style>
#gallery { float: left; width:640px; min-height: 12em; padding-top:5px; padding-left:12px } * html #gallery { height: 12em; } /* IE6 */
.gallery.custom-state-active { background: #eee; }
.gallery li { float: left; width: 96px; padding: 0.3em; margin: 0 0.4em 0.4em 0; text-align: center; }
.gallery li h5 { margin: 0 0 0.4em; cursor: move; }
.gallery li a { float: left; }
.gallery li a.ui-icon-zoomin { float: left; }
.gallery li img { width: 100%; cursor: move; }
#trash { float: right; width: 100%; min-height: 50em; padding: 1%;} * html #trash { height: 18em; } /* IE6 */
#trash h4 { line-height: 16px; margin: 0 0 0.4em; }
#trash h4 .ui-icon { float: left; }
#trash .gallery h5 { display: none; }
</style>
<script>
$(function() {
// there's the gallery and the trash
var $gallery = $( "#gallery" ),
$trash = $( "#trash" );
// let the gallery items be draggable
$( "li", $gallery ).draggable({
cancel: "a.ui-icon", // clicking an icon won't initiate dragging
revert: "invalid", // when not dropped, the item will revert back to its initial position
containment: "document",
helper: "clone",
cursor: "move",
scroll: false,
});
// let the trash be droppable, accepting the gallery items
$trash.droppable({
accept: "#gallery > li",
activeClass: "ui-state-highlight",
scroll: false,
tolerance: "fit",
drop: function( event, ui ) {
deleteImage( ui.draggable );
$("li",$trash).draggable({ containment: 'parent' ,cursor: 'crosshair', revert:false});//for dragable the image
}
});
//let the gallery be droppable as well, accepting items from the trash
$gallery.droppable({
accept: "#trash li",
activeClass: "custom-state-active",
scroll: false,
drop: function( event, ui ) {
recycleImage( ui.draggable );
},
});
// image deletion function
var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Click To Move in Gallery' class='ui-icon ui-icon-refresh'>Click To Move in Gallery</a>";
function deleteImage( $item ) {
$item.fadeOut(function() {
var $list = $( "ul", $trash ).length ?
$( "ul", $trash ) :
$( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $trash );
$item.find( "a.ui-icon-trash" ).remove();
$item.append( recycle_icon ).appendTo( $list ).fadeIn(function() {
//$item.animate({ width: "48px" }).find( "img" ).animate({ height: "36px" });
});
//resizing imge and getting it width and height START START
var res_id = $($item).attr("id");//get li/image id dropprd hear
$("#"+res_id).resizable({
alsoResize:'#img_'+res_id,
maxHeight: 400,
maxWidth: 400,
minHeight: 10,
minWidth: 10 ,
stop: function(event, ui){
var wid = ui.size.width;//size of image after resize width
var hei = ui.size.height;//size of image after resize height
//alert(hei+'='+wid);
}
});//resizing image and getting it width and height END END
});
}
// image recycle function
var trash_icon = "<a href='link/to/trash/script/when/we/have/js/off' title='Delete this image' class='ui-icon ui-icon-trash'>Delete image</a>";
function recycleImage( $item ) {
$item.fadeOut(function() {
$item
.find( "a.ui-icon-refresh" )
.remove()
.end()
.css( "width", "96px")
.append( trash_icon )
.find( "img" )
.css( "height", "72px" )
.css("width", "96px")
.end()
.appendTo( $gallery )
.fadeIn();
//.resizable({revert:"false"});
//ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se
});
}
// image preview function, demonstrating the ui.dialog used as a modal window
function viewLargerImage( $link ) {
var src = $link.attr( "href" ),
title = $link.siblings( "img" ).attr( "alt" ),
$modal = $( "img[src$='" + src + "']" );
if ( $modal.length ) {
$modal.dialog( "open" );
} else {
var img = $( "<img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' />" )
.attr( "src", src ).appendTo( "body" );
setTimeout(function() {
img.dialog({
title: title,
width: 400,
modal: true
});
}, 1 );
}
}
// resolve the icons behavior with event delegation
$( "ul.gallery > li" ).click(function( event ) {
var $item = $( this ),
$target = $( event.target );
if ( $target.is( "a.ui-icon-trash" ) ) {
deleteImage( $item );
} else if ( $target.is( "a.ui-icon-zoomin" ) ) {
viewLargerImage( $target );
} else if ( $target.is( "a.ui-icon-refresh" ) ) {
recycleImage( $item );
}
return false;
});
});
</script>
<div class="ui-widget ui-helper-clearfix">
<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix" style="overflow-y:scroll; overflow-x:hidden; height:25px">
<li class="ui-widget-content ui-corner-tr" id="idid">
<h5 class="ui-widget-header">1mehfil</h5>
<img src="images/1mehfil.JPG" title="1mehfil" width="90" height="72" id="img_idid" />
<!--View larger-->
Click to Move in Vision Board
</li>
<li class="ui-widget-content ui-corner-tr" id="ididid">
<h5 class="ui-widget-header">1mehfil</h5>
<img src="images/8711215.jpg" title="8711215" width="90" height="72" id="img_ididid" />
<!--View larger-->
Click to Move in Vision Board
</li>
</ul>
</div>
<div> </div>
<div id="response_div_result" style="padding-left:10px">
<div id="trash" class="ui-widget-content ui-state-default">
<h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Create your vision</span>Create your vision</h4>
</div>
</div>
This is code for the drag and drop in jquery I added in this some extra feature like it can be re-sized after dropped, but I also want it can be dragged in the dropped area, Can some one help me after dropped <li> can again draggable in the dropped area anywhere (inside the dropped area only). Hear i use to make draggable in dropped section $("li",$trash).draggable({ containment: 'parent' ,cursor: 'crosshair', revert:false}); by this code-currently its not working
I thought I'd knock up a quick prototype of what you're trying to do. See fiddle: http://jsfiddle.net/chrismoutray/VjXqg/
Now reviewing your example I think the problem lies in the use of fadeOut since this may create a race condition e.g. you're setting up the draggable trash elements at the same time the dropped element is being created.
In my example I've taken the following steps within the drop handler:
fade-out draggable element and then within the fade-out callback
manipulate draggable element (add/remove child elements/stylings)
append draggable element to trash ul list
setup element as draggable { containment: 'parent' }
finnally fade-in the draggable element
I guess the main point here is I'm doing everything inside the fade-out callback...
I'm trying to clean up my code a bit by not having so many div id's. As I understand you're not supposed to use the same div id more than once.
The HTML:
<div id="sides" class="alignLeft"></div>
<div id="sides" class="alignRight"></div>
<div id="center"></div><!--center-->
The CSS:
.alignLeft {
float: left;
}
.alignRight {
float: right;
}
#sides {
width: 350px;
height: 45px;
}
#center {
width: 350px;
height:350px;
}
As you can see I have used the #sides div twice in the html but applied different float classes (left, right). Even though the code seems to work, I know it's incorrect. What would be the correct way to use the same div with different floats?
Yes id selectors are meant to be used only once per page. You could refactor your code to look like this.
HTML
<div class="sides alignLeft"></div>
<div class="sides alignRight"></div>
<div id="center"></div><!--center-->
CSS
.alignLeft {
float: left;
}
.alignRight {
float: right;
{
.sides {
width: 350px;
height: 45px;
}
#center {
width: 350px;
height:350px;
}
You can assign multiple classes to one element, so you can use sides as a class instead of an id:
The HTML:
<div class="sides alignLeft"></div>
<div class="sides alignRight"></div>
<div id="center"></div><!--center-->
The CSS:
.alignLeft {
float: left;
{
.alignRight {
float: right;
{
.sides {
width: 350px;
height: 45px;
}
#center {
width: 350px;
height:350px;
{