How to get all the icons from the fontawesome js library? - javascript

I have included the font-awesome v5.12.1 library via CDN. Now, I want to get the list of icons or icon text to display as a select option. Is there any way to get the list of icons from the font-awesome js library as array so that I can display as dropdown.

I use their archive which has a file metadata/icons.json which provides that (and other useful) info and I've then used Datatables to build something similar to their list.
I'm not sure if this file can also be taken from CDN, but you may want to try https://github.com/FortAwesome/Font-Awesome/blob/master/metadata/icons.json for the latest. (Caveat: could be different from CDN)
You may also want to check out this question and its answers which may help.

Related

Is it available to change the webviewer button icon of 'annotationStyleEditButton' & ' annotationDeleteButton'

I want to change the icon of 'annotationStyleEditButton' and 'annotationDeleteButton' to a self designed PNG, I would like to know is those buttons are available to change the icon?
I just found a method to change the Tools icon by using updateTool(), but seems we cannot change the 'style' and 'delete' button?
There are ways to change the icons but unfortunately, there are no APIs to do it. This is mainly due to the UI being completely open-source and open to everyone to customize and also contribute to. You are free to clone, download, or fork our repo here: WebViewer UI Repo. You will need some knowledge of React (and maybe some redux) but it should be relatively easy to pick up.
To change the icon, you will have to change the img property of the ActionButton to use your images in the AnnotationPopup component. Alternatively, you could also just use HTML buttons and images if you would like. You can find a guide on advanced customizations here: Advanced Customization. Once you do have the UI built, it will generate a build folder in the root directory. Simply copying this folder and replacing the one under lib/ui should update it to the one you just built.
As a last resort, you could always use some vanilla JavaScript to swap out the icons for your own. A query with the DOM can get you those elements to change:
document.querySelector('iframe[title="webviewer"]').contentDocument.querySelector('div[data-element="annotationStyleEditButton"]');
I would recommend sticking to the WebViewer UI method to avoid any unwanted results. It would also be better to own your UI as opposed to using this intrusive method.
Let me know if this helps!

Is there a way to list the settings for an existing JQuery UI .js file?

I am working on a project that has been going for many years. We currently use jquery 1.7.2 and a custom jqueryUI 1.8.21. I am creating a new feature that requires we upgrade jquery, so I am in the process of upgrading to jquery 1.9.1.
The problem is that 1.9.1 isn't compatible with UI 1.8.21, so I need to upgrade UI too. Alright, not a big deal... except that we have a bunch of custom settings in that UI 1.8.21 file, and I need to carry them forward to the new version.
I could recreate the custom theme from scratch using the new UI 1.12.1 version, but it would be very hard and there is always the chance that I will miss some important setting. I am looking for a way to list out the modified settings in the existing file to easily apply them to a customization of the newer version, or to somehow upgrade or recreate the same setting with the newer version.
Is there a tool or automatic way to do this, or am I out of luck and need to just recreate it by hand?
When you download a theme created with ThemeRoller, one of the files is jquery-ui.theme.css. The comment at the beginning has a line like this:
* To view and modify this theme, visit http://jqueryui.com/themeroller/?scope=&folderName=custom-theme&bgImgOpacityError=&bgImgOpacityHighlight=&bgImgOpacityActive=&bgImgOpacityHover=&bgImgOpacityDefault=&bgImgOpacityContent=50&bgImgOpacityHeader=&cornerRadiusShadow=8px&offsetLeftShadow=0px&offsetTopShadow=0px&thicknessShadow=5px&opacityShadow=30&bgImgOpacityShadow=0&bgTextureShadow=flat&bgColorShadow=%23666666&opacityOverlay=30&bgImgOpacityOverlay=0&bgTextureOverlay=flat&bgColorOverlay=%23aaaaaa&iconColorError=%23cc0000&fcError=%235f3f3f&borderColorError=%23f1a899&bgTextureError=flat&bgColorError=%23fddfdf&iconColorHighlight=%23777620&fcHighlight=%23777620&borderColorHighlight=%23dad55e&bgTextureHighlight=flat&bgColorHighlight=%23fffa90&iconColorActive=%23ffffff&fcActive=%23ffffff&borderColorActive=%23003eff&bgTextureActive=flat&bgColorActive=%23007fff&iconColorHover=%23555555&fcHover=%232b2b2b&borderColorHover=%23cccccc&bgTextureHover=flat&bgColorHover=%23ededed&iconColorDefault=%23777777&fcDefault=%23454545&borderColorDefault=%23c5c5c5&bgTextureDefault=flat&bgColorDefault=%23f6f6f6&iconColorContent=%23444444&fcContent=%23333333&borderColorContent=%23dddddd&bgTextureContent=flat&bgColorContent=%23ffffff&iconColorHeader=%23444444&fcHeader=%23333333&borderColorHeader=%23dddddd&bgTextureHeader=flat&bgColorHeader=%23e9e9e9&cornerRadius=10px&fwDefault=normal&fsDefault=1em&ffDefault=Arial%2CHelvetica%2Csans-serif
Follow that link, click the Download Theme button, and you'll be able to download a new version with the same theme.
However, this only specifies the theme. The download page that the button goes to requires you to select the components to include. I don't see any automated way to do that, but there's a comment at the beginning of jquery-ui.js with a line like:
* Includes: widget.js, position.js, data.js, disable-selection.js, focusable.js, form-reset-mixin.js, jquery-1-7.js, keycode.js, labels.js, scroll-parent.js, tabbable.js, unique-id.js, widgets/accordion.js, widgets/autocomplete.js, widgets/button.js, widgets/checkboxradio.js, widgets/controlgroup.js, widgets/datepicker.js, widgets/menu.js, widgets/mouse.js, widgets/progressbar.js, widgets/selectmenu.js, widgets/slider.js, widgets/spinner.js, widgets/tabs.js, widgets/tooltip.js
You may be able to figure out which components to select from this.

