I am trying to add a horizontal line option to the Trix editor in Rails 6.1.4. The example that I am finding for this (https://codepen.io/javan/pen/oQpevW) works perfectly, as long as it runs in CodePen. When I implement the example I am getting the option on the toolbar, but when I attempt to use it, I get the error message that "insertAttachment" is not a function.
addEventListener("trix-initialize", (event) ->
toolbarElement = event.target.previousSibling
blockTools = toolbarElement.querySelector("[data-trix-button-group=block-tools]")
if !!blockTools
blockTools.insertAdjacentHTML("afterbegin", '<button type="button" class="trix-button" data-trix-action="x-horizontal-rule" title="Horizontal Rule" tabindex="-1">-</button>')
)
addEventListener("trix-action-invoke", (event) ->
if (event.actionName == "x-horizontal-rule")
editor = event.target
attachment = new Trix.Attachment({ content: "<hr>", contentType: "application/vnd.trix.horizontal-rule.html" })
editor.insertAttachment(attachment)
)
As an interesting side-note, the initialize event was always triggered on the edit div, not the toolbar div, so I had to grab the previous sibling of the event target, otherwise the "block-tools" button group was never found. The "trix-action-invoke" event is triggering as it should and I have verified that the target is the correct div.
Because the example is using Trix 1.0.0, I tried with this version as well, but it generated the error message stating "Trix.Attachment is not a constructor".
I read a post for a different issue ("new Trix is not defined" when using Basecamp / Trix Editor) that implied that there could be a problem with Trix not being loaded yet by the time I want to use it, and it suggested to pull the JS from cloudflare directly, but this didn't solve my issue.
Any suggestions on what could be done to get this to work?
Related
In my Cypress test,
I need to test a link which downloads a .txt, .xlsx and a .zip file when clicked, but when I use "click()" to click the hyperlink, it starts a page load and expects a new action to happen as a result of clicking a link.
As an alternative to this I tried using the cy.downloadFile() to download the files directly through the link but the link I am using is dynamically generated hence I am unable to use that as well. Hence I want to store the newly generated link in the variable and then use it in cy.downloadFile() every time I run the test.
Are there any other ways to test a hyperlink or how to store the dynamically generated link every time the test is run?
Hi there i been through this problem before.
I think it is the same scenario where the cypress test runner just keep waiting page load event and not go to the next test command while file are successfully downloaded.
Add custom cy.window event to listen the click event and add timeout to "force" reload current page, you need to tweak the timeout value so it suitable for your test.
it.only('tes button download', ()=> {
// visit url
cy.visit("/spmb/list_nilaiseleksi");
cy.get('#wrap-button > .btn').click()
//download
cy.window().document().then(function (doc) {
doc.addEventListener('click', () => {
setTimeout(function () { doc.location.reload() }, 5000)
})
cy.get(':nth-child(9) > .col-md-12 > .btn').click()
})
})
More details and discussion available here on cypress github issue :
https://github.com/cypress-io/cypress/issues/14857
I found a way to store the link of the element I want to click. Since I am able to store the link, I am able to solve the requirement by using cy.downloadFile().
cy.get('#selector', {timeout: 15000}).then(($input) => {
cy.downloadFile($input.attr('href'),'cypress/downloads','filename.csv')
});
For me, the problem was resolved after I added the download attribute to the link, This is changing the element in the DOM, but it keeps the solution simple:
cy.get('[href="download?type=php"]')
.then((el) => {
el.attr('download', '');
})
.click();
I am creating an Ad Blocker. I am just trying to Automatically on safari extension of "Content Blocker". I went through examples but did't found any solution. Is there any way to "ON" extension or manually we have to start it?
On iOS, Safari Content Blockers are disabled by default.
There is no way to automatically enable them from your app. You must instruct the user to:
Open the Settings app.
Go to Safari > Content Blockers.
Toggle on your Content Blocker extension.
On macOS (as of 10.12), a similar rule applies: Content Blocker extensions (bundled with your app) are disabled by default, and must be toggled on by the user in Safari Preferences > Extensions.
Assuming you want to test your "personal AdBlock program", first prepare a dummy HTML, with this line <div class="ads">hello</div>,
next apply your "personal AdBlock program", assuming it is JavaScript/CSS based and not proxy-like, you either hide, or remove the element (Node) from the DOM.
for example:
document.querySelector('div[class*="ads"]') -- this is nice and (very) generic way to find the element.
this is how to hide "the ads"
document.querySelector('div[class*="ads"]').style.display="none";
or, to make it stronger, related to other rules on the page, make it a local style + important notifier: document.querySelector('div[class*="ads"]').style.cssText="display:none !important;" ;
you can also remove the element (Node) from the DOM:
var e = document.querySelector('div[class*="ads"]') follow by:
e.parentNode.removeChild(e);
now, you probably want to see that "YOUR ADBLOCK" worked,
later (after the page has loaded, and your javascript code runned) type:
console.log(null === document.querySelector('div[class*="ads"]') ? "removed(success)" : "still here(failed)")
note that for this example (to make things simple) I assume there is only one div with that class in the page (avoiding loops :) ).
if you've just going to hide the element, you should query its current (most updated) style-condition, using a native method exist under window:
console.log("none" === window.getComputedStyle(document.querySelector('div[class*="ads"]')) ? "hidden(success)" : "still here(failed)")
Enjoy!
I have a simple modal that appears in which the user is shown the browse button to add the file to upload. Due to an unknown issue, be it the fact its an HTML5 file input therefore the browser adds its own functions to it, this has become a pain to test.
On my page I have:
<input type="file" id="photo_upload">
Capybara offers a solution out of the box which is:
attach_file <<upload_file_id>>, <<file_path>>
This behind the scenes executes a send_keys command to push the file_path into the path container for this input, however this simply did not work with my setup. I am running Firefox 25.0.1 on Windows 8. I tried both a relative path and a full path to this file, with forward and backslash combinations.
When I mean it did not work, I mean when my ajax script executes from clicking the button 'upload' next to it, it does not send any file object in the params.
I even tried to use capybara to send the file path directly:
find_field(<<upload_file_id>>).native.send_keys(<<file_path>>)
Next up, was to attempt to use selenium to push it in using:
element = driver.find_element(:id, <<upload_file_id>>)
element.send_keys <<file_path>>
Then I tried executing script to ensure the element was visible, and then setting it:
element = page.execute_script(
"document.getElementById('#{<<upload_file_id>>}').style.visibility = 'visible';
document.getElementById('#{<<upload_file_id>>}').style.height = '20px';
document.getElementById('#{<<upload_file_id>>}').style.width = '60px';
document.getElementById('#{<<upload_file_id>>}').style.opacity = 1; return
document.getElementById('#{<<upload_file_id>>}')")
find_field(field_locator).native.send_keys(<<file_path>>)
This didn't work either. Now I am completely stuck. All the help on here and google points to using the above, but it just simply does not work for my setup.
My options as far as I can see it are to use a windows automation script and jump out of capybara, run the script, and then continue, or to directly call the upload url either from capybara using a post or calling the js ajax that currently does it.
So I have solved it, and its not too ugly. I used the automation route via AutoIT. The bundle you download with AutoIT includes a script to exe converter and using the below script (I can not take credit for the script) I created an exe:
Local Const $dialogTitle = $CmdLine[2]
Local Const $timeout = 5
Local $windowFound = WinWait($dialogTitle, "", $timeout)
$windowFound = WinWait($dialogTitle, "", $timeout)
Local $windowHandle
If $windowFound Then
$windowHandle = WinGetHandle("[LAST]")
WinActivate($windowHandle)
ControlSetText($windowHandle, "", "[CLASS:Edit; INSTANCE:1]", $CmdLine[1])
ControlClick($windowHandle, "", "[CLASS:Button; TEXT:&Open]")
Else
MsgBox(0, "", "Could not find window.")
Exit 1
EndIf
In my capybara script, I merely run:
find_field(<<upload_file_id>>).click
system("<<full_path>>\\file_upload.exe \"#{<<file_path>>}\" \"File Upload\"")
and it works perfectly! In fact, I think I prefer the fact it exactly mimics what a user would be doing.
I have trying to create file upload using jQuery-UI dialog and uploadify. I have seen that others also had similar problem, but it was always z-index in css or cross-browser issue, which is not case here because it just won't work in any browser. When I place uploadify div(div that is a placeholder for flash object) outside the jQuery dialog everything works fine, but when I try to put it inside, swf gets loaded but when dialog pops I get error: 'Object expected' in jquery.min.js on
var c=a.getAttributeNode("tabindex")
Is it possible that problem is caused by jquery version? Current version is 1.7.1 and I tried using also 1.9.0
Add the following CSS class to override the default z-index value 1
.swfupload {
z-index: 10000 !important;
}
this error in absence function getAttributeNode and getAttribute in Flash element.
change in "jquery-min.js"
elem.getAttributeNode(name) // OR a.getAttributeNode(b)
to
(elem.getAttributeNode?elem.getAttributeNode(name):null) // OR (a.getAttributeNode?a.getAttributeNode(b):null)
and
elem.getAttribute(name) // OR a.getAttribute(b)
to
(elem.getAttribute?elem.getAttribute(name):null) // OR (a.getAttribute?a.getAttribute(b):null)
I have a few multiselect boxes from the Jquery UI on a page that work perfectly well in Chrome & Safari but not in Firefox for some reason... when I load the Error Console in Firefox I see:
Error: $.widget is not a function
Source File: http://localhost:3000/javascripts/jquery.multiselect.js?1302660373
Line: 563
Any ideas why?
edit: the line itself is within the open function right where it says "// react to option changes after initialization"
// open the menu
open: function(e){
var self = this,
button = this.button,
menu = this.menu,
speed = this.speed,
o = this.options;
widget: function(){
return this.menu;
},
// react to option changes after initialization
_setOption: function( key, value ){
var menu = this.menu;
switch(key){
case 'header':
menu.find('div.ui-multiselect-header')[ value ? 'show' : 'hide' ]();
I am assuming you are using the jQuery Multiselect plugin… which depends on jQuery UI.
Sounds like you have not included enough of the jQuery UI library or just none of it. You need to include the core parts of jQuery UI (including Widget) if you build a custom download. Or just download the whole jQuery UI and include it instead.
For anyone else who is getting this but has the requirements; make sure you are including the Javascript files in the correct order. This error was being caused by my jquery-ui.js being included after the multiselect js file.
This answer is probably unrelated to the situation of the questioner, but I put it here for the sake of others Googling the question.
I got this error using Rails 3.2 and fixed it by deleting (renaming) the public/assets folder. It seems there are a lot of problems with the assets pipeline still. I don't know the details but have had other Javascript failures that are fixed this way.
Actually if you are getting this error then it's either
a) per #andyb answer - you haven't included the correct jQuery UI components
OR
b) your DOM is not loaded yet with the correct $.widget and therefore your function is attempting to call before $.widget has loaded. to fix the problem, ensure $.widget is called BEFORE your function