How i want to resize image inside WYSIWYG editor when user upload image? I manage to insert into editor but i cant resize the image.
Below is my code :
http://embed.plnkr.co/yxMbI54wYUlxu2hSpfw8/preview
Appreciate your advice.
You can catch clicks on images inserted to the textarea and prompt for new size. The code below is only conceptual:
$(textarea[0]).on("click", "img", function(){
var me = this,
size = prompt("Size: ", me.width + "x" + me.height);
if (size) {
scope.$apply(function(){
var [w,h] = size.split("x");
$(me).css({ width: w, height: h });
});
}
});
Insert this snippet into link function of the wysiwyg directive, insert an image and click on it.
Notice that you cannot use standard angular.element because it doesn't support selectors in the .on method, so you have to use ol'good jQuery instead.
plunker
Related
I'am newbie in Reactjs and I have a problem like this picture below
I want when i focus textarea at behind 'Mr' and click $name, the textarea will be like this:
if someone has done something like this please give me a hint,thank you very much!
I have done this using jQuery. Here is my solution.
$("#my-select").on("change", function(){
var selectedValue = $(this).val();
var text = $("#my-textarea").val();
var newText = text + selectedValue;
$("#my-textarea").val(newText);
});
Have little dilemma here. I'm building text editor in angular js. The problem that I have is, when user selects part of text within a paragraph or heading I need to change styling of that part of text to bold / italic etc.
So basically I need to wrap selected text in <strong></strong> or <em></em>.
Plunker
I have a directive
editorApp.directive('watchSelection', function() {
return function(scope, elem) {
elem.on('mouseup', function() {
scope.startPosition = elem[0].selectionStart;
scope.endPosition = elem[0].selectionEnd;
// scope.selected = elem[0].value.substring(start, end);
scope.$apply();
});
};
});
That gets text selection its startposition and endposition. On button click I need to wrap that selection in specific tags, which I'm hoping to accomplish with this function:
$scope.boldText = function(startPosition, endPosition) {
$scope.start = startPosition;
$scope.end = endPosition;
var htmlStart = angular.element('<strong>');
var htmlEnd = angular.element('</strong>');
$scope.start.append(htmlStart);
$scope.end.append(htmlEnd);
};
I relatively new to angular and I might have taken a bigger bite than I can handle :)
Issue is I can't get selection to wrap inside them tags.
You don't need to watch anything.
$scope.boldText = function() {
document.execCommand('bold');
};
This will bold the selected text.
ng-img-crop is an awesome directive however I am having trouble adapting it to my scenario. My issue is that when a user has an image I would like to give them the option to resize the image if they would like to.
So here is the code I am attempting to use:
js:
vm.userImageOriginal = vm.editUser.image_pkey ? 'api/file/' + vm.editUser.image_pkey : null;
html:
<img-crop image="profileVM.userImageOriginal" result-image="profileVM.userImageNew"
area-type="square" result-image-size="300" on-change="profileVM.imageCropped = true;"></img-crop>
So I two issues:
1) I only want to upload the new image if the user has indeed changed the cropping. I tried setting a flag in on-change but it looks like on-change gets executed on initialization as well. Is there any way to know if the user has actually cropped?
2) Is there any way to set the position of the square/circle. In my scenario, if there is an existing user image, I would like to set the cropping square to the dimensions of the current image (i.e. the border of the image).
Thanks in advance.
Solved like this:
Add the following attribute to ng-img-crop directive in html:
on-load-done="profileVM.addCroppingWatcher()"
Here is the function:
function addCroppingWatcher(){
if (croppingWatcher)
return;
$window.setTimeout(function(){
croppingWatcher = $scope.$watch(
function(){ return vm.userImageNew; },
function(newVal, oldVal){
if (oldVal && oldVal != newVal) {
vm.imageCropped = true;
croppingWatcher();
}
}
);
}, 0);
}
I am trying to integrate Sencha 4.1 (ExtJS) with the Leaflet mapping library while using Sencha Architect.
When the page loads, the tiles are mixed up and appear offset. I need to drag the page up to be able to see the tiles.
The full project is available here: https://github.com/breizo/SenchaLeaflet.
Here is an excerpt of the custom component created (see full code here: https://github.com/breizo/SenchaLeaflet/blob/master/ux/LeafletMap.js).
constructor: function () {
this.callParent(arguments);
this.on({
resize: 'doResize',
scope: this
});
var ll = window.L;
if (!ll) {
this.setHtml('Leaflet library is required');
}
}
onRender: function() {
this.callParent(arguments);
var renderTo = arguments[0].dom.id;
debugger;
var me = this,
ll = window.L,
element = me.mapContainer,
mapOptions = me.getMapOptions(),
map,
tileLayer;
if (ll) {
// if no center property is given -> use default position
if (!mapOptions.hasOwnProperty('center') || !(mapOptions.center instanceof ll.LatLng)) {
mapOptions.center = new ll.LatLng(47.36865, 8.539183); // default: Zuerich
}
me.setTileLayer(new ll.TileLayer(me.getTileLayerUrl(), me.getTileLayerOptions()));
tileLayer = me.getTileLayer();
mapOptions.layers = [tileLayer];
me.setMap(new ll.Map(renderTo, mapOptions));
map = me.getMap();
// track map events
map.on('zoomend', me.onZoomEnd, me);
map.on('movestart', me.onMoveStart, me);
map.on('moveend', me.onMoveEnd, me);
me.fireEvent('maprender', me, map, tileLayer);
}
},
When debugging it appears that when onRender is called, the parent container of the map is not properly sized yet, in particular its height is only enough to contain the attrib text, about 16 pix. WHen the doResize is called, the container is properly sized, but it doesn't change the end result: the tiles are mixed up and offset.
I tried various changes to the container, but nothing worked...
1) Problem with mixed layers is caused by CSS. Your leaflet.css has wrong path in html, so it's not attached in the document. To fix mixing issue set correct path to css file, or attach it from CDN:
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css" />
2) Wrong map offset is caused by extjs generated div:
<div class="x-llmap x-fit-item x-llmap-default" ...></div>
It pushes map container to the bottom and wrong offset calculations are made. You can also fix this using inline style or CSS:
.leaflet-map-pane {
top: 0;
}
I am trying to figure out how to make a multi-screen app using Appcelerator Titanium. I am familiar with Android development, so using the Android SDK I would create a few different activities, each doing their different work (login screen, screen displaying list of items, etc.) What is the equivalent in Titanium? I know that app.js is the main part of the app, but I assume it is not recommended to just put all code in that single file. The kitchen sink app has a lot of files and functionality, but I am not sure how they all fit together. So, what is the recommended way to create a project in Titanium for a basic app with a few screens doing different things? I am missing the Titanium concept of a screen.
no..
you can do it like
var button = Ti.UI.createButton({..});
button.addEventListener('click',function(e){
var window = Ti.UI.createWindow({
url:"../newWindow.js",
title:"newWindow"
});
Titanium.UI.currentTab.open(window,{animated:true});
});
i recommend to use the MVC-pattern like i already posted here.
App.js file is basically the file to initialize different window screens, and use Tabs to load those windows screens.Here is a link to create simple screens Create Window & Tabs
For further properties related to TitaniumUI
Try doing this:
app.js
Tintanium.include('window1.js', 'window2.js');
...
var button1 = Titanium.UI.createButton({...});
button1.addEventListener('click',function(){
window1.open();
});
window1.js
var window1=Titanium.UI.createWindow({...});
...etc...
Hope this will help ;)
try using my code below:
// functions
function openHomescreen(e)
{
settings.close();
getlucky.close();
survey.close();
homescreen.url = 'homescreen.js';
homescreen.open();
}
function openGetlucky(e)
{
settings.close();
homescreen.close();
getlucky.url = 'getlucky.js';
getlucky.open();
}
// events
Ti.App.addEventListener('homescreen',openHomescreen);
Ti.App.addEventListener('getlucky',openGetlucky);
openHomescreen({});
To open homescreen in other JS file, use this.
Ti.App.fireEvent('homescreen');
After a lot of time research i i found the solution for opening different windows with a click event attached to a button.
employee.js
//Current window (employee window)
var employeeWin = Ti.UI.currentWindow;
//define button
var moveToDetailBtn = Ti.UI.createButton({
width : 200, //define the width of button
height : 50, //define height of the button
title : 'Show Detail' //Define the text on button
});
//Click event to open the Employee Details window
moveToDetailBtn.addEventListener('click', function(){
//Call a export function
var win = require('employeeDetails').getEmployeeDetailSWin;
//Create new instance
var employeeDetailsWin = new win();
//Open the Employee Details window
employeeDetailsWin.open();
});
//Add the button to the window
employeeWin.add(moveToDetailBtn);
In employeeDetails.js
exports.getEmployeeDetailSWin = function(){
//Creates a new window
var empDetailsWin = Ti.UI.createWindow({
backgroundColor : '#ffffff' //Define the backgroundcolor of the window
});
//Addin a label to the window
empDetailsWin.add(Ti.UI.createLabel({
width : 100, //Define width of the label
height : 50, //Define height of the label
title : 'Employee Details'
}));
return empDetailsWin;
};
I found the solution in this page: http://www.mindfiresolutions.com/Open-New-Window-Without-URL-Property-In-Titanium-2214.php