javascript Spinner小部件

Posted 2021-05-03

![](https://i.imgur.com/va4pD7V.png)

.spinnerElement {
	display: block;
	height: 100%;
	width: 100%;
}

.spinnerWidget {
	margin: auto;
	width: 198px;
	height: 54px;
	border-radius: 5px;
	background-color: #DDDDDD;
	padding: 3px;
	opacity: 0.5;
}

.spinnerButton {
	border-style: none;
	margin: 0;
	padding: 0;
	width: 48px;
	height: 48px;
}

.spinnerButton[disabled] {
	opacity: 0.5;
}

function twxSpinner() {
  return {
    elementTag: 'twx-spinner',

    label: 'Spinner',

    properties: [
      {
            name: 'class',
           label: 'Class',
        datatype: 'string',
         default: ''
      },
      {
            name: 'spinning',
           label: 'Spinning',
        datatype: 'boolean',
         default: false,
 isBindingTarget: true,
       showInput: true
      },
      {
            name: 'rate',
           label: 'Rate',
        datatype: 'number',
 isBindingSource: false,
 isBindingTarget: true,
       showInput: true
      },
      {
            name: 'revs',
           label: 'Max Revolutions',
        datatype: 'number',
 isBindingSource: false,
 isBindingTarget: true,
       showInput: true
      },
      {
            name: 'angle',
           label: 'Angle',
        datatype: 'number',
 isBindingSource: true,
 isBindingTarget: false,
       showInput: false
      },
      {
            name: 'revCount',
           label: 'Revolutions',
        datatype: 'number',
 isBindingSource: true,
 isBindingTarget: false,
       showInput: false
      },
      {
            name: 'direction',
           label: 'Direction',
        datatype: 'select',
         default: '1',
 isBindingTarget: true,
          editor: 'select',
         options: [
           {label: 'Clockwise', value: "1"},
           {label: 'Counter Clockwise', value: "2"},
         ],
      }
    ],


    events: [
      {
         name: 'started',
        label: 'Started'
      },
      {
         name: 'stopped',
        label: 'Stopped'
      },
    ],

    designTemplate: function () {
      return '<div class="spinnerWidget"></div>';
    },

    runtimeTemplate: function (props) {
      var tmpl = '<div ng-spinner class="ng-hide spinnerWidget ' + props.class + '" spinning-field={{me.spinning}} direction-field={{me.direction}} rate-field={{me.rate}} revs-field={{me.revs}} angle-field=me.angle></div>';
      return tmpl;
    }
  }
}

twxAppBuilder.widget('twxSpinner', twxSpinner);

if (typeof module !== 'undefined' && typeof exports !== 'undefined' && module.exports === exports) {
  module.exports = 'spinner-ng';
}

(function () {
  'use strict';

  var spinnerModule = angular.module('spinner-ng', []);
  spinnerModule.directive('ngSpinner', ['$interval', ngSpinner]);

  function ngSpinner($interval) {

    return {
      restrict: 'EA',
      scope: {
        spinningField : '@',
        rateField     : '@',
        revsField     : '@',
        angleField    : '@',
        directionField: '@'
      },
      template: '<div></div>',
      link: function (scope, element, attr) {

        var lastUpdated = 'unknown';
        scope.data = { angle: 0, revCount: 0, direction: 1, interval : undefined };
        var updateSpinner = function(){

          if (scope.directionField != undefined)
            scope.data.direction = (scope.directionField != '2') ? 1 : -1;
          
          if (scope.data.interval === undefined) {
            scope.data.interval = $interval(function () {
              var data = scope.data;
              if (data && scope.revsField != undefined && scope.revsField != '' && data.revCount >= scope.revsField) {
                // stop spinning - we've topped out on revs
                $interval.cancel(scope.data.interval);
                scope.data.interval = undefined; // allow restart

                // fire 'stopped' event at this point
                scope.$parent.fireEvent('stopped');
              } 
              else if (data && scope.rateField && scope.spinningField) {
                if (scope.spinningField != undefined && scope.spinningField === 'true') {
                  data.angle += data.direction * parseFloat(scope.rateField)/10;

                  // handle cycling
                  if (data.angle > 360.0) {
                    data.angle    -= 360.0;
                    data.revCount += 1;
                  }
                  if (data.angle < 0) {
                    data.angle    += 360.0;
                    data.revCount += 1;
                  }

                  // output the output variables
                  scope.$parent.view.wdg[scope.$parent.widgetId]['angle']    = data.angle;
                  scope.$parent.view.wdg[scope.$parent.widgetId]['revCount'] = data.revCount;
                }
              }
            }, 100);

            // we've started, so fire event
            scope.$parent.fireEvent('started');
          }

        };

        scope.$watch('spinningField', function () {
          updateSpinner();
        });

        scope.$watch('rateField', function () {
          updateSpinner();
        });

        scope.$watch('directionField', function () {
          updateSpinner();
        });
        
        scope.$watch('revsField', function () {
          updateSpinner();
        });
      }
    };
  }

}());