rise-vision/bootstrap-form-components

Bootstrap Font Picker jQuery Plugin

Bootstrap Form Components

Introduction

• A simple jQuery-based Font picker
• An Angular directive that wraps the jQuery-based font picker
• A simple jQuery-based font size picker
• An Angular directive that wraps the jQuery-based font size picker

How do I use the components?

In your bower-enabled project, run

bower install --save git://github.com/Rise-Vision/bootstrap-form-components.git

Building

npm run build

Version Bumping

gulp bump

Testing

To run all tests, do

npm run test

To run E2E test built with CasperJS, do

gulp e2e:test

Submitting Issues

If you encounter problems or find defects we really want to hear about them. If you could take the time to add them as issues to this Repository it would be most appreciated. When reporting issues please use the following format where applicable:

Reproduction Steps

1. did this
2. then that
3. followed by this (screenshots / video captures always help)

Expected Results

What you expected to happen.

Actual Results

What actually happened. (screenshots / video captures always help)

Contributing

All contributions are greatly appreciated and welcome! If you would first like to sound out your contribution ideas please post your thoughts to our community, otherwise submit a pull request and we will do our best to incorporate it.

Languages

If you would like to translate the user interface for this product to another language please complete the following:

• Download the English translation file from this repository.
• Download and install POEdit. This is software that you can use to write translations into another language.
• Open the translation file in the POEdit program and set the language for which you are writing a translation.
• In the Source text window, you will see the English word or phrase to be translated. You can provide a translation for it in the Translation window.
• When the translation is complete, save it with a .po extension and email the file to [email protected]. Please be sure to indicate the Widget or app the translation file is for, as well as the language that it has been translated into, and we will integrate it after the translation has been verified.

Resources

If you have any questions or problems please don't hesitate to join our lively and responsive community at http://community.risevision.com.

If you are looking for user documentation on Rise Vision please see http://www.risevision.com/help/users/

If you would like more information on developing applications for Rise Vision please visit http://www.risevision.com/help/developers/.

Facilitator

Donna Peplinskie

bootstrap-form-components's Issues

The font picker popup is cut off

Select custom font or More Font and you will see the top of the dialog get cut off within the Widget. http://screencast.com/t/oNf3xEhaMRK4

Put font picker logic into its own folder

Rename repo to a more generic name

After selecting Times New Roman font and saving, it changes to show Custom Font as the selection

When I choose Times New Roman with the Font Picker, Save and then come back, it has changed to show Custom Font as the chosen font. I have tried to replicate it with a handful of other fonts in the list but have only seen this behaviour with Times New Roman.

See jing: http://screencast.com/t/oFfI7b5h

Need a more generic gulp build task for js

Currently each sub-component has its own gulp concat task. This is not ideal, as we have to manually add a new task each time we add a new sub-component.

A better approach would be auto detect all components based on what's inside src/js, iterate through all relevant folder names, and auto-build for each. Finally, create the all-encompassing all.js under dist/ in case people don't bother to to pick and choose what to include.

@stulees @donnapep FYI

When initializing font picker with custom font, custom font name is not retrievable

@donnapep

if (currentFont === CUSTOM_FONT_TEXT) {
   var fontFamily = _getCustomFontName();

   utils.loadCustomFont(fontFamily, customFontURL, options.contentDocument);
}

_getCustomFontName is only a private function which means when initializing font picker with a custom font, there is no public API in retrieving the custom font name. Specifically, I am creating sample text to show the user their font selected and I can't apply a value for font-family without the custom font name.

Using a Custom Font is not saved in the Widget Settings

How it works now:

1. Select "Use Custom Font" from the dropdown, and enter the path to your font. Notice that the Sample Text updates to show your font.
2. Close and save the Widget Settings, and open them back up again, Notice that the Sample text is no longer using your custom font, and the Use Custom Font textbox is blank.

For further clarification: https://dl.dropboxusercontent.com/u/8237394/Screencasts/2014-10-30_1024.swf

How it should work:
The Custom Font should be saved in the textbox, as well as show in the Sample Text.

Originally logged as Issue 173 in widget-settings-ui-components.

Gulp task for building CSS for each subcomponents

Currently we only have build task for generating all.css and all.min.css. Would be nice to also produce separate .css/.min.css for each subcomponent under the dist/ folder.

font-picker not working when you change selection

Hi,
I'm struggling to make this work for the past one week. I followed your guidelines as mentioned below:
http://rise-vision.github.io/style-guide/#/components/font-picker
Though, it missed mentioning dependency,risevision.widget.common.fontpicker, to be added to my angular module, somehow i found it in one of your other examples and added it. Now its loading the font dropdown but when i select it, i'm getting below script error:

TypeError: Cannot set property 'type' of undefined

It seems its not the issue with my application. Even your demo gives same error when you change dropdown:

Please help me out.

"googleFontSelected" event does not pass font name or font family

      $googleFonts.on("select", function(e, family) {
        addGoogleFont(family, true);
        $googleFonts.modal("hide");

        currentFont = $family.val();

        $selectBox.trigger("googleFontSelected", family);
      });

The event being triggered is passing family but this is a jquery object. For the purposes of what I need, I need the value from the function getFontStyle(). It could also be helpful to pass the font too via getFont()

Gulp build task for CSS/SASS

"customFontSelected" event returning empty "" for font family value

I'm listening for "customFontSelected" and the value of fontFamily being returned is an empty "". The URL value is returned with the correct value.

Gulp CI process got stuck on failure

See output here:

http://devtools1.risevision.com:8080/job/Component-Bootstrap-Form-Components-PR-Tests/94/console

Remove font-loader.j and replace with common.js

There is currently code in fontloader.js that is identical to what is already here - https://github.com/Rise-Vision/common/blob/master/scripts/rise/common.js. My question is, can we use the code from this repo instead of duplicating it in fontloader.js so that we don't have to maintain it in 2 places?

Add i18n support

Because we are going international, yo.

Gulp casperjs task doesn't work on Windows

Google Fonts popup list from Font Picker is blank

When I choose More Fonts from the Font Picker, the Google Fonts popup list is blank, although I can select fonts from the list by clicking in it - http://screencast.com/t/YBmllP9tPTCP

According to Alan Clayton, the same issue is occurring in the Financial Table Widget Alex built.