embedding large js files into one page - javascript

i want to use tinymce editor but my final html file must not contain any links to any sources or css files.
i mean there must not be any references to external resources, it should be embedded in one html
(all js files and css files)
performance is not important and the target browser is ie11 only.
i do not want any
<script src=".."> or
<link rel="stylesheet" type="css" href="..">
i want that
<script>
function tinymce..
</script>
same as style info also should be in this html without any reference to outside.
due to the limits of native browsers on java applictions (djbrowser), i can deploy one one file, i do not go
deeply into technical details of ie11 with dj.
is that possible? or any method? because when i copy paste tiny_mce.js directly into the html it fails. The reason may be dynamically created scripts which are made by document.write.
my test cases:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- DO NOT CHANGE TITE -->
<title>Editor</title>
<link rel="stylesheet" type="text/css" href="tiny_mce/themes/advanced/skins/default/ui.css">
<link rel="stylesheet" type="text/css" href="tiny_mce/themes/advanced/skins/default/content.css">
<style>
.mce-widget.mce-tooltip { display : none !important; }
</style>
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="tiny_mce/plugins/table/editor_plugin.js"></script>
<script type="text/javascript" src="tiny_mce/plugins/contextmenu/editor_plugin.js"></script>
<script type="text/javascript" src="tiny_mce/plugins/paste/editor_plugin.js"></script>
<script type="text/javascript" src="tiny_mce/themes/advanced/editor_template.js"></script>
<script type="text/javascript" src="tiny_mce/langs/en.js"></script>
<script type="text/javascript" src="tiny_mce/themes/advanced/langs/en.js"></script>
<script type="text/javascript">
function init() {
// Check that tinymce exists
if (typeof tinyMCE === 'undefined') {
alert("tinymce.js is missing");
return;
}
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "lists,style,linespace",
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,fontselect,fontsizeselect,listbox",
theme_advanced_buttons2 : "cut,copy,paste,|,outdent,indent,|,forecolor,backcolor",
theme_advanced_toolbar_align : "left",
theme_advanced_toolbar_location : "top",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : "true"
});
}
// Sets content
function JH_setData(html) {
try {
var oEditor = tinyMCE.activeEditor;
oEditor.setContent(html);
//Check whether decoding needed
//oEditor.setContent(decodeURIComponent(html));
} catch(e) {
//alert('exception occured' + e.description + ' ' + e.message);
return 'FAIL';
}
return 'OK';
}
// Gets the content
function JH_getData() {
var oEditor = tinyMCE.activeEditor;
var val = oEditor.getContent();
return val;
}
function setContent() {
JH_setData('test content');
}
function getContent() {
var content = JH_getData();
alert('content:' + content);
}
</script>
</head>
<body onLoad="init();">
<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 100%;height:100%"></textarea>
<input type=button class="button_fu_class" style="position:absolute;top:30px;left:600px;width:80px;height:23px" value="SetContent" onClick="javascript:setContent();">
<input type=button class="button_fu_class" style="position:absolute;top:30px;left:700px;width:80px;height:23px" value="GetContent" onClick="javascript:getContent();">
</body>
</html>
works, but if i copy pase the tiny_mce.sc into a script block whole page fails.
if i replace
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
with
<script type="text/javascript">
//content of tiny_mce.js
(function(d){var a=/^\s*|\s*$.....
</script>
it fails

Related

Running JavaScript libraries (Looper) in Blazor Server-side - some javascript code is not running

I am trying to implement Looper theme to my blazor server-side app, and I have the javascript libraries referenced at the end of the in _Host.cshtml.However some scripts in theme.min.js is not running. Why?
<script src="/Library/vendor/jquery/jquery.min.js"></script>
<script src="/Library/vendor/popper.js/umd/popper.min.js"></script>
<script src="/Library/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="/Library/vendor/pace-progress/pace.min.js"></script>
<script src="/Library/vendor/stacked-menu/js/stacked-menu.min.js"></script>
<script src="/Library/vendor/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script src="/Library/javascript/theme.min.js"></script>
<script src="_framework/blazor.server.js"></script>
My problem is that while
<div data-toggle="drowndown"></div> works, but hamburger menu toggle
<button class="hamburger hamburger-squeeze mr-2" type="button" data-toggle="aside-menu" aria-label="toggle aside menu"><span class="hamburger-box"><span class="hamburger-inner"></span></span></button>
does not work. What am I missing here? What am I doing wrong? My theme change script also isn't running. If I step through theme.js and I can see that this script runs when blazor is not active (commenting out blazor.js) but with blazor active, this script does not run.
(line 610) in /library/javascript/theme.js
}, {
key: "toggleAside",
value: function toggleAside() {
var _this4 = this;
var $trigger = $('[data-toggle="aside"]');
$trigger.on('click', function () {
var isShown = $('.app-aside').hasClass('show');
$trigger.toggleClass('active', !isShown);
if (isShown) _this4.hideAside();else _this4.showAside();
});
}
My educated guess is that theme.js is using something that blazor does not allow? Is anybody experienced enough with Looper theme (or with javascript in general) to know why it wouldn't work? Particularly the hamburger toggle and the theme switching code
(line 1992 in /library/javascript/theme.js)
var Looper = function () {
var Looper = new Theme(); // toggle skin thought button
$('[data-toggle="skin"]').on('click', function (e) {
e.preventDefault();
var skin = Looper.skin === 'dark' ? 'default' : 'dark';
Looper.setSkin(skin); // we need to refresh our page after change the skin
location.reload();
}).each(function () {
var isDarkSkin = Looper.skin === 'dark';
var $icon = $(this).find('.fa-moon');
if (isDarkSkin) {
$icon.addClass('far');
$icon.removeClass('fas');
}
}); // make it global
return Looper;
}();
This is the website https://worshipground.azurewebsites.net/ You can use the inspector tool to see that blazor has been correctly loaded and all the javascript files are loaded in /library/javascript and /library/vendor/...
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- End Required meta tags -->
<title> Starter Template | Looper - Bootstrap 4 Admin Theme </title>
<base href="~/" />
<meta name="theme-color" content="#3063A0">
<link rel="apple-touch-icon" sizes="144x144" href="Library/apple-touch-icon.png">
<link rel="shortcut icon" href="Library/favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600" rel="stylesheet">
<link rel="stylesheet" href="/Library/vendor/open-iconic/font/css/open-iconic-bootstrap.min.css">
<link rel="stylesheet" href="/Library/vendor/fontawesome/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="/Library/stylesheets/theme.min.css" data-skin="default">
<link rel="stylesheet" href="/Library/stylesheets/theme-dark.min.css" data-skin="dark">
<link rel="stylesheet" href="/Library/stylesheets/custom-app.css">
<link rel="stylesheet" href="/Library/stylesheets/custom.css" data-skin="default">
<link rel="stylesheet" href="/Library/stylesheets/custom-dark.css" data-skin="dark">
<script>
var skin = localStorage.getItem('skin') || 'default';
var isCompact = JSON.parse(localStorage.getItem('hasCompactMenu'));
var disabledSkinStylesheet = document.querySelector('link[data-skin]:not([data-skin="' + skin + '"])');
// Disable unused skin immediately
disabledSkinStylesheet.setAttribute('rel', '');
disabledSkinStylesheet.setAttribute('disabled', true);
// add flag class to html immediately
if (isCompact == true) document.querySelector('html').classList.add('preparing-compact-menu');
</script>
</head>
<body>
<component type="typeof(App)" render-mode="ServerPrerendered" />
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
Reload
<a class="dismiss">🗙</a>
</div>
<script src="/Library/vendor/jquery/jquery.min.js"></script>
<script src="/Library/vendor/popper.js/umd/popper.min.js"></script>
<script src="/Library/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="/Library/vendor/pace-progress/pace.min.js"></script>
<script src="/Library/vendor/stacked-menu/js/stacked-menu.min.js"></script>
<script src="/Library/vendor/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script src="/Library/javascript/theme.min.js"></script>
<script>
Object.defineProperty(WebSocket, 'OPEN', { value: 1, });
</script>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
You may find you have your work cut out in terms of making a JavaScript heavy template work nicely in Blazor.
You will probably need to utilise IJSRuntime
https://learn.microsoft.com/en-us/aspnet/core/blazor/call-javascript-from-dotnet?view=aspnetcore-5.0
I think I know where this problem comes from! If you comment out the following code on the "Host.cshtml" file, this problem will most likely go away!
<script>
Object.defineProperty(WebSocket, 'OPEN', { value: 1, });
</script>
But!!!! You will get some javascript errors related to "WebSocket" instead! something like this:
"WebSocket is not in the OPEN state"
Or
"Uncaught (in promise) Error: Cannot send data if the connection is not in the 'Connected' State."
The cause of these errors is a conflict between "pace.min.js" file and "blazor.server.js" file! You can check this link for more information and get more help

How to have javascript modify css link based on page name?

I want the below javascript to update the specific css link bootstrap.min.js if the page is named mypage.html.
How would I do that?
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/bootstrap377.min.css"/>
<link rel="stylesheet" type="text/css" href="/css/some_other_stylesheet.css"/>
<script type="text/javascript">
var filename = location.href.split("/").slice(-1);
if (filename == "mypage.html") {
HOW DO I DO THIS: update the above stylesheet link to be bootstrap400.min.css (or should this script be before the css link?)
}
</script>
</head>
<body>
this is a test
</body>
</html>
Use document.querySelector to get a reference to the link element, then change the href property the usual way.
var filename = location.href.split("/").slice(-1);
if (filename == "mypage.html") {
var link = document.querySelector("link[href='/css/bootstrap377.min.css']");
link.href = "/css/bootstrap400.min.css";
}

JQTE Text value getting Style too

I try to get the value in JQTE Text Editor . I want to get only values without any HTML element or design.
I tried this bus this is giving me styles also in the values when I do some styling on UI . But I want only value without style. Any help would be great for me .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Crea Application</title>
<link href="css/jquery-te-1.4.0.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="../js/thirdparty/jquery-1.11.2.js"></script><![endif]-->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js" charset="utf-8"></script>
<!--<![endif]-->
<script src="js/thirdparty/jquery-te-1.4.0.min.js"></script>
<!-- <script src="js/thirdparty/jquery.cookie.js"></script>
<script src="js/thirdparty/jquery.loadmask.min.js"></script>
<script src="js/thirdparty/jquery.maskinput.js"></script>
<script src="js/thirdparty/jquery.bpopup.js"></script>
<script src="js/thirdparty/jquery-date-time.js"></script>
<script src="js/thirdparty/jquery.datetimepicker.js"></script>
<script src="js/thirdparty/jquery-timepicker.js"></script>
<script src="js/thirdparty/jquery-center.js"></script>
<script src="js/thirdparty/jquery.jqdock.js"></script>
<script src='js/thirdparty/jquery.scrollto.js'></script>
<script src='js/thirdparty/moment.js'></script>
<script src='js/thirdparty/bowsy.js'></script> -->
</head>
<body>
<textarea cols="2" rows="3" name="textarea" class="jqte-test" id="mytextarea"></textarea>
<button class="status">Toggle jQTE</button>
<script type="text/javascript">
$(".status").click(function()
{
// alert($("textarea#mytextarea").html());
jqteStatus = jqteStatus ? false : true;
$('.jqte-test:first').jqte({"status" : jqteStatus});
console.log($("#mytextarea").html());
jqteStatus = jqteStatus ? false : true;
$('.jqte-test:first').jqte({"status" : jqteStatus});
});
</script>
</body>
</html>
Since the field is nested inside of the jqte block you can go up the DOM to get to a level that allows just getting the text:
For example if your field was "emailsubject":
$("#emailsubject").closest(".jqte").find(".jqte_editor").eq(0).text();
So going up the DOM we find the closest element with the style ".jqte", then we go down the DOM to find the next style of ".jqte_editor". Since this will be a jQuery object, we need to get the first occurance with .eq(0) and finally just get the text with .text()
You can simply remove the HTML formatting with:
var myContent = $('.jqte-test').val();
var final = $(myContent).text();

JavaScript library to type Hindi with international keyboards

I am developing a website using HTML5 and AngularJS. I want to develop a site in Hindi language. One requirement is that the site should allow to enter text in the Devanagari alphabet even in devices that do not have the appropriate keyboard.
Time ago I hot-linked a Microsoft bookmarklet that's no longer available (http://ilit.microsoft.com/Bookmarklet/Script/Hindi.js) which would convert from English to Hindi: you type "kya" and then get the corresponding Hindi characters.
Can you suggest tools to do the same, using this or other system?
Download code from http://www.gamabhana.com/?q=node/3
Extract downloaded folder. Now your folder have the following content
gamabhana_js have all js files that you need. Open the index.html in browser and enter something in textarea. Then you can see corresponding Hindi fonts instead of English. You can edit that index file and use according to your need.
Following is a sample code that I edited If I click on hindi then I will get Hindi fonts instead of English
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="JavaScript" type="text/javascript" src="./gamabhana_js/GA1000.js"></script>
<script language="JavaScript" type="text/javascript" src="./gamabhana_js/GA0010.js"></script>
<script language="JavaScript" type="text/javascript" src="./gamabhana_js/GA0640.js"></script>
<script language="JavaScript" type="text/javascript" src="./gamabhana_js/gamabhanaLib.js"></script>
<script language="JavaScript" type="text/javascript" src="./gamabhana_js/fileio.js"></script>
<script language="JavaScript" type="text/javascript" >
gw1=null;
var hindi=false;
function myCustomOnInit()
{ try{
if(hindi==true){
gw1= new gamabhanaPhoneticHandler("elm1_ifr",'__devanagari__','__roman__','#gamabhana#');
gw1.MrAutoCor=true;
GphRegisterForMasterUpdates(gw1);
}
}
catch(e){}
}
function LanguageList_onchange() {
gw1.SetPriLanguage(document.getElementById('LanguageList1').value);
}
function arrangekbhelp()
{
document.getElementById('kbhelpdiv').style.left=(window.document.body.clientWidth-400) + "px";
if((window.document.body.clientWidth-400)<0)
document.getElementById('kbhelpdiv').style.left=0 + "px";
}
function hindi1(){
hindi=true;
myCustomOnInit();
}
function togglekbhelp()
{
arrangekbhelp();
if(document.getElementById('kbhelpdiv').style.display=='block')
document.getElementById('kbhelpdiv').style.display='none';
else
document.getElementById('kbhelpdiv').style.display='block';
return;
}
window.onresize=arrangekbhelp;
</script>
<!-- TinyMCE -->
<script type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
// Theme options
theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect,langselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
// Example content CSS (should be your site CSS)
content_css : "css/content.css",
oninit : "myCustomOnInit",
// Drop lists for link/image/media/template dialogs
template_external_list_url : "lists/template_list.js",
external_link_list_url : "lists/link_list.js",
external_image_list_url : "lists/image_list.js",
media_external_list_url : "lists/media_list.js",
// Replace values for the template plugin
template_replace_values : {
username : "omkar",
staffid : "9383"
}
});
</script>
<!-- /TinyMCE -->
</head>
<body>
<form>
<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 80%"> </textarea>
</form>
<button onclick="hindi1()">Hindi</button>
</body>
</html>

