responsive-utility/responsive-utility-behaviors.html at master · LRNWebComponents/responsive-utility · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<link rel="import" href="responsive-utility.html">
<!--
`responsive-utility-nehaviors`
A simpler way to use responsive utility.

To use in a webcomponent:
1. <link rel="import" href="path/to/responsive-utility/responsive-utility-behaviors.html">
2. behaviors: [ResponsiveUtilityBehaviors]


-->
<script>
    // ensure ResponsiveUtilityBehaviors exists globally before acting on them
    window.ResponsiveUtilityBehaviors = window.ResponsiveUtilityBehaviors || {};
    // create a behavior for elements that have a 'display' connotation
    window.ResponsiveUtilityBehaviors = {
      properties: {
        /*
         * parent size for responsive styling
         */
        responsiveSize: {
          type: String,
          value: 'xs',
          reflectToAttribute: true
        },
        /*
         * acts like an element query instead of @media query
         */
        responsiveToParent: {
          type: Boolean,
          value: true
        },
        /*
         * Miniumum value for small breakpoint
         */
        sm: {
          type: Number,
          value: 600
        },
        /*
         * Miniumum value for medium breakpoint
         */
        md: {
          type: Number,
          value: 900
        },
        /*
         * Miniumum value for large breakpoint
         */
        md: {
          type: Number,
          value: 1200
        },
        /*
         * Miniumum value for extra-large breakpoint
         */
        md: {
          type: Number,
          value: 1500
        },
      },
      /*
        * init the utility & register element
        */
      attached: function(){
        let root = this;
        Polymer.ResponsiveUtility.requestAvailability();
        root.fire('responsive-element',{
          "element": root,
          "sm": root.sm,
          "md": root.md,
          "lg": root.lg,
          "xl": root.xl,
          "responsiveToParent": root.responsiveToParent,
          "attribute": root.attribute
        });
      },
      /*
        * deregister the element
        */
      detached: function(){
        let root = this;
        root.fire('responsive-element-deleted',root);
      },
    };
  </script>