I'm trying to integrate a small widget I created into my shopify theme. I've included all of the necessary resources however jQuery UI doesn't seem to work.
I get the following error in console:
Uncaught TypeError: $(...).resizable is not a function
I've tried including the files from both CDN and uploaded to theme using:
{{ 'filename.js' | asset_url | script_tag }}
and
{{ '//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js' | script_tag }}
{{ '//ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js' | script_tag }}
using a simple init method:
$('#objects img').resizable({
handles : 'se',
stop : resizestop
}).parent('.ui-wrapper').draggable({
revert : 'invalid'
});
Any help is appreciated as always,
Related
I am getting the absolute url path for an image using Twig function <{{ url(<'front'>) }}in Drupal 8 and it just works fine. Problem comes when changing the default language (en) to (sp), then the url changes from localhost/themes/.../image.png to localhost/sp/themes/.../image.png and then the image is no longer available. I think there is an option to pass the language as a parameter to the url function, but I'm not quite sure how to implement that.
Many thanks for your help
Update
I have to try this
{{ absolute_url(asset('images/logo.png')) }}
I will test and comment
You could use the twig tweak module and it's file URL function.
{{ 'public://images/logo.png'|file_url(false) }}
You can solve this issue first installing Tweak module in your Drupal installation and using drupal_url Tweak function like this:
{{ drupal_url('<front>', {}, {'language': 'en' }) }}
I am running into a very unique edge case with my TinyMCE user experience.
I want to be able to
COPY IMAGE (Right click, copy image on any image on the internet)
PASTE IMAGE (CTRL + V) into TinyMCE editor
and have it save a local copy of this image and serve that.
The problem is a user can paste an image being served in S3 bucket and it is only authenticated for a certain amount of time, then days later the image will not show.
I have looked at TinyMCE - File Image Upload documentation to no avail.
Also looked into TinyMCE Paste Plugin, TinyMCE Local Upload Demo, TinyMCE Docs - Upload Images and dated gem TinyMCE-Rails-ImageUpload
Ultimately, I have a feeling that a custom handler for Paste Preprocess will need to be used
My tinymce.yml configuration follows:
menubar: false
statusbar: false
branding: false
toolbar:
- styleselect | bold italic underline strikethrough | indent outdent | blockquote | image | link | codesample | bullist numlist | table | code | undo redo
plugins:
- link
- codesample
- image
- lists
- code
- table
images_upload_url: "/tinymce_assets"
automatic_uploads: true
relative_urls: false
remove_script_host: false
convert_urls: true
table_responsive_width: true
I feel like this type of problem should be common and there should be a simple solution that I am not seeing. However, if not at all possible, would the solution be to create a custom js function that intercepts paste call, check if it is coming from external url, then decide to create a local image copy and give that url?
Thank you, and any help would be appreciated.
I am experimenting with using NativeScript to speed up the process of porting an existing Android app to iOS. The app in question uses a great deal of SVG manipulation in a Cordova webview. To keep things simple I want to port all of my existing Webview side code - in essence the entire existing Cordova www folder and its contents - over to the new NativeScript app. The WebView talks to a custom Cordova plugin which I use to talk with my servers to do such things as get new SVGs to show, keep track of user actions etc.
If I an get through these teething issues I am considering using this component to implement bi-direction communications between by current webview JS code and the, new, NativeScript backend that will replace my current Cordova plugin. Someone here is bound to tell me that I don't need to do that... . However, doing so would mean throwing out the baby with the bathwater and rewriting all of my current Webview ES6/JS/CSS code.
This is pretty much Day 1 for me with NativeScript and I have run into a few issues.
I find that I cannot get rid of the ActionBar even though I have followed the instructions here and set the action bar to hidden.
I can use the following markup in home.component.html
to show external web content. However, what I want to really do is to show the local HTML file that is in the www folder in the following folder hierarchy
app
|
____home
|
____www
|
______ index.html
|
______css
|
______ tpl
|
.....
However, when I use the markup
<Page actionBarHidden="true" >
<WebView src="~/www/index.html"></WebView>
</Page>
I am shown the error message
The webpage at file:///data/data/com.example.myapp/files/app/www/index.html is not available.
I'd be most grateful to anyone who might be able to tell me what I am doing wrong here - and also, how I can get rid of that action bar which is currently showing the app title.
About using local HTML file
Is your local HTML file recognized by Webpack (which is enabled by default in NativeScript)? Try to explicitly add the local HTML file to your webpack.config.js file. This way Webpack will "know" that it will have to bundle this file as well.
new CopyWebpackPlugin([
{ from: { glob: "<path-to-your-custom-file-here>/index.html" } }, // HERE
{ from: { glob: "fonts/**" } },
{ from: { glob: "**/*.jpg" } },
{ from: { glob: "**/*.png" } },
]
Example here
About hiding the ActionBar
NativeScript Core only: Try hiding the action bar directly for the frame that holds the page. See the related documentation here
NativeScript Angular: The page-router-outlet will have an action bar by default (you can hide it by using the Page DI as done here). Otherwise, you could create a router-outlet (instead of page-router-outlet). The router-outler won't have the mobile-specific ActionBar.
Running into a bit of a headache with some Coffeescript and/or Rails behaviour. Everything works fine when run in development (non-compiled JS) but once I pushed to production I started getting:
Uncaught InvalidValueError: initMap is not a function
Here's the coffeescript I am using (stripped down to basics):
jQuery ->
#map = null
new googleMap()
class googleMap
window.initMap = ->
#map = new (google.maps.Map)(document.getElementById('map-overlay'))
And it is being called as per the Google Maps API V3 documentation with the follow script loaded at the bottom just below the </body> tag on my page.
<script async="async" defer="defer" src="https://maps.googleapis.com/maps/api/js?key=*snip*&callback=initMap"></script>
I'm guessing it has something to do with the way the JS is compiled and gets wrapped in an unnamed function but I've spent a bit of time trying to figure it out and am not getting any further.
Any help would be appreciated.
A nice trick for using google maps asynconously without globals is to use jQuery.deferred together with the Google API loader.
apiLoaded = jQuery.Deferred()
mapInit = jQuery.Deferred()
google.load 'maps', '3',
other_params: 'sensor=false'
callback: ->
apiLoaded.resolve google
apiLoaded.done (google) ->
mapInit.resolve(
new (google.maps.map)(document.getElementById('map-overlay'))
)
google
mapInit.done (map) ->
# do something with the map here for example add a marker.
new (google.maps.Marker)(
position:
lat: -25.363
lng: 131.044
map: map
title: 'Hello World!')
map
There was nothing wrong with my Coffeescript, in the end it turns out bootstrap.min.js inside my vendors folder was breaking it. Works once that file is removed.
So I'm writing a small app and currently working on the angular js front end. The backend is written in RoR but thats besides the point. I have a dependency ui.router in my angular.module so I can move around pages.
Link to github branch if interested: linky link
Paths:
App
-Assets
-Javascripts
-app.js (where the routing lies)
-Templates
-dashboard.html (this is the template I want to render)
-Views
-Layouts
-Index.html.erb <- this is the index
Heres the problem:
angular.module('SwoleMetrics', [
'ui.router',
'templates'
])
.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
/**
* Routes and States
*/
$stateProvider
.state('dashboard', {
url: '/dashboard',
templateUrl: 'dashboard.html', <<--- RIGHT HERE
controller: 'DashboardCtrl'
});
// default fall back route
$urlRouterProvider.otherwise('/dashboard');
// enable HTML5 Mode for SEO
$locationProvider.html5Mode(true);
});
No matter what path I put into templateUrl, it never works. I have the same html file in basically every folder around app.js to see if it could read any of those but it always fails and just recursively inserts the parent div into the . Do any front end engineers know why?
The issue was the way the files were being served via rails. The sprockets gem was updated and no longer compatible with angular-ui-templates and broke everything. Downgraded to sprockets v. 2.x and it worked.
Its going to be relative to index.html. If index.html is under App then your path is going to be templateUrl: 'Templates/dashboard.html'.