Archives de catégorie : Javascript

Npm et yarn – quelques fonctions utiles

Lister tout les paquets premier niveau

Npm

npm list -g --depth=0

Yarn

yarn global ls

ajout global

Npm

npm -g install pkg

Yarn

yarn global add pkg

Utiser fd-slider avec AngularJS par l’intermédiaire d’une directive

AngularJs est un très bon framework javascript et combiné avec des plugins préexistant, il devient imbattable.

Ci-dessous, le code pour une directive pour utiliser l’excellent plugin fd-slider avec angularJs et lié par binding une textbox et un slider.

  .directive('fdSlider', ["$parse", function ($parse) {
        return function (scope, elm, attrs) {
            var scaleStr = attrs.scale || "{}";
            var scale = $.parseJSON(scaleStr);
            if ("fdSlider" in window) {
                fdSlider.createSlider({
                    // Associate an input
                    inp: elm[0],
                    // Declare a step
                    step: attrs.step || 1,
                    // Declare a maxStep (for keyboard users)
                    maxStep: attrs.step || 1,
                    // Min value
                    min: attrs.min || 1,
                    // Max value
                    max: attrs.max || 100,
                    // Define a scale (multiple points supported, I'm just using one for the
                    // demo)
                    scale: scale,
                    callbacks : {
                        "change": [function(inp) {
                            scope.$apply(attrs.sliderModel + "=" + inp.value);
                        }]
                    },
                    // Use the "jump to click point" animation
                    animation: "jump"
                });
            }
        };
    }]);

et un exemple de code html utilisant cette directive :

<input type="number" step="1" min="10" maxStep="100" max="30000"
                        scale='{"25": "10","50": "100","75": "1000","85": "3000","90": "10000"}'
                                slider-model="myScopeModel" fd-slider="" ng-model="myScopeModel"></div>

Votre modèle angularJs:

...
$scope.myScopeModel = 1000;
...

++

Tips : Geany beautify Javascript with nodejs js-beautify

One quick solution to prettify Javascript is to use js-beautify from NodeJs module beautifier.
To install js-beautify:

 npm -g install js-beautify 

Then in Geany, go to Edit-> Format -> Send selection to -> Custom command

add a command like « js-beautify –  »

Then open a javascript to beautify.

Select all, right click -> Format -> Send selection to -> js-beautify