How to change a href link with gulp - javascript

I'm creating a task with gulp that need to change the parameters of a href.
For example:
On my html file I have a link:
Click here
So, "myfolder" is variable and refers to the name of the folder where the index.html is.
When I push the file onto the server, the page do not display as is not targeting the index.html file, but just the name of the folder.
I used gulp-replace for the task in the following way:
var gulp = require('gulp');
var replace = require('gulp-replace');
gulp.task('templates', function(){
gulp.src(['index.html'])
.pipe(replace('<a href="*/" >', '<a href="*/index.html >"'))
.pipe(gulp.dest('build/'));
});
As the folder name (myfolder) is variable because every time I'm working on the project I have to create a new folder and at the end the index.html file cannot contain just a specific name.
So, this method didn't work.
Any help will be appreciated.
Kind regards,
Fernando

You need to define a regex in your replace call and match the part inside href:
replace(/<a href="(.*)"/g, '<a href="$1/index.html"')

Related

Use javascript variable as file name to download file with href

I have a javascript code that extracts filename as a variable from the current html file. The filename, for example, is "new.html" filename variable is successfully used to append href where I need to open same file strored in another folder. Using the same code, I need to append this variable to a folder path with href tag to download a file with href tag. The file name is extracted from .html (example new) and added to .xls file (example new.xls)
var filename=location.pathname.substring(location.pathname.lastIndexOf("/") + 1);
console.log(filename);
document.getElementById("htag1").href= "Foldername/"+filename;
var object=filename.slice(0,-5);
var xls=".xls";
var xlsfile=object+xls;
$(".xlsfile").text(xlsfile);
console.log(xlsfile);
document.getElementById("d1tag1").href= "Foldername/"+xlsfile;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
#working
#not working
####working download code####
But this is giving me download error with no file getting downloaded
but it is pointing to the right path. Should I use another way for download feature? Before this I had entered the file path statically which seemed to work.
Any help would be appreciated! Thank you!
Try this way, i'm sure now it will work ^^
var filename=location.pathname.substring(location.pathname.lastIndexOf("/") + 1);
console.log(filename);
document.getElementById("htag1").href= "Foldername/"+filename;
var object=filename.split(".")[0];
var xls=".xls";
var xlsfile=object+xls;
$(".xlsfile").text(xlsfile);
console.log(xlsfile);
document.getElementById("d1tag1").href= "Foldername/"+xlsfile;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
#working
#not working
####working download code####

Mustache.js - using partial inside an external template file