Content losing and Full version CKEditor 5

Please share your experience about using CKEditor 5.
Is HTML5 tags also removing like in CKEditor 4? In case yes, what can we do with it?
Show how we can enable all CKEditor 5 buttons and options on toolbar like in CKEditor 4. The following link contain Full Package with all options.
https://ckeditor.com/ckeditor-4/download/
Thanks for you time!
Is HTML5 tags also removing like in CKEditor 4? In case yes, what can we do with it?
CKEditor 5, unlike CKEditor 4, implements a custom data model. This means that every piece of content that you load into the editor needs to be converted to the model and then rendered back to the view.
Since conversion is done by plugins and is explicit (i.e. a feature tells exactly what HTML elements and/or attributes it converts to what model nodes) a piece of HTML which isn't covered by any of the loaded converters is simply dropped.
This means that if you want all of HTML5 to be supported, you need to write plugins to support them. Once you do that, CKEditor 5 won't filter anything out.
You can read more in the CKEditor 5 Framework documentation.
Show how we can enable all CKEditor 5 buttons and options on toolbar like in CKEditor 4. The following link contain Full Package with all options.
Short note about CKEditor 4 – "full" is not "all". The "full" preset has a misleading name unfortunately. There are far more CKEditor 4 plugins than in "full" and you can browse them in the Addons repo.
As for CKEditor 5, existing builds come with a predefined set of features which reflect the use cases described by Editor Recommendations.
There are not many more plugins available right now because the project is in the early alpha version. However, you can check the official list of features and browse npm to find more.
If you want to add or remove plugins from your editor, please read the Creating custom builds guide.

Get only (or compile only) Bootstrap Grid

I'm trying to incorporate Twitter Boostrap into a project, but only the fluid grid system.
Ideally, I'd be able to pull this from bower and install it that way. Otherwise, I'd like to be able to compile it directly inside of bootstrap's less. I'm basically trying to avoid downloading the file and removing the parts I don't need.
Has anyone had experience with this? Right now, I'm running the following command inside bootstrap:
grunt dist-css
Which is giving me all of the compiled. Is it possible to isolate the grid?
You can go with this link and choose only those components which you need or you can open bootstrap's css file and delete everything besides class container,container-fluid,row,row-fluid and classes that start with name col.
Hope this is useful for you.
http://getbootstrap.com/customize/

Where can I find a javascript calendar that allows me to disable certain dates?

I'd like to put a calendar on a webpage showing which days a house is availiable to rent. I know that the jquery datepicker has this functionality. However, I can't get it to display correctly
I've tried the jquery date picker, but it seems that I'm missing a stylesheet, as all the headings collapse together. Anyone know where I can find a suitable style sheet?
Alternatively, is there another javascript calendar that gives me this functionality?
I'd quite like to keep the amount hosted on my site at a minimum, as I only need the datepicker, not a bunch of other UI stuff.
You can select only those components, building a custom download, from the jQuery UI that you want (in addition to core) if you want, or you can use Google's AJAX libs to reference the jQuery code, both core and UI code. People using your site may already have it downloaded from there eliminating the need to (re)download it all.
Use the ThemeRoller to generate the appropriate CSS file for the jQuery UI widgets.
As for the functionality that you require, look at using beforeShowDate to provide callback functionality that allows you decide wither a particular date is selectable.
If you don't want to use Themeroller to generate a CSS theme for you, I suppose you could grab the vanilla datepicker CSS straight from the jQuery UI source repository:
http://dev.jqueryui.com/browser/trunk/themes/base/ui.datepicker.css

Categories