I've got everything working well except the drop area element doesn't hide after moving back off the page.
For example, if I drag something to the page, the drop area element shows, but then if I decide not to drop, it stays visible instead of hiding. It looks like in the demos on the site, it should hide again.
I've been studying this page: http://docs.fineuploader.com/branch/master/integrating/options/fineuploader.html#draganddrop-option-properties
There doesn't seem to be a callback for when there is no longer a file about to be dropped in the browser window. My code looks just like the examples, but has my own element id and class names, both of which work.
Any ideas?
Update - here is some code:
<div id="file-upload-well" class="well text-center">
<div id="file-upload-drop-area" style="display:none;">Drop files here</div>
Upload Files
</div>
and here is the DND js:
var dragAndDropModule = new qq.DragAndDrop({
dropZoneElements: [document.getElementById('file-upload-drop-area')],
classes: {
dropActive: "dropActive"
},
callbacks: {
processingDroppedFiles: function () {
$('#file-upload-drop-area').hide();
},
processingDroppedFilesComplete: function(files) {
uploader.addFiles(files);
}
}
});
The issue was setting the hideDropZonesBeforeEnter is set to false by default and needed to be set to true.
Both the variable name and the help documentation make it seem it will only show the drop zone when a file is directly over it, but instead it hides and shows the dropdown when a file is over a compliant browser.
Related
We encountered a strange behavior when using react-bootstrap's ModalTrigger with an array of items, in that it doesn't go away when the parent/owner item is unmounted. We suspect this has to do with React's virtual DOM and the diffing mechanism, and/or our own misuse of the ModalTrigger.
The setup is simple: a Content react component has a state that holds an array of item names. It also has an onClick(name) function that removes that name from the array via setState. In the render, it uses _.map to create a bunch of Item react components.
Each Item component displays its name and a ModalTrigger that holds a button labeled "delete me". Click on the button and it opens the modal; click "OK" in the modal and it executes the callback to the Content remove function.
When deleting the last item it works fine: the final Item component is unmounted, and with it, the ModalTrigger and its corresponding modal.
The problematic behavior we see is when deleting any item other than the last one. The item is removed but the modal stays open, whereas I would naively expect the modal to disappear since the parent ModalTrigger is gone. Not only that, but when clicking "ok" again, the next item on the list is removed, and so on until the modal happens to be associated with the last item, at which point clicking "ok" will finally hide it.
Our collective hunch is that this is caused by the overlayMixin's _overlayTarget being an anonymous element in the document, so that different ModalTriggers don't differentiate between them. Therefore, when a parent unmounts and React looks for the DOM diff, it sees the previous trigger's and says "hey, that could work".
This whole issue can easily be addressed by adding a hide() call in the Item's inner _onClick() function as is commented out in the code, and we finally arrive at my question:
Am I using ModalTrigger correctly, in that expecting it to go away when the parent is unmounting? This is kind of how I expect React to work in general, which means a bug in react-bootstrap.
Or should I be explicitly calling hide() because that's they way this component was designed?
Following is a piece of code that reproduces this.
Thanks!
var DeleteModal = React.createClass({
render:function() {
return (
<ReactBootstrap.Modal onRequestHide = {this.props.onRequestHide} title = "delete this?">
<div className="modal-body">
Are you sure?
</div>
<div className="modal-footer">
<button onClick={this.props.onOkClick}>ok</button>
<button onClick={this.props.onRequestHide}>cancel</button>
</div>
</ReactBootstrap.Modal>
);
}
});
var Item = React.createClass({
_onClick:function() {
//this.refs.theTrigger.hide();
this.props.onClick(this.props.name);
},
render:function() {
return (
<div>
<span>{this.props.name}</span>
<ModalTrigger modal={<DeleteModal onOkClick={this._onClick}/>} ref="theTrigger">
<button>delete me!</button>
</ModalTrigger>
</div>
);
}
});
var Content = React.createClass({
onClick:function(name) {
this.setState({items:_.reject(this.state.items, function(item) {return item === name;})});
},
getInitialState:function() {
return {items : ["first", "secondth", "thirdst"]};
},
render:function() {
return (
<div>
{_.map(this.state.items, function(item, i) {
return (
<Item name={item} onClick={this.onClick} key={i}/>
)}.bind(this)
)}
</div>
);
}
});
React.render(<Content/>, document.getElementById("mydiv"));
Turns out it was a misuse of React's "key" property. We gave the mapped objects integer keys, so when the render was called again, the same initial keys were given, which is why React thought it should reuse the same DOM element.
If instead we give it key={item} (where item is a simple string) it solves it in our case; however, this introduces a subtle bug whereby if there are 2 identical strings, React will display only one.
Trying to outsmart it by giving it key={item + i} introduces an even subtler bug, where duplicate items are displayed but are delete en mass, but in this case the bug is in the onClick method which would need to be modified to accept an index of some sort.
Therefore my take-away is that the keys must be a unique string, and callbacks should take these keys into consideration when performing any modifications.
I have a webpage that contains a <main/> div that I am using as a dropzone. That div is covering most of the screen, and I do not want fine-uploader to modify the CSS of this specific div.
When a file is dragged onto the page, I would like to interactively display an help page. That help page is an hidden div floating above the page. I'd like to instruct the DragAndDrop module of fine-uploader to use <main/> as a dropzone, and to control (either by adding a CSS class, or better some of my Javascript code) the other hidden div.
For now the code looks like:
var dragAndDropModule = new qq.DragAndDrop({
dropZoneElements: document.getElementsByTagName('main'),
classes: {
dropActive: "cssClassToAddToDropZoneOnEnter"
},
callbacks: {
processingDroppedFilesComplete: function(files, dropTarget) {
fineUploaderBasicInstance.addFiles(files);
}
}
});
where fineUploaderBasicInstance is an instance of qq.s3.FineUploaderBasic.
I tried adding a second item into dropZoneElements (the hidden div); but the approach has two issues: first the CSS code gets very messy in my case, and display:block is added to <main/> (https://github.com/FineUploader/fine-uploader/blob/master/client/js/dnd.js#L251 ?) on Chrome, which breaks my layout – again here <main/> should only be the dropzone, not an element that is being modified.
Is there a way to change the behaviour of the DragAndDrop module to control a separate div (for example by having a callback on dragover)?
There's no need for JS control over the help block. CSS can easily do the job as it follows using the tilde / squiggle (~) selector (if it's not exactly next to main. In case it is, use the adjacent (+) selector) :
HTML Code:
<div id="main">... your code ...</div>
<div id="help">... help notes ...</div>
CSS Code (if help div is next to main, as stated above, use +, if not, use ~):
main.cssClassToAddToDropZoneOnEnter + #help {
display: block;
/* and other css properties when shown, maybe a transition effect or something */
}
I am trying to use Kendo's Mobile widgets inside of my PhoneGap Durandal project.
See sample source project here: https://github.com/rodneyjoyce/DurandalKendoMobile/tree/master/App
I don't understand where to put the Kendo initilisation code (the widgets do not render without this):
window.kendoMobileApplication = new kendo.mobile.Application($(document.body), {
skin: "flat"
});
I have tried to put it into the Index.html, shell.html and into a particular Durandal page view (x.html), shell.js, main,js and x.js but none of these work.
My Index page has these links in it:
<script src="css/telerik/js/kendo.all.min.js"></script>
<link href="css/telerik/styles/kendo.mobile.flat.min.css" rel="stylesheet" />
My Durandal View has the following HTML with Kendo Mobile widgets:
<section>
1
<div id="kendoindex">
<div data-kendo-role="view" data-kendo-title="View">
<header data-kendo-role="header">
<div data-kendo-role="navbar">
<span data-kendo-role="view-title">Title</span>
</div>
</header>
<ul data-kendo-role="listview">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
2
</section>
and my ViewModel for this View:
define(function (require)
{
function viewModel()
{
var self = this;
self.activate = activate;
function activate()
{
//window.kendoMobileApplication = new kendo.mobile.Application($("#kendoindex"), {
// skin: "flat"
//});
}
}
var vm = new viewModel();
return vm;
});
If I don't call kendoMobileApplication then the Kendo Mobile widgets are not rendered (it just shows "1 Title 2" with no CSS (ie. Kendo is not transforming them).
Everything seems to be keyed on where to call this: kendoMobileApplication in Durandal.
I followed the Durandal guidelines to give the Kendo bindings their own namespace: http://durandaljs.com/documentation/KendoUI/
UPDATE 1
I have created a simple Durandal 1.2 project which highlights the problem with Kendo Mobile and Durandal (and PhoneGap, but irrelevant here)), namely:
The only way to get the Mobile controls to render properly is to call kendo.mobile.Application. However this cannot find the right HTML element if it is put into a different file and loaded with Durandal.
I cannot find the right place to put this init code as it throws this error: “Uncaught Error: Your kendo mobile application element does not contain any direct child elements with data-role="view" attribute set. Make sure that you instantiate the mobile application using the correct container.”
kendoIndex.html is NOT Durandal but shows how it should be rendered if the kendo.mobile.Application is called correctly (Run this first to see what we are trying to achieve)
Shell : Has the Kendo Layout which does not get rendered.
Home View: Has the simple Kendo Mobile view – this does not get rendered.
About: A simple HTML page without Kendo
Source is on Guthub – if anyone can get Kendo Mobile working with Durandal I would appreciate it (or at least confirm if it is impossible (Telerik are no help at all on this)).
https://github.com/rodneyjoyce/DurandalKendoMobile/tree/master/App
Here's a working demo, which shows the correct start screen, but doesn't show the about view on navigation click. There's probably some extra work required to either remove kendo's or Durandal's router functionality.
http://rainerat.spirit.de/DurandalKendoMobile/App/#/
There were a couple of things required to make it work.
https://github.com/RainerAtSpirit/DurandalKendoMobile/commits/master
Kendo requires that the host element and all 'view' and 'layout' elements are in the DOM and that 'view' and 'layout' are child of the container element. After updating the view html to reflect this the right place to create the kendo app would be home.js
define(function( require ) {
var ctor = function() {
};
ctor.prototype.activate = function() {
console.log("Home activate");
};
ctor.prototype.viewAttached = function() {
var $kendoHost = $('#kendoHost');
// Workaround for height = 0.
// Additional code required to calculate on windows.resize
$kendoHost.height($(window).height());
this.app = new kendo.mobile.Application($kendoHost, {
skin: "flat"
});
console.log("Home viewAttached", this.app, $kendoHost.height());
};
return ctor;
});
Last kendo determines kendoHost height as 0, which prevents that the correctly rendered view show up. As a workaound I'm using $kendoHost.height($(window).height()); right before creating the app addresses.
As said in my comment above I'm still not sure if I'd recommend combining those two SPA frameworks as you might encounter more glitches like that while building your app. That said I'd love to hear about your progress :).
I designed a ASP.NET page named kk-container.aspx to be used as a control which will be loaded in Default.aspx with jQuery load function. The page kk-container.aspx has many HTML controls and javascript events bound as in the example.
<!--Sample code from kk-container.aspx-->
<div id="kk-container">
Action
<!--Many HTML controls here-->
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#kk-action").click(function () {
return false;
});
});
//Many javascript here.
</script>
I load this kk-container.aspx into Default.aspx with such code in the Default.aspx.
<div id="mycontainer"></div>
<script type="text/javascript">
$("#mycontainer").load("kk-container.aspx");
</script>
Everything works fine up to here. However, I have to load this kk-container.aspx in a few more divs in the Default.aspx. This causes conflict in the id's of HTML controls. $("#kk-action").click() doesn't work for all. How can I solve this problem and load kk-container.aspx multiple times in one Default.aspx page.
More to say: I considered giving random id's for HTML controls for each load of kk-container.aspx. However I had already designed my stylesheet mostly with id selector. And I use a packet javascript, valums uploader, working in kk-container.aspx. It will also require edit. If there is a simpler way, I don't want to code all over.
I expected too much from jQuery and asked this question desperately. I should have decided first whether I will use "kk-container" thing once or multiple times in a page. For loading "kk-container" thing multiple times, I had to consider these:
Designing CSS using class selectors instead of id selectors.
Producing random id for my HTML elements like in this question.
Writing my javascript functions so that they work compatible with those random id's.
Therefore loadind "kk-container.aspx" in a page with jQuery load wouldn't cause any id conflicts.
Anyway, I did a mistake and didn't want to rewrite my code. I found a solution to load content of "kk-container.aspx" in my Default.aspx page without a problem. Instead of jQuery load function I used iframes.
Since there is already an item with id "kk-action",
Action (like this one)
loading a content having an item with id "kk-action" will cause trouble.
$("#mycontainer").load("kk-container.aspx?id=" + recordID); //troublesome method.
Instead create an iframe without border and load that content into iframe.
function btnEdit_Click(recordID) {
$('#mycontainer').html("");
var kayitKutusuFrame = document.createElement("iframe");
kk-Frame.setAttribute("id", "kk-iframe");
kk-Frame.setAttribute("src", "kk-container.aspx?id=" + recordID);
kk-Frame.setAttribute("class", "kk-iframe"); //For border: none;
kk-Frame.setAttribute("frameBorder", "0");
kk-Frame.setAttribute("hspace", "0");
kk-Frame.setAttribute("onload", "heightAdapter();"); //For non-IE
document.getElementById("Mycontainer").appendChild(kk-Frame);
if (isIE = /*#cc_on!#*/false) { //For IE
setTimeout(function () { heightAdapter() }, 500);
}
}
I didn't gave random id to "kk-iframe" because I will not use it mulitple times. It now resides in FaceBox. To make the iframe flawless, it needs to be auto-resized. My heightAdapter() function will do it. Not only when a content is loaded into iframe but also content changes dynamically because of my clicks.
Here is the actual code for resizing iframe to fit content by Guy Malachi.
function calcHeight(content) {
//find the height of the internal page
var the_height = content.scrollHeight;
//change the height of the iframe
document.getElementById("kk-iframe").height = the_height;
}
Here is my heightAdapter() function which will work both when content is loaded and when I clicked something causing content to expand.
function boyutAyarlayici() {
var content=document.getElementById("kk-Frame").contentWindow.document.body;
calcHeight(content);
if (content.addEventListener) { //Forn non-IE
content.addEventListener('click', function () {
calcHeight(content);
}, false);
}
else if (content.attachEvent) { //For IE
content.attachEvent('onclick', function () {
calcHeight(content);
});
}
}
And the following is a link in a repeater. Since the link will be replicated, it should have unique id by asp server.
<a href="#mycontainer" rel="facebox" id='btnEdit-<%# Eval("ID") %>'
onclick='btnEdit_Click(<%# Eval("ID") %>); return false;'>Düzenle</a>
Now, whenever I click one of the replica links, the content having an item with id "kk-action" can be loaded into the my flawless iframe which will be created in "mycontainer".
<div id="mycontainer" class="kk-iframe" style="display:none"></div>
And the content will be shown in my fancy FaceBox.
You're going to have to use classes to style the elements. There can only be one unique ID per page, so you are going to have to generate different IDs or use class selectors in your JavaScript such as:
$('.kk-action').click()
The above is probably the best way to go as it will give every element with that class the binding
I have some page with something like this:
<div id="editor" contenteditable="true">SomeText</div>
I have an selfmade JS editor which actually issues
document.execCommand(some_command,false,optional_value);
when user presses a button in the editor. (For example I have plain, simple [Bold] button).
Everything is fine as long as I apply editing to part of "SomeText". For example selecting "Text" with mouse and pressing [Bold] button (which leads to document.execCommand("bold",false,false);) will produce:
<div id="editor" contenteditable="true">Some<span style="some-css-here">Text</span></div>
but when I select entire content of the div ("SomeText" in this example) and press [Bold] in my editor, FF will not produce expected
<div id="editor" contenteditable="true"><span style="some-css-here">SomeText</span></div>
but rather
<div id="editor" contenteditable="true" style="some-css-here">SomeText</div>
Notice the "style" attribute went into the editable div!
Why this makes a difference to me?
--It's because after editing is done I would like to take the content of the editable div, along with all styles, formating etc and further use it on the page. But I can't -- all the styling now sits inside the div.
A solution when I would be advised to extract styles from the div is not acceptable -- the div during its life takes a lot of styles from other active elements of the page (heavy jQuery usage)
So in brief:
How to tell FF to never touch editable div and apply all styling to its inner contents only?
Sincere thanks for you time.
(just pulled last of my hair, browsing FF dev site along with many others(((( )
Call once before any other execCommand and switch FF to tag mode
document.execCommand('StyleWithCSS', false, false);
Sometimes organizing and writing my thoughts brings me very positive results.
I have found satisfactory solution.
1)insert hidden div as a first child node into your editing div:
<div id="editor" contenteditable="true">
<div class="edit_text_mozilla_hack"></div>
SomeText
</div>
2) The CSS for it:
.edit_text_mozilla_hack {
display: block;
width: 0;
height: 0;
-moz-user-edit: none;
-moz-user-select: none
}
3)Now you can edit. I tested it with this my small test (actually I need all this stuff to edit short pieces of text like like captions, news subjects etc)
4)Before you use the content -- obious -- remoe that div.
5)When you want to return to editing -- insert it again.
Some bits of code from working (finally! ))) project:
//adds hidden div to all editable regions 'editables'
//the parameter is for speeding the thins up -- I'm often working with all or a lot of editable regions
function editAddMozillaHack(editables) {
if (!editables) {
editables = editGetEditables();
}
$("." + adminOptions["admin_loader"]).remove();
editables.each(function() {
$(this).prepend('<div class="edit_text_mozilla_hack"></div>')
});
}
//removes the hack from all regions
function editRemoveMozillaHack() {
$(".edit_text_mozilla_hack").remove();
}
//just returns all the editable regions -- my project often requires them all
function editGetEditables() {
return $("[contenteditable=\"true\"]");
}
of course -- testing pending.
I would like to hear from you ;)
regards.
I had the similar problem, when select all in contenteditable area with mouse or use CTRL-A there and then press CTRL+B for example, Firefox put style to the contenteditable container instead it's content.
<div contenteditable="true" style="font-weight: bold;"><p>..content..</p></div>
Same applyed for italic, font size, font-family and other inline styles.
I wrote a function which fixing that issue. It creates new element below the content and changes selected range till that element:
function checkSelectAll (container, cmd, args) {
if(document.getSelection) {
var cn = container.childNodes,
s = document.getSelection(),
r = s.getRangeAt(0);
if(r.startContainer == container && r.endContainer == container){
var endMarker = document.createElement('SPAN')
container.appendChild(endMarker);
r.setEndBefore(endMarker);
s.removeAllRanges();
s.addRange(r);
document.execCommand(cmd,false,args);
container.removeChild(endMarker);
} else {
document.execCommand(cmd,false,args);
}
} else {
document.execCommand(cmd,false,args);
}
};
this code affects only FF, for other browsers it will just apply execCommand