I'm using external template file and I want to use a partial inside the template file (.mst file inside another .mst file)
For example I have template.mst file with this code:
{{#comments}}
// Here I want to use another external .mst file
{{/comments}}
So I careated a comment.mst file beside the template.mst file and now I'm trying to use {{>comment}} to call this external template file - full example:
{{#comments}}
{{>comment}}
{{/comments}}
But it doesn't work. I tried to play with it a little bit, I tried to add the file extension {{>comment.mst}} and I tried to add the path {{>temmplates/comment}} and any pther option.
This is the code I use to load the template:
$.get('templates/template.mst', function(template) {
var rendered = Mustache.render(template, postData);
$('.inner-container').prepend(rendered);
});
I guess I missing something, Can someone give me an hint? Thanks!

How would I find a html files parent directory name?

I need to know a html files parent directory so I can access a file in it named the same as the directory. I just need the directory name as a string.
You can try something like
window.location.pathname
But again depends on what you are trying to achieve, show some code.
Background
As #NewUser says, use window.location.pathname if you want only the path. Example: on this page, that gives:
/questions/25717173/how-would-i-find-a-html-files-parent-directory-name
You indicated that you are dealing with an HTML file, though, which implies a file name and file ending (.htm, .html, etc.). So, to get the full URL, minus the file name, you can try using .replace(/[^\/]+$/, ''), like this:
var url = 'http://www.example.com/foo/bar/baz.htm';
alert(url.replace(/[^\/]+$/, ''));
// gives http://www.example.com/foo/bar/
Putting It All Together
To do it without hard-coding the URL:
var path = window.location.toString().replace(/[^\/]+$/, '');
alert(path);

How to user Viewer js in Laravel

Hello I'm trying to display PDF documents with ViewerJS plugin but it doesn't work properly. As documentation says I have <iframe id="viewer" src = "{{URL::to('/')}}/ViewerJS/#../uploads/files/{{$video->source}}" width='100%' height='600' allowfullscreen webkitallowfullscreen></iframe>
I have ViewerJS folder in public folder and my pdf files in public/uploads/files folder. When I use this url it shows my page in frame instead of document. Where is a mistake?
Although this is old question, I would like to share how I got that working:
Step 1: Download ViewerJs - http://viewerjs.org/releases/ViewerJS-latest.zip
Step 2: Extract this in public directory of Laravel (I used it with Laravel 4.0)
Step 3: Now, extract another copy in Views folder. That means, you will have ViewerJs library at two locations. One inside public (public/ViewerJs) folder and another will be at (views/ViewerJs)
Step 4: Add below code in your app/routes.php
//DocumentViewer Library
Route::any('ViewerJS/{all?}', function(){
return View::make('ViewerJS.index');
});
Step 5: Now, add any sample PDF file in your public folder (for testing purpose)
Step 6: Open below URL in your browser
http://example.com/ViewerJS/index.html#../demodoc.pdf
Please replace example.com (in my case this was localhost/webapp) by your project path and replace demodoc.pdf by name of sample PDF file that you added in public folder.
That's it. This will work fine.
You should do as follows:
copy the content of ViewerJS folder e.g in your public/viewerjs
edit PluginLoader.js, ODFViewerPlugin.js, PDFViewerPlugin.js and search for the string ./ and change it to the relative path of the directory, in my example viewer/
Ex.: in PluginLoader.js, you will find:
loadPlugin('./ODFViewerPlugin', function () {
Plugin = ODFViewerPlugin;
});
replace this to:
loadPlugin('viewerjs/ODFViewerPlugin', function () {
Plugin = ODFViewerPlugin;
});
create a GET route like: Route::get('/ViewerJS/{all?}', array('as' => 'pdfViewer', 'uses' => 'YOURCONTROLLER#pdfViewer'));
create the method in you controller like:
public function pdfViewer()
{
return View::make('pdfview.view');
}
Create your the view and paste the entire content of the index.html, it's inside the ViewerJS folder. Don't forget to replace all css and javascript file references with:
{{ asset('viewerjs/viewer.css') }}
{{ asset('viewerjs/viewer.js') }}
{{ asset('viewerjs/PluginLoader.js') }}
Call the route like: http://www.xxxxx.com/ViewerJS#YOUR_PATH_TO_THE_PDF_FILE_UNDER_THE_PUBLIC_FOLDER
example: uploads/pdfs/test.pdf
Note that you don't have to specify public/uploads/pdfs/test.pdf !!
You have to add the PDF's name to the path, as well. For example:
http://www.xxxxx.com/ViewerJS#YOUR_PATH_TO_THE_PDF_FILE_UNDER_THE_PUBLIC_FOLDER/NAME_FILEP

Accessing content folder from js file

I'm trying to access image which is located in ~\Content\img folder. I'm trying to do that from JavaScript file which is located in ~\Scripts folder. This an MVC application.
U have tried absUrl + "\Content\img" + fileName. But it gives me Controller\Content\img\fileName.jpg
Forward slashes...
\Content\img\fileName.jpg
Should be
/Content/img/fileName.jpg
Please use the #Url.Content helper:
#Url.Content("~/img/fileName.png")
In case you use a separate javascript file you can put a <script> block in the beginning of the view page:
<script>
var ROOT = '#Url.Content("~/")';
</script>
And then refer to the ROOT variable in javascript:
var imagePath = ROOT + '/img/fileName.png';

Categories