Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Daniel Rogers 68 posts 352 karma points
    Jan 06, 2020 @ 11:40
    Daniel Rogers
    0

    Custom angular plugin that access a colorpicker datatype

    I have a datatype "IBD Color Picker" using the umbraco.colorpicker that I want to access from a custom plugin.

    This is what I have so far I dont know if Im on the right track or not but some help would be appreciated.

    Im using umbraco v8.4

    html

    <div ng-controller="IBD.TagStyler.Controller">
        <div class="IBD_CMS">
    
    // The section below needs to display my IBD Color Picker switches //
    
            <div class="umb-color-swatches" ng-class="{ 'with-labels': useLabel }">
                <button type="button" class="umb-color-box umb-color-box--{{size}} {{colorClassNamePrefix}}-{{color.value}}" ng-repeat="color in colors" title="{{useLabel || useColorClass ? (color.label || color.value) : ('#' + color.value)}}" hex-bg-inline="{{useColorClass === false}}" hex-bg-color="{{color.value}}" ng-class="{ 'active': isSelectedColor(color) }" ng-click="setColor(color, $index, $event)">
                    <div class="umb-color-box-inner">
                         <div class="check_circle">
                             <i class="icon icon-check small" ng-show="isSelectedColor(color)"></i>
                         </div>
                         <div class="umb-color-box__label" ng-if="useLabel">
                         <div class="umb-color-box__name truncate">{{ color.label || color.value }}</div>
                         <div class="umb-color-box__description">#{{ color.value }}</div>
                     </div>
    
                 </button>
             </div>
         </div>
    </div>
    

    js

    angular.module("umbraco").controller("IBD.TagStyler.Controller",
        function($scope) {
    
        $scope.model.value = { bottomMargin: $scope.model.value.bottomMargin || 0 };
        $scope.model.value = { topMargin: $scope.model.value.topMargin || 0 };
    
        $scope.model.value = { textColorH1: $scope.model.value.textColorH1 || 0 };
    
     ????? What do I need in here ??????
    
    }); 
    

    manifest

    {
      propertyEditors:[
        {
          alias: "IBD.TagStyler",
          name: "Intelligence By Design Tag Styler",
          editor: {
            view: "~/App_Plugins/IBD.TagStyler/IBD.TagStyler.View.html",
            valueType: "JSON"
          }
        }
      ],
      javascript: [
        "~/App_Plugins/IBD.TagStyler/IBD.TagStyler.js",
        "~/Umbraco/Js/umbraco.controllers.js"
    
      ],
      css: [
        "~/App_Plugins/IBD.TagStyler/style.css"
      ]
    }
    
  • Daniel Rogers 68 posts 352 karma points
    Jan 12, 2020 @ 14:58
    Daniel Rogers
    100

    Solved: created an api and then called the api from the anguler component script.

Please Sign in or register to post replies

Write your reply to:

Draft