Jquery Tool tip for HTML contents

1, I downloaded the all these three files(JS and CSS) in my local system and tried it is not working as it is directly referring from URLS.
2, Even If i use URL src and href it is not working with the IE.IE also not saying any error.
Please help me to know what am doing wrong.
PART 1 :
<link rel="stylesheet" type="text/css" href="jquery/css/jquery-ui-1.10.2.custom.css" />
<script src="jquery/js/jquery-1.9.0.js"/></script>
<script src="jquery/js/jquery-ui-1.10.0.custom.min.js"></script>
PART 2 :
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
HTML CODE :
![<script>
$(function () {
$(document).tooltip({
content: function () {
return $(this).prop('title');
}
});
});
</script>
<style>
.tooltip
{
background-color:#F8D2DA;
}
.tooltipqty
{
text-align:right;
}
</style>
</head>
<body>
<p><label for="age">Your age:</label><input id="age"
title="<table class='tooltip'><tr><td class='tooltipqty'>20.00</td><td>31-01-2013</td></tr>
<tr><td class='tooltipqty'>0.02</td><td>01-01-2013</td></tr></table>" />
</p>
</body>][1]
Replace $(this).prop('title') with $(this).attr('title').
jsfiddle
Didn't see it was IE related. Didn't know either that jsfiddle had problems in IE 8 ...

Categories

Resources