Can't understand why PhotoSwipe doesn't show anything when I'm trying to add it into Rails project
Used this gem: https://github.com/skakri/photoswipe-rails
Step by step reproduced manual: https://photoswipe.com/documentation/getting-started.html#init-add-pswp-to-dom
Wrote 'click' handler
But it shows nothing
Code I wrote:
<body>
<!-- some Rails and other stuff -->
<%= render 'shared/photoswipe' %>
</body>
shared/_photoswipe.html.erb contains full copy of div class="pswp" from 2)
Invisible div successfully added at the end of page
Added some coffee code for PhotoSwipe init on click handler
$ ->
$PhotoContainer = $('#MainPhoto')
$PhotoContainer.click ->
$pswpElement = document.querySelectorAll('.pswp')[0]
$items = []
$('.photo-item').each ->
$Img = $(#)
$items.push( { src: getUrlFromImg($Img).bigImgUrl, w: 1000, h: 1000 } )
$options = {
history: false,
focus: false,
index: 0
}
$gallery = new PhotoSwipe( $pswpElement, PhotoSwipeUI_Default, $items, $options)
$gallery.init()
When I click on #MainPhoto container event fired, $items array correctly fills by image urls and sizes and calls PhotoSwipe init() function, but nothing shows on screen
gem is improperly written
should add
#import "photoswipe/index";
#import "photoswipe/photoswipe";
#import "photoswipe/default-skin/default-skin";
into application.scss
Related
My JS work only if i reload page.
Description my problems
1.I have book
2.Book have description
3.In action show i have logic for present description
Logic:
1. If description.length > 250 i show 250 symbols and show view_more button
2. If user click on button then my js must work
4.When i on books#index => choose some book(#show)=> now i on book_page and i see view_button => when i click => nothing was happen
5. But if i reload page before click on button => my js work fine
My js
(function(window, document, undefined){
window.onload = init;
function init(){
let btn_view_more = document.getElementById('button_for_view_more')
let description_all = document.getElementById('book_description_all')
let description_short = document.getElementById('book_description_short')
btn_view_more.addEventListener('click', ()=>{
description_all.classList.remove('hide_description')
description_short.style.display = 'none'
});
};
})(window, document, undefined);
But i have new version of my js
document.addEventListener("turbolinks:load", function() {
myFunc();
})
function myFunc(){
let btn_view_more = document.getElementById('button_for_view_more')
let description_all = document.getElementById('book_description_all')
let description_short = document.getElementById('book_description_short')
btn_view_more.addEventListener('click', ()=>{
description_all.classList.remove('hide_description')
description_short.style.display = 'none'
});
}
New version work fine even i don't reload page, but i have error in my console
Cannot read properties of null (reading 'addEventListener') (can't find id button_for_view_more)
What i want:
1. Js work even i don't reload page
2. Zero error in console
My solution is connect js only to the page where it is used, delete from javascript/some.js and drop require from pack/application.js. You can also add a condition to your script that will check whether such an ID is currently on the page. And only after run the main block.
I’m experimenting Elm 0.19 with Electron building a simple Elm app (based on the Counter example) in Electron. When I run electron-forge start, I get an error that says Cannot read property 'Elm' of undefined highlighting scope[‘Elm’] part of the elm.js file.
function _Platform_export(exports) {
scope[‘Elm’] ? _Platform_mergeExportsDebug(‘Elm’, scope[‘Elm’], exports) : scope[‘Elm’] = exports;
}
The interesting thing is that the exact same files (Main.elm, index.html) open up just fine (showing the counter as expected), if I run elm-live Main.elm --open -- --output=elm.js instead.
So it appears that this passed to elm.js in Electron is undefined, which then caused scope to be undefined.
The Chrome Dev Tool shows the scope variable passed to elm.js is undefined in the case of the Electron app. In the case of elm-live, that value was the Window object.
elm.js
(function(scope){
'use strict';
--- omitted ----
var author$project$Main$main = elm$browser$Browser$sandbox({ init: author$project$Main$init, update: author$project$Main$update, view: author$project$Main$view });
_Platform_export({ 'Main': { 'init': author$project$Main$main(elm$json$Json$Decode$succeed(_Utils_Tuple0))(0) } });
})(undefined);
elm.js? [sm]
(function(scope){
'use strict';
--- omitted ----
var author$project$Main$main = elm$browser$Browser$sandbox(
{init: author$project$Main$init, update: author$project$Main$update, view: author$project$Main$view});
_Platform_export({'Main':{'init':author$project$Main$main(
elm$json$Json$Decode$succeed(_Utils_Tuple0))(0)}});}(this));
Error message
Uncaught TypeError: Cannot read property 'Elm' of undefined
at _Platform_export (elm.js:1949)
at elm.js:4004
at elm.js:4005
index.html:44 Uncaught ReferenceError: Elm is not defined
at index.html:44
Index.html
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div id="elm"></div>
</body>
<script src="./elm.js"></script>
<script>
var app = Elm.Main.init({
node: document.getElementById('elm')
});
</script>
</html>
Main.elm
import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)
main =
Browser.sandbox { init = init, update = update, view = view }
-- MODEL
type alias Model = Int
init : Model
init =
0
-- UPDATE
type Msg = Increment | Decrement
update : Msg -> Model -> Model
update msg model =
case msg of
Increment ->
model + 1
Decrement ->
model - 1
-- VIEW
view : Model -> Html Msg
view model =
div []
[ button [ onClick Decrement ] [ text "-" ]
, div [] [ text (String.fromInt model) ]
, button [ onClick Increment ] [ text "+" ]
]
In the Elm #electron channel on Slack, I saw a discussion about this issue and here is a recap for anyone interested.
The issue is that 'this' is not defined in the electron renderer
This causes scope within Elm runtime to be undefined.
Possible work-around is
uglify the compiled elm code using the instructions at https://elm-lang.org/0.19.0/optimize
or change (this) to (this||window) at the bottom of the compiled elm.js file (Opened an issue here https://github.com/elm/core/issues/998)
Folks
I am using backbonejs (0.9) with latest jquery mobile (1.3). I am using WebSql for storing local data. When the home page loads, I do a query from the local database and use jquery Deferred to render the content after the query is successful. Unfortunately, the jquery mobile footer does not get "enhanced".
My Haml template for the view is simple and looks as follows:
%div{'data-role' => 'header'}
%div{'data-role' => 'navbar', 'data-iconpos' => 'top'}
%ul
%li
%a.ui-btn-active.ui-state-persist{'href' =>''}ATAB
%li
%a{'href' =>'#btab'}BTAB
%div{'data-role' => 'content'}
%div{'data-role' => 'footer', 'data-position' => 'fixed'}
%a{'data-icon' => 'plus', 'href' => '#a_link'}A link
My Backbonejs view looks as follows (I use coffeescript). Router already has templates cached in router.templates and txnsLoadedPromise gets "resolved" once the db records from websql are loaded:
window.HomeView = class HomeView extends Backbone.View
initialize: (options) ->
#template = Handlebars.compile(router.templates['/home/home'])
render: () ->
txnsLoadedPromise.then(
#renderDynamic
)
return this
renderDynamic: () =>
if (transactions.length > 0)
#generate content dynamically here and put in result
result = {}
$(#el).html(#template(result))
$('[data-role="header"]').trigger('create')
$('[data-role="footer"]').trigger('create')
This is how my view looks:
I have tried to use "refresh" instead of create in the trigger call for footer but it does not work. Strangely enough, the header refresh works properly. Also, if I remove the dynamic nature of the page (meaning render the view directly instead of when the promise is resolved, then it works fine (which is expected.)
Just for completeness, Following is my router code (portions of it that are relevant)
window.MyRouter = class MyRouter extends Backbone.Router
routes:
"": "home"
initialize: (options) ->
#code for preloading view templates
templates: {}
home: () ->
PageUtil.changePage new HomeView({templateKey: '/home/home'})
And the changePage method in PageUtil class:
window.PageUtil = class PageUtil
#changePage: (view, overrideOptions={}, role='page') ->
defaultOptions={transition: 'slide', reverse: false}
options = $.extend(defaultOptions, overrideOptions)
view.render();
$('body').append($(view.el));
if window.curentView
console.log 'removing view: ', currentView
window.currentView.remove()
window.currentView = view
$.mobile.changePage(view.$el, options);
Any ideas?
There's a problem in your code.
First trigger('create') will work only on content part, use trigger('pagecreate') to enhance header + content + footer.
Read more about it in my other ARTICLE. Or find it HERE.
There you will find a working example of dynamically added footer content.
If you are adding dynamic navbar element then even trigger('pagecreate') wont help you.
But there's a working solution:
$('#index').live('pagebeforeshow',function(e,data){
navbarHandler.addNewNavBarElement('navbar-test','el4','Page Four');
});
var navbarHandler = {
addNewNavBarElement:function(navBarID, newElementID, newElementText) {
var navbar = $("#" + navBarID);
var li = $("<li></li>");
var a = $("<a></a>");
a.attr("id", newElementID).text(newElementText);
li.append(a);
navbar = navbarHandler.clearNavBarStyle(navbar);
navbar.navbar("destroy");
li.appendTo($("#" + navBarID + " ul"));
navbar.navbar();
},
clearNavBarStyle:function(navbar){
navbar.find("*").andSelf().each(function(){
$(this).removeClass(function(i, cn){
var matches = cn.match (/ui-[\w\-]+/g) || [];
return (matches.join (' '));
});
if ($(this).attr("class") == "") {
$(this).removeAttr("class");
}
});
return navbar;
}
}
I'm developing an application in Rails wich acts as a network and apps monitor. I'm using Active Admin Dashboard as a main page, showing the status of every server and some apps in my network. I'd like to configure the dashboard page to autorefresh every x minutes, but I don't know where to configure this setting, because I don't have full control of the html rendered by the dashboard. Have anyone managed to do it?
Thanks
In config/initializers/active_admin.rb you can register javascripts:
config.register_javascript "/javascripts/admin-auto-refresh.js"
Then create a admin-auto-refresh.js that does exactly that.
You'll also want to register admin-auto-refresh.js in your config/environments/production.rb
config.assets.precompile += "admin-auto-refresh.js"
UPDATE:
Added some code to refresh the page after 5 seconds. Add this to /javascripts/admin-auto-refresh.js
$(function() {
setTimeout(location.reload(true), 5000);
})
Here's the final code, thanks very much to #JesseWolgamott.
$(function() {
var sPath = window.location.pathname;
var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
if (sPage == 'admin'){
setTimeout("location.reload(true);", 10000);
}
})
Below is code that will refresh without the page flashing. It is enabled by having at least one element in the page with a class tag of needs_updating. Include this code snippet in any javascript that is loaded and then add the tag any where on the page.
The only downside is this ONLY updates the html body of the page.
For example
show do |my_model|
...
if my_model.processing?
row :status, class: 'needs_updating' do
'we are working on it...'
end
else
row :status do
'ready'
end
end
....
end
so if the model is still processing then you get the class tag 'needs_updating' which will cause the below javascript to be invoked every 10 seconds
jQuery(document).ready(function($) {
if ($('.needs_updating').length > 0) {
console.log("we need some updating soon");
var timer = setTimeout(function () {
console.log("re-loading now");
$.ajax({
url: "",
context: document.body,
success: function(s,x) {
$(this).html(s);
if ($('.needs_updating').length == 0) {
clearInterval(timer);
}
}
});
}, 10000)
}
})
Has anyone succeeded to do this?
I accomplished this by replacing Util.prompt with my own jquery.dialog method. The prompt function takes a parameter as a callback, making it easy to create a drop-in replacement.
if (isImage) {
// OLD: util.prompt(imageDialogText, imageDefaultText, makeLinkMarkdown);
// WMD_IMAGE_GALLERY_URL loaded from a global settings elsewhere
util.imageGallery(WMD_IMAGE_GALLERY_URL, makeLinkMarkdown);
}
else {
util.prompt(linkDialogText, linkDefaultText, makeLinkMarkdown);
}
If you're interested, I wrote a blog entry about it (with pictures!) which has some more sample code as well as some of the problems/solutions I encountered in implementing this.
The following hack requires use of jQuery, jQuery UI and Mike Alsup's jQuery Form Plugin for performing AJAX file uploads. The hack works with the linked versions (jQ 1.7.2 and jQUI 1.8.20). I can't guarantee compatibility with other versions.
In your <head>, you'll need to include the dependencies:
<script type='text/javascript' src='jquery.min.js'></script>
<link href='theme/jquery-ui.css' rel='stylesheet' type='text/css' />
<script type='text/javascript' src='jquery-ui.js'></script>
<script type='text/javascript' src='wmd/showdown.js'></script>
<script type='text/javascript' src='wmd/wmd.js'></script>
<link type='text/css' rel='stylesheet' href='wmd/wmd.css'/>
<script type='text/javascript' src='jquery.form.js'></script>
We actually need to make a single change to wmd.js.
Go on in there and search (ctrl+f) for var form = doc.createElement("form");
Immediately following this line, assign the form an id, dialogform will do: form.id = "dialogform";
Now on the front end, run:
$(document).ready(function(){
$("#wmd-image-button").live("click",function(){
setTimeout(function(){
$(".wmd-prompt-dialog").css({"opacity": "0", display: "none"});
}, 100);
var $div = $("<div>");
var $form = $("<form>").attr({action: "submit_image.php", method: "post"})
var $file = $("<input/>").attr({type: "file", name: "image"});
var $name = $("<input/>").attr({type: "text", name: "name", placeholder: "Name"});
var $submit = $("<input/>").attr("type", "submit");
$form.append($name, $file, $submit).ajaxForm(function(r) {
r = $.parseJSON(r);
if(r.success){
$("#dialogform input[type='text']").val(r.filename);
$("#dialogform input[value='OK']").trigger("click");
$div.dialog("close");
}
});
$div.append($form).dialog({title: "Upload Image"});
});
$("#wmd-link-button").live("click", function(){
setTimeout(function(){
$(".wmd-prompt-dialog").css("opacity", "1");
}, 100);
});
});
Remember, the post was written for jQuery 1.7.2, and live() has since been deprecated. Please switch to on() if you're using a more recent version of jQuery
And on the backend, in submit_image.php:
$f = $_FILES['image'];
$p = $_POST;
$allowedTypes = array(IMAGETYPE_PNG, IMAGETYPE_JPEG, IMAGETYPE_GIF);
$detectedType = exif_imagetype($f['tmp_name']);
if(in_array($detectedType, $allowedTypes)){
$pi = pathinfo($f['name']);
$ext = $pi['extension'];
$target = "img/" . strtolower(str_replace(" ", "-", $p['name'])) . "." . $ext;
if(move_uploaded_file($f['tmp_name'], $target)){
$returnArr = array(
"success" => true,
"filename" => site_url($target)
);
echo json_encode($returnArr);
}
else echo json_encode(array("success" => false));
}
else echo json_encode(array("success" => false, "msg" => "Invalid File Type."));
Hopefully that will get you started. This was written a couple of years ago, when my javascript skills were sub-par! Haha. I previously had this on a blog (which is now dead), with step-by-step instructions and explanations; lots of unnecessary fluff. Thanks #Kamiccolo for bringing this link to my attention. I had to consult the way-back-machine in order to revive it.
Add a button to the control panel of WMD.
Search for the following string to find the place where buttons are being added:
italicButton.XShift
In my version, the function is in class SpritedButtonRow and is called build.
Ignore the setup and textOp attributes. XShift is the position of the button image in the css sprite that comes with WMD, Instead of that, give the button a class and in the class specify the background image. Then Just add an onclick event to the button
that will do what you need it to do.
But, I don't think an upload button should be inside a text editor, does not make sense.