I have a very basic file I created in Edge Animate in which I just fadein and fadeout some text. It's located here:
http://www.threecell.com/demo/simpletext/simpletext.html
Edge Animate exports an HTML file and some JS Files. My question is whether it's possible to make it so that you can update the text in the future using the WordPress framework. I found that the actual text is declared in one of the JS files which I've posted below (the text in question is "THIS IS A TEST".) Ultimately, I'd like to create a WordPress widget that goes into this JS file and changes the text value.
Thanks in advance for any assistance or guidance,
/**
* Adobe Edge: symbol definitions
*/
(function($, Edge, compId){
//images folder
var im='images/';
var fonts = {};
var resources = [
];
var symbols = {
"stage": {
version: "2.0.1",
minimumCompatibleVersion: "2.0.0",
build: "2.0.1.268",
baseState: "Base State",
initialState: "Base State",
gpuAccelerate: false,
resizeInstances: false,
content: {
dom: [
{
id:'Text',
type:'text',
rect:['131','190','auto','auto','auto','auto'],
text:"THIS IS A TEST",
font:['Arial, Helvetica, sans-serif',24,"rgba(0,0,0,1)","normal","none",""]
}],
symbolInstances: [
]
},
states: {
"Base State": {
"${_Stage}": [
["color", "background-color", 'rgba(255,255,255,1)'],
["style", "overflow", 'hidden'],
["style", "height", '400px'],
["style", "width", '550px']
],
"${_Text}": [
["style", "top", '200px'],
["style", "opacity", '0'],
["style", "left", '197px']
]
}
},
timelines: {
"Default Timeline": {
fromState: "Base State",
toState: "",
duration: 1500,
autoPlay: true,
timeline: [
{ id: "eid7", tween: [ "style", "${_Text}", "opacity", '1', { fromValue: '0'}], position: 0, duration: 1500 },
{ id: "eid4", tween: [ "style", "${_Text}", "left", '297px', { fromValue: '197px'}], position: 0, duration: 1500 },
{ id: "eid5", tween: [ "style", "${_Text}", "top", '193px', { fromValue: '200px'}], position: 0, duration: 1500 } ]
}
}
}
};
Edge.registerCompositionDefn(compId, symbols, fonts, resources);
/**
* Adobe Edge DOM Ready Event Handler
*/
$(window).ready(function() {
Edge.launchComposition(compId);
});
})(jQuery, AdobeEdge, "EDGE-2538351");
You will have to create a plugin and use the Widgets_API.
In the frontend, the widget will use wp_enqueue_script to load simpletext_edgePreload.js. And then pass your text values as JavaScript data with wp_localize_script.
You'll finally be able to use something like this in your JS file: text:my_data.text.
A shortcode example: Wordpress Javascript File SRC File Path.
A widget example: Conditionally enqueue a widget's script/stylesheet in HEAD
Related
While setting up Percy snapshot test, I noticed, there is a flag enableJavaScript provided which my understanding is to control if a web app in browser is to be loaded with JS disabled or enabled.
Here is how I invoke my percy test:
npx #percy/cli snapshot ./snapshots.json --base-url http://localhost:9000 -c ./.percy.json
persy.json
{
"version": 2,
"snapshot": {
"percy-css": ".hide-in-percy {\n visibility: hidden;\n}\n",
"widths": [360, 600, 900, 1200, 1600]
},
"discovery": {
"userAgent": "percy-cli",
"networkIdleTimeout": 750
}
}
snapshot.json
[
{
"name": "Page 1: JS enabled",
"url": "/page-1",
"waitForTimeout": 1000,
"enableJavaScript": true
},
{
"name": "Page 1: JS disabled",
"url": "/page-1",
"waitForTimeout": 1000,
"enableJavaScript": false
}
]
But it seems with enableJavaScript set to false, images do not show up in the snapshot although if I load the app myself with JS disabled in the browser, images show up just fine. What am I missing here. How do I test my pages with JS enabled/disabled
I have a small code with FullCalendar library displaying 2 calendars. One on the first tab, one on the 2nd tab. Both calendars show up, however, the one that is invisible when the page loads is not showing up properly.
Full code: https://codepen.io/MadBoyEvo/pen/rNxQQYP
So I thought I would do a refresh or quickly change the view from current to new one and back to current on a tab switch but whatever I do it doesn't work.
<script type="text/javascript">var tabs = tabbis.init({
tabGroup: "[data-tabs]",
paneGroup: "[data-panes]",
tabActive: "active",
paneActive: "active",
callback: function (tab, pane) {
// console.log("TAB id:" + tab.id);
// console.log(pane.id);
// console.log(tableid);
// this makes sure to refresh tables on tab change to make sure they have buttons and everything
// it's a bit heavy as it touches all tables, may require some improvements in future to consider
// which tab has which table
try {
var tableid = document.getElementById(tab.id + "-Content").querySelector('table[id^="DT-"]').id;
$("#" + tableid).DataTable().columns.adjust().responsive.recalc();
} catch (e) {
console.log('No datatables available.');
}
// this code here doesn't work
var view = $('#Calendar-on26xq0w').fullCalendar('getView');
alert("The view's title is " + view.title);
}
});
// in theory should take care of removing local storage for tabbis
// some errors occurs if the local storage is not cleaned after a while
window.addEventListener("unload", tabbis.remove, false);
</script><!-- JS Elastic Tabbis END -->
The error shows up: Uncaught TypeError: $(...).fullCalendar is not a function
I tried moving calendar.js script from top to bottom, to before or after the script code that fails but nothing is helping.
I am a bit of JS noob so it's a bit unclear to me why it doesn't work. I used similar approach for DataTables (the Try/catch) and it works fine (if there is DataTable loaded)
Edit:
I've tried searching for calendar id - and I can find it, yet the same error is visible on that 3rd line.
var calendarid = document.getElementById(tab.id + "-Content").querySelector('div[id^="Calendar-"]').id;
alert("The calendarid " + calendarid);
var view = $('#' + calendarid).fullCalendar('getView');
alert("The view's title is " + view.title);
Thanks to #ADyson from comments I was able to understand my issues:
FullCalendar V5 doesn't have the method I was trying to use
If you're using fullcalendar v5 as per your tag, then
$('#Calendar-on26xq0w').fullCalendar will never work - that's the
syntax from fullCalendar v3 (back when it was a jQuery plugin, hence
the jQuery-style selector to initialise the object). If you want to
call a method in v4 or v5 then you need a reference to the object you
created when initialising the calendar, and then to get the current
view you can simply write calendar.view (it's a property not a
function) - see fullcalendar.io/docs/Calendar-view . (There's no such
function as getView in v5 either.)
I can't use query DOM Object and pass it somehow to FullCalendar as I was trying to do
What I actually have to do is create object https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects and store relevant JS objects.
At the very top defined empty object
<!-- JS FullCalendar Basic START -->
<script type="text/javascript">var calendarTracker = {
};
</script><!-- JS FullCalendar Basic END -->
<!-- CSS FullCalendar Basic START -->
Next for each calendar that I created
<script>document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('Calendar-c43nxqpi');
var calendar = new FullCalendar.Calendar(calendarEl,
{
"headerToolbar": {
"left": "prev,next,today",
"right": "dayGridMonth,timeGridWeek,timeGridDay,listMonth",
"center": "title"
},
"initialView": "listWeek",
"initialDate": "2020-07-20",
"nowIndicator": true,
"navLinks": true,
"businessHours": false,
"editable": false,
"events": [
{
"title": "Active Directory Meeting",
"description": "We will talk about stuff",
"start": "2020-07-20T11:43:35"
},
{
"title": "Lunch",
"description": "Very long lunch",
"start": "2020-07-22T08:43:35",
"end": "2020-07-23T11:43:35"
}
],
"dayMaxEventRows": true,
"weekNumbers": true,
"weekNumberCalculation": "ISO",
"selectable": true,
"selectMirror": true,
"buttonIcons": false,
"views": {
"listWeek": {
"buttonText": "list week"
},
"listMonth": {
"buttonText": "list month"
},
"listDay": {
"buttonText": "list day"
}
},
eventRender: function (info) {
var tooltip = new Tooltip(info.el, {
title: info.event.extendedProps.description,
placement: 'top',
trigger: 'hover',
container: 'body'
});
}
}
);
calendar.render();
calendarTracker['Calendar-c43nxqpi'] = calendar;
});
</script>
I've stored this calendar object with key based on it's html id.
calendarTracker['Calendar-c43nxqpi'] = calendar;
Finally on tab switch
<script type="text/javascript">var tabs = tabbis.init({
tabGroup: "[data-tabs]",
paneGroup: "[data-panes]",
tabActive: "active",
paneActive: "active",
callback: function (tab, pane) {
// We need to make same thing for calendar
function redrawCalendar(calendar) {
//console.log(calendarTracker[calendar.id].view);
calendarTracker[calendar.id].changeView(calendarTracker[calendar.id].view.type);
console.log('Redrawing view for' + calendar.id)
}
try {
var calendar = document.getElementById(tab.id + "-Content").querySelectorAll('div[id^="Calendar-"]');
calendar.forEach(redrawCalendar)
} catch (e) {
console.log('No calendars available.');
}
}
});
// in theory should take care of removing local storage for tabbis
// some errors occurs if the local storage is not cleaned after a while
window.addEventListener("unload", tabbis.remove, false);
</script>
I'm basically finding all calendars on the given tab using querySelectorAll and then for each calendar on the tab I'm running redrawCalendar function which based on the HTML DOM ID finds the correct calendar object, and resets its view making sure the visual part is up and running again.
You can create a calendar2 on the fly when the user tries to switch to the next tab. Listen for the change event on the tab and initialize the second calendar based on the calendarID.
var calendarid = document.getElementById(tab.id + "-Content").querySelector('div[id^="Calendar-"]').id;
// alert("The calendarid " + calendarid);
if(calendarid == 'Calendar-3fso0g65') {
loadCalendarFirst(calendarid);
} else {
loadCalendarSecond(calendarid);
}
I added the following two methods to call when needed
<script>
function loadCalendarFirst(claendarID) {
var calendarEl = document.getElementById(claendarID);
var calendar = new FullCalendar.Calendar(calendarEl,
{
"headerToolbar": {
"left": "prev,next,today",
"right": "dayGridMonth,timeGridWeek,timeGridDay,listMonth",
"center": "title"
},
"initialView": "listWeek",
"initialDate": "2020-07-19",
"nowIndicator": true,
"navLinks": true,
"businessHours": false,
"editable": false,
"events": [
{
"title": "Active Directory Meeting",
"description": "We will talk about stuff",
"start": "2020-07-19T10:07:02"
},
{
"title": "Lunch",
"description": "Very long lunch",
"start": "2020-07-21T07:07:02",
"end": "2020-07-22T10:07:02"
}
],
"dayMaxEventRows": true,
"weekNumbers": true,
"weekNumberCalculation": "ISO",
"selectable": true,
"selectMirror": true,
"buttonIcons": false,
"views": {
"listWeek": {
"buttonText": "list week"
},
"listMonth": {
"buttonText": "list month"
},
"listDay": {
"buttonText": "list day"
}
},
eventRender: function (info) {
var tooltip = new Tooltip(info.el, {
title: info.event.extendedProps.description,
placement: 'top',
trigger: 'hover',
container: 'body'
});
}
}
);
calendar.render();
}
function loadCalendarSecond(calendarID) {
var calendarEl = document.getElementById(calendarID);
var calendar = new FullCalendar.Calendar(calendarEl,
{
"headerToolbar": {
"left": "prev,next,today",
"right": "dayGridMonth,timeGridWeek,timeGridDay,listMonth",
"center": "title"
},
"initialDate": "2020-07-19",
"nowIndicator": true,
"navLinks": true,
"businessHours": false,
"editable": false,
"events": [
{
"title": "Active Directory Meeting",
"description": "We will talk about stuff",
"start": "2020-07-19T10:07:02"
},
{
"title": "Lunch",
"description": "Very long lunch",
"start": "2020-07-21T07:07:02",
"end": "2020-07-22T10:07:02"
}
],
"dayMaxEventRows": true,
"weekNumbers": true,
"weekNumberCalculation": "ISO",
"selectable": true,
"selectMirror": true,
"buttonIcons": false,
"views": {
"listWeek": {
"buttonText": "list week"
},
"listMonth": {
"buttonText": "list month"
},
"listDay": {
"buttonText": "list day"
}
},
eventRender: function (info) {
var tooltip = new Tooltip(info.el, {
title: info.event.extendedProps.description,
placement: 'top',
trigger: 'hover',
container: 'body'
});
}
}
);
calendar.render();
}
loadCalendarFirst('Calendar-3fso0g65');
</script>
Here's the Updated Plunker
The error indicates that the element you try to run the fullCalendar() function on is not available. This means that the HTML element with the ID Calendar-on26xq0w can't be found on the document.
Recently I changed Floats to FlexBox to have easier work with panels (as advised on other questions I did). While most of the things are working as I expect it, I'm having a problem with Apex Charts after the change.
Full code is here:
https://github.com/EvotecIT/PSWriteHTML/blob/master/Examples/Example12-Charts/Example12.html
Here's how it looks when loaded. You will notice that in 1st and 2nd-row charts go out of bounds even thou the panel they are in is in place and it works for the top row.
And if I do resize (like 1mm) it will start working correctly.
Any idea what could be the problem?
In apex charts CSS it has comments to not use overflow (I tried and it doesn't do anything) but to be honest, I even once forgot to attach that CSS and nothing changed (like everything is done by the JS.
.apexcharts-canvas {
position: relative;
user-select: none;
/* cannot give overflow: hidden as it will crop tooltips which overflow outside chart area */
}
/* scrollbar is not visible by default for the legend, hence forcing the visibility */
Keep in mind that I'm a total noob when it comes to JS/CSS/HTML so excuse my language.
You need to move all your scripts to the end instead of injecting in the HTML to allow the SVG Document parser to get the element's size correctly.
Working Codepen Example
var options = {
"chart": {
"height": 350,
"type": "line",
"toolbar": {
"show": true,
"tools": {
"download": true,
"selection": true,
"zoom": true,
"zoomin": true,
"zoomout": true,
"pan": true,
"reset": true
},
"autoSelected": "zoom"
}
},
"plotOptions": {
"bar": {
"horizontal": true
}
},
"dataLabels": {
"enabled": true,
"offsetX": -6,
"style": {
"fontSize": "12px",
"colors": [
null
]
}
},
"series": [{
"name": "People count",
"data": [
400,
430,
448
]
},
{
"name": "People death",
"data": [
450,
0,
200
]
}
],
"xaxis": {
"type": "category",
"categories": [
"2015",
"2016",
"2017"
]
},
"stroke": {
"show": true,
"curve": "straight",
"width": 2,
"colors": [
"#0000ff",
"#008000"
]
},
"legend": {
"position": "right",
"offsetY": 100,
"height": 230
},
"title": {
}
}
var chart = new ApexCharts(document.querySelector('#ChartID-2rhiatbe'),
options
);
chart.render();
Today I discovered Quill while looking for a rich text editor, and have tried following the documentation to get it working. So far, most of it works just fine.
My only problem is, that when I click on the Link icon, the tooltip doesn't appear due to the following class being mysteriously added to the ql-tooltip <div> element: ql-out-bottom.
This class adds the following CSS rule at quill.snow.css:391:
.ql-snow .ql-out-bottom, .ql-snow .ql-out-top {
visibility: hidden;
}
This class does not get added in Quill's documentation demo which really perplexes me..
Here's my current setup which is entirely copypastarino'd from the documentation:
var snowQuill = new Quill('.quill', {
placeholder: 'Skriv noget hyggeligt her...',
modules: {
toolbar: [
[{ header: [] }],
['bold', 'italic', 'underline', 'link'],
[{ color: [] }, { background: [] }],
[{ list: 'ordered' }, { list: 'bullet' }],
['clean']
]
},
theme: 'snow'
});
I'm using Quill v1.0.0-beta.11 and grabbing the JS and CSS from cdn.quilljs.com. Hope this post follows all formalities, as I dont post on Stackoverflow often.
For those having problems in Angular:
QuillModule.forRoot({
modules: {
toolbar: [
[{ header: [false, 1, 2] }],
["bold", "italic", "underline"],
["blockquote"],
['link', 'image', 'video'],
['clean']
],
},
bounds: "document.body",
theme: "snow"
})
The link maybe hidden in Angular, and changing the bounds here does not work because of the way Angular is generated. However, this will fix it:
<quill-editor bounds="self">
https://github.com/KillerCodeMonkey/ng-quill/issues/145
The two classes .ql-out-bottom and .ql-out-top are added when the tooltip would appear beyond the vertical bounds of the editor.
I want to know if zoomcharts has the following features in their latest update (1.5.1):
I want one single link between two nodes to be able to be colored with two colors (left-half with red and right-half with black). Also, i want to be able to hover on these two different colored single-split-link differently??
If you just copy paste the following code here, you can see that it can't be done right now...
<script>
var data = {
"nodes":[
{"id":"n1", "loaded":true, "style":{"label":"Node1"}},
{"id":"n2", "loaded":true, "style":{"label":"Node2"}}
],
"links":[
{"id":"l1","from":"n1", "to":"n2", "style":{"fillColor":"red", "toDecoration":"arrow"}}
]
};
var t = new NetChart({
container: document.getElementById("demo"),
area: { height: 350 },
data: { preloaded: data },
info: {enabled: true, linkContentsFunction: function(data, link, callback) {
return link.id;
}}
});
</script>
It seems that right now it is not possible to split single link and to hover each of those parts separately.
But here is a "nasty" version how to make something like that using lineDash and fixed node positions.
<script>
var data = {
"nodes":[
{"id":"n1", "loaded":true, x:100, y:0, "style":{"label":"Node1"}},
{"id":"n2", "loaded":true, x:0, y:0, "style":{"label":"Node2"}}
],
"links":[
{"id":"l1","from":"n1", "to":"n2", "style":{"fillColor":"red", "toDecoration":"arrow", "length":3}},
{"id":"l11","from":"n1", "to":"n2", "style":{"fillColor":"black","lineDash":[100,300]}}
]
};
var t = new NetChart({
container: document.getElementById("demo"),
area: { height: 350 },
data: { preloaded: data },
info: {enabled: true, linkContentsFunction: function(data, link, callback) {
return link.id;
}},
"style": {
"multilinkSpacing": 0
}
});
</script>