I have my script.php file in project. It contains javascript, but I wanted it to ne created dynamicly, based on server-side data.
I setted it's Content-type to text/javascript with php, but PhpStorm does not see it as javascript file. So I loose javascript syntax hightlighting, error detection, live templates...
How can I force PhpStorm to see that .php file as javascript file?
You could make a naming Convention for this type of file.
Something like
foo.js.php
bar.js.php
baz.js.php
And then go to Options ALT + F7, navigate to File Types, and register *.js.php to javascript
What you are trying to do sounds like bad practise.
You maybe want to have something like this:
A real JS File which is compileable by Closure Compiler or something like that, which provides "bootstrap" functions, which take your values as parameter.
And if you write this in your template.php, everything is fine for PHP Storm:
<script>
doFoo(<?= $myFirstValue ?>, <?= $myFirstValue ?>);
</script>
Maybe you can work with data attributes in Your HTML which i think is cleaner then inline script tag.
Also take a look here: https://softwareengineering.stackexchange.com/a/126678/122683
Settings | Template Data Languages
Find your file there and assign JavaScript in right column to it (or whole folder --then it will be applied to all files in that folder and subfolders).
This will tell IDE to use JavaScript instead of default HTML as outer language for that file.
You can use the <<<JS heredoc syntax to make PhpStorm highlight a specific part of your file as Javascript. For example:
<?php
echo 'This is using PHP syntax highlighting';
echo <<<JS
<script>document.write('This is using JavaScript highlighting');</script>
JS;
You can also use file-specific language injection with ALT+ENTER, also see http://blog.jetbrains.com/phpstorm/2013/06/language-injection-in-phpstorm/ for further details on that.
You can also use the built-in Language Injection of IntelliJ (which is the platform on which phpStorm is built). For that, just mark the part of your file then press ALT + ENTER and use "Inject Language/Reference".
Related
I am working on this webpage:http://hypoinvest.sk/ which runs on Wordpress with this theme If you check source code you can see a lot of inline-css and I want to know in which files are actually defined. Only thing what I know about it they are called by function wp_head() in header.php. I have local copy of all files on this web and I can't find any mention about some of that css rules through unix grep. Anyone suspect where these css rules could be located?
check site and let me know.
Run a search in the source code for
style-inline
As this appears to be the 'handle' designated as the first variable in the function wp_add_inline_style. The "-css" is added automatically. You'll see this on line 79 of the page source.
https://codex.wordpress.org/Function_Reference/wp_add_inline_style
You want to check your page back-end site where you put content ,
I think are you using any compose or editor to create page on edit page.
check it edit option it has some inline css.
i use display suite to style my taxonomy page and it suggests me some template files but i am not able to use that file, i put them in place but they do not include,
do you know how it will works please ? or any references ?!
this is my display suite screen
and i place file ds-reset--node-article-article-ds.tpl.php into address sites/all/modules/contrib/ds/layouts/ds_reset
but not thing gana happen
(would be a comment if I could :) You're supposed to put your template file in /sites/all/themes/your_theme/templates/, not in the DS folder.
I've successfully created an mvc/razor web application that returns css files that have been parsed by razor. Each time there's a background-image I have a razor snippet that writes the URL prefix to the image file name. The CSS now looks like this:
body { background-image: url(#LookupUrl.Image("background.gif")); }
Css files now work fine and I've moved onto trying to get javascript .js files to function the same way but these aren't playing ball.
The code is identical to the css code and it successfully finds the .js file, but razor seems to parse it differently. Here's an example js file:
function testFunction() { alert('test function hit!'); }
testFunction();
Razor seems to think it's code that it should compile, and gives the error:
Compiler Error Message: JS1135: Variable 'alert' has not been declared
> Source Error:
>
> Line 1: function testFunction() {
> Line 2: alert('test function
> hit!'); Line 3: } Line 4:
> testFunction();
After renaming the same file to .css it works fine.
Is there a way of getting razor to function with .js files in the same way as it does for .css?
Here's how I registered the file handlers for razor:
RazorCodeLanguage.Languages.Add("js", new CSharpRazorCodeLanguage());
RazorCodeLanguage.Languages.Add("css", new CSharpRazorCodeLanguage());
WebPageHttpHandler.RegisterExtension(".js");
WebPageHttpHandler.RegisterExtension(".css");
The build provider is registered in PreApplicationStart via the method Haacked outlines in his blog post.
Do I need to remove a handler that mvc adds for .js files?
UPDATE 2 days on
While I got working what I wanted to get working, I would not recommend this method to others. Using Razor to parse css/javascript is flawed without the use of <text><text/> - it's the simplicity of razor using the # ampersand that messes it up. Consider the CSS3 #font-face. Razor hits the # and thinks it should use it as a function. The same thing can happen with javascript, and happened with Jquery 1.5.1.
Instead, I'll probably go back to aspx webforms for dynamic css/javascript, where there's less chance of the <% %> code blocks appearing naturally.
I couldn't understand why CSS worked while JS didn't, especially after the copy+pasted JS code worked inside the CSS file.
I used the find/replace dialogue within visual studio on the System.Web.WebPages.Razor source to search for the string '.js' within the project. There was nothing helpful there so I then went to the System.Web.WebPages project. It found a match in System.Web.WebPages.Util, which is a static class with a few helper methods.
One of those methods is 'EnsureValidPageType' and within there is a try/catch block. Inside the 'catch' block is a comment:
// If the path uses an extension registered with codedom, such as Foo.js,
// then an unfriendly compilation error might get thrown by the underlying compiler.
// Check if this is the case and throw a simpler error.
It made me believe .js has got some special built-in handler with it.
I googled for a bit, couldn't find anything, then looked in the web.config that's within \Windows\Microsoft.NET\Framework64{version}\Config.
In there is a buildProvider mapping for the extension .js to
System.Web.Compilation.ForceCopyBuildProvider
After removing this buildprovider in the website's web.config, .js files get compiled and work as they should!
I'm still not too sure what the ForceCopyBuildProvider does or is for but I wonder if it's for visual studio. Various extensions have different Copy/Ignore build providers registered.
Once again apologies for answering my own question but I hope the comprehensive(waffley) answer might help others out.
You could try using the special <text> node to indicate to the Razor parser to treat the content literally:
<text>
function testFunction() { alert('test function hit!'); }
testFunction();
</text>
The default Razor parser uses the HtmlMarkupParser to handle the markup components of your template. There isn't currently any alternative parsers that support other markup languages (which you would need to treat the javascript code language as). If you did create a new markup parser, I would imagine it would be quite difficult to separate the code and markup (i.e. the C# and the Javascript).
What you could do, is use the <text></text> wrapping elements to enforce the parser switches to markup mode when that section of the template is reached, e.g.
<text>function testFunction() { alert('test function hit!'); }</text>
It's not pretty, but it should do the trick.
I am trying to remove the default lightbox.js file coming from the Lightbox2 module, by using template.php, and load in my own. I would like to do this via template.php if possible, and not place this code in a custom module. I am adding my javascript file, then unsetting the module javascript file. The problem is $vars['scripts'] isn't getting replaced with the output from $js, and still outputting the module javascript. krumo($js) shows the default lightbox.js removed. Below is what I have in template_preprocess_page. Thanks in advance.
drupal_add_js(path_to_theme() . "/resources/js/lightbox.js", 'theme');
$js = drupal_add_js(NULL, NULL, 'header'); //get header js files in an array
$lightbox_path = drupal_get_path('module', 'lightbox2');
unset($js['module'][$lightbox_path . '/js/lightbox.js']); //unset lightbox default js
$vars['scripts'] = drupal_get_js('header', $js);
Alright, let's take another look at it, then.
Having just looked at http://api.drupal.org/api/function/drupal_add_js/6 a second time, I note that the lightbox code is probably in
$js['header']['module'][$lightbox_path .'/js/lightbox.js']
and not in
$js['module'][$lightbox_path .'/js/lightbox.js'].
I suggest sneaking a dpm($js) in before your 'unset' call, and then hit refresh a couple of times until it shows up, and make sure you've got the exact correct combination of $scope and $type to find the lightbox code at.
(Note: dpm() is a function provided by the devel module, which I guess I'm assuming your'e already using. If you're not, then drupal_set_message('<pre>'. print_r($js, TRUE) .'</pre>); will do as well.
I have a legacy application that I needed to implement a configuration page for to change text colors, fonts, etc.
This applications output is also replicated with a PHP web application, where the fonts, colors, etc. are configured in a style sheet.
I've not worked with CSS previously.
Is there a programatic way to modify the CSS and save it without resorting to string parsing or regex?
The application is VB6, but I could write a .net tool that would do the css manipulation if that was the only way.
You don't need to edit the existing one. You could have a new one that overrides the other -- you include this one after the other in your HTML. That's what the "Cascading" means.
It looks like someone's already done a VB.NET CSS parser which is F/OSS, so you could probably adapt it to your needs if you're comfortable with the license.
http://vbcssparser.sourceforge.net/
One hack is to create a PHP script that all output is passed through, which then replaces certain parts of CSS with configurable alternatives. If you use .htaccess you can make all output go through the script.
the best way i can think of solving this problem is creating an application that will get some values ( through the URL query ) and generate the appropriate css output based on a css templates
Check this out, it uses ASP.NET and C#.
In my work with the IE control (shadocvw.dll), it has an interesting ability to let you easily manage the CSS of a page and show the effects of modified CSS on a page in realtime. I've never dealt with the details of such implementations myself, but I recommend that as a possible solution worth looking at. Seeing as pretty much everyone is on IE 6 or later nowadays, you can skip the explanations about handling those who only have IE 5,4,3 or 2 installed.
Maybe the problem's solution, which is most simple for the programmer and a user is to edit css via html form, maybe. I suppose, to create css-file, which would be "default" or "standart" for this application, and just to read it, for example, by perl script, edit in html and to write it down. Here is just the simple example.
In css-file we have string like:
border-color: #008a77;
we have to to read this string, split it up, and send to a file, which will write it down. Get something like this in Perl:
tr/ / /s;
($vari, $value) = split(/:/, _$);
# # While you read file, you can just at the time to put this into html form
echo($vari.":<input type = text name = ".$vari." value = ".$value.">");
And here it is, you've got just simple html-form-data, you just shoul overwrite your css-file with new data like this:
...
print $vari[i].": ".$value.";\n";
...
and voila - you've got programmatical way of changing css. Ofcourse, you have to make it more universal, and more close to your particular problem.
Depending on how technically oriented your CSS editors are going to be, you could do it very simply by loading the whole thing up into a TextEdit field to let them edit it - then write it back to the file.
Parsing and creating an interface for all the possibilities of CSS would be an astronomical pain. :-)