V4 updates (#210)

* update pxt.json files

* Fix button event enums

fixes https://github.com/microsoft/pxt-calliope/issues/206

* Fix Safari CSS Rule for iOS app

fixes https://github.com/microsoft/pxt-calliope/issues/205

* aprove preffered repos

should fix https://github.com/microsoft/pxt-calliope/issues/167

docs/projects/coin-flipper.md

@@ -11,7 +11,7 @@ Let's create a coin flipping program to simulate a real coin toss. We'll use ico
 Get an ``||input:on button A pressed||`` block from the ``||input:Input||`` drawer in the toolbox. We'll put our coin flipping code in here.
 
 ```blocks
-input.onButtonEvent(Button.A, ButtonEvent.Click, () => {
+input.onButtonEvent(Button.A, input.buttonEventValue(ButtonEvent.Click), () => {
 })
 ```
 
@@ -22,7 +22,7 @@ Grab an ``||logic:if else||`` block and set it inside ``||input:on button A pres
 The ``||Math:pick random true or false||`` returns a random ``true`` or ``false`` value which we use to determine a ``heads`` or ``tails`` result for a coin toss.
 
 ```blocks
-input.onButtonEvent(Button.A, ButtonEvent.Click, () => {
+input.onButtonEvent(Button.A, input.buttonEventValue(ButtonEvent.Click), () => {
     if (Math.randomBoolean()) {
     } else {
     }
@@ -34,7 +34,7 @@ input.onButtonEvent(Button.A, ButtonEvent.Click, () => {
 Now, put a ``||basic:show icon||`` block inside both the ``||logic:if||`` and the ``||logic:else||``. Pick images to mean ``heads`` and ``tails``.
 
 ```blocks
-input.onButtonEvent(Button.A, ButtonEvent.Click, () => {
+input.onButtonEvent(Button.A, input.buttonEventValue(ButtonEvent.Click), () => {
     if (Math.randomBoolean()) {
         basic.showIcon(IconNames.Skull)
     } else {
@@ -52,7 +52,7 @@ Press button **A** in the simulator to try the coin toss code.
 You can animate the coin toss to add the feeling of suspense. Place different ``||basic:show icon||`` blocks before the ``||logic:if||`` to show that the coin is flipping.
 
 ```blocks
-input.onButtonEvent(Button.A, ButtonEvent.Click, () => {
+input.onButtonEvent(Button.A, input.buttonEventValue(ButtonEvent.Click), () => {
     basic.showIcon(IconNames.Diamond)
     basic.showIcon(IconNames.SmallDiamond)
     basic.showIcon(IconNames.Diamond)

docs/projects/love-meter.md

@@ -11,7 +11,7 @@ Make a love meter, how sweet! The @boardname@ is feeling the love, then sometime
 Let's build a **LOVE METER** machine. Place an ``||input:on pin pressed||`` block to run code when pin **0** is pressed. Use ``P0`` from the list of pin inputs.
 
 ```blocks
-input.onPinTouchEvent(TouchPin.P0, ButtonEvent.Down, () => {
+input.onPinTouchEvent(TouchPin.P0, input.buttonEventValue(ButtonEvent.Down), () => {
 });
 ```
 
@@ -20,7 +20,7 @@ input.onPinTouchEvent(TouchPin.P0, ButtonEvent.Down, () => {
 Using ``||basic:show number||`` and ``||Math:pick random||`` blocks, show a random number from `0` to `100` when pin **0** is pressed.
 
 ```blocks
-input.onPinTouchEvent(TouchPin.P0, ButtonEvent.Down, () => {
+input.onPinTouchEvent(TouchPin.P0, input.buttonEventValue(ButtonEvent.Down), () => {
     basic.showNumber(randint(0, 100));
 });
 ```
@@ -34,7 +34,7 @@ Show ``"LOVE METER"`` on the screen when the @boardname@ starts.
 
 ```blocks
 basic.showString("LOVE METER");
-input.onPinTouchEvent(TouchPin.P0, ButtonEvent.Down, () => {
+input.onPinTouchEvent(TouchPin.P0, input.buttonEventValue(ButtonEvent.Down), () => {
     basic.showNumber(randint(0, 100));
 });
 ```

docs/projects/mini-chat.md

@@ -12,7 +12,7 @@ Use ``||input:on button pressed||`` to send a text message over radio with ``||r
 Every @boardname@ nearby will receive this message.
 
 ```blocks
-input.onButtonEvent(Button.A, ButtonEvent.Down, () => {
+input.onButtonEvent(Button.A, input.buttonEventValue(ButtonEvent.Down), () => {
     radio.sendString("Yo");
 });
 ```
@@ -41,7 +41,7 @@ radio.onReceivedString(function (receivedString) {
 Press button **A** on the simulator, you will notice that a second @boardname@ appears (if your screen is too small, the simulator might decide not to show it). Try pressing **A** again and notice that the "Yo" message gets displayed on the other @boardname@.
 
 ```blocks
-input.onButtonEvent(Button.A, ButtonEvent.Down, () => {
+input.onButtonEvent(Button.A, input.buttonEventValue(ButtonEvent.Down), () => {
     radio.sendString("Yo");
 });
 radio.onReceivedString(function (receivedString) {

docs/projects/name-badge.md

@@ -13,7 +13,7 @@ First, let's get your name to display on the screen.
 From the ``||input:Input||`` Toolbox drawer, drag an ``||input:on button A pressed||`` block onto the Workspace.
 
 ```blocks
-input.onButtonEvent(Button.A, ButtonEvent.Click, function () {
+input.onButtonEvent(Button.A, input.buttonEventValue(ButtonEvent.Click), function () {
 
 })
 ```
@@ -23,7 +23,7 @@ input.onButtonEvent(Button.A, ButtonEvent.Click, function () {
 From the ``||basic:Basic||`` Toolbox drawer drag a ``||basic:show string||`` block into the ``||input:on button A pressed||`` block.
 
 ```blocks
-input.onButtonEvent(Button.A, ButtonEvent.Click, function () {
+input.onButtonEvent(Button.A, input.buttonEventValue(ButtonEvent.Click), function () {
     basic.showString("Hello!")
 })
 ```
@@ -33,7 +33,7 @@ input.onButtonEvent(Button.A, ButtonEvent.Click, function () {
 In the ``||basic:show string||`` block, type your name.
 
 ```blocks
-input.onButtonEvent(Button.A, ButtonEvent.Click, function () {
+input.onButtonEvent(Button.A, input.buttonEventValue(ButtonEvent.Click), function () {
     basic.showString("My Name")
 })
 ```
@@ -43,7 +43,7 @@ input.onButtonEvent(Button.A, ButtonEvent.Click, function () {
 Go to the simulator and test your name badge by pressing button **A**.
 
 ```sim
-input.onButtonEvent(Button.A, ButtonEvent.Click, function () {
+input.onButtonEvent(Button.A, input.buttonEventValue(ButtonEvent.Click), function () {
     basic.showString("My Name")
 })
 ```

docs/projects/robot-unicorn.md

@@ -123,7 +123,7 @@ basic.forever(function () {
 **MakeCode blocks for the Robot Unicorn controller**
 
 ```blocks
-input.onButtonEvent(Button.AB, ButtonEvent.Down, function () {
+input.onButtonEvent(Button.AB, input.buttonEventValue(ButtonEvent.Down), function () {
     radio.sendNumber(4)
     basic.showLeds(`
         # . . . #

docs/projects/rotary-dial-radio.md

@@ -83,7 +83,7 @@ Now that we are detecting pulses, we can use a variable to count them too. In th
 
 ```blocks
 let pulseCount = 0
-input.onButtonEvent(Button.A, ButtonEvent.Down, function () {
+input.onButtonEvent(Button.A, input.buttonEventValue(ButtonEvent.Down), function () {
     basic.showNumber(pulseCount)
     pulseCount = 0
 })

docs/projects/smiley-buttons.md

@@ -12,7 +12,7 @@ Code the buttons on the @boardname@ to show that it's happy or sad.
 Place a ``||input:on button pressed||`` block to run code when button **A** is pressed.
 
 ```blocks
-input.onButtonEvent(Button.A, ButtonEvent.Click, () => { 
+input.onButtonEvent(Button.A, input.buttonEventValue(ButtonEvent.Click), () => { 
 });
 ```
 
@@ -21,7 +21,7 @@ input.onButtonEvent(Button.A, ButtonEvent.Click, () => {
 Place a ``||basic:show leds||`` block inside ``||input:on button pressed||`` to display a smiley on the screen. Press the **A** button in the simulator to see the smiley.
 
 ```blocks
-input.onButtonEvent(Button.A, ButtonEvent.Click, () => { 
+input.onButtonEvent(Button.A, input.buttonEventValue(ButtonEvent.Click), () => { 
     basic.showLeds(`
         # # . # #
         # # . # #
@@ -37,7 +37,7 @@ input.onButtonEvent(Button.A, ButtonEvent.Click, () => {
 Add ``||input:on button pressed||`` and ``||basic:show leds||`` blocks to display a frowny when button **B** is pressed.
 
 ```blocks
-input.onButtonEvent(Button.B, ButtonEvent.Click, () => { 
+input.onButtonEvent(Button.B, input.buttonEventValue(ButtonEvent.Click), () => { 
     basic.showLeds(`
         # # . # #
         # # . # #
@@ -53,7 +53,7 @@ input.onButtonEvent(Button.B, ButtonEvent.Click, () => {
 Add a secret mode that happens when **A** and **B** are pressed together. For this case, add multiple ``||basic:show leds||`` blocks to create an animation.
 
 ```blocks
-input.onButtonEvent(Button.AB, ButtonEvent.Click, () => {
+input.onButtonEvent(Button.AB, input.buttonEventValue(ButtonEvent.Click), () => {
     basic.showLeds(`
         . . . . .
         # . # . .

docs/projects/snap-the-dot.md

@@ -59,7 +59,7 @@ Use a ``||input:on button pressed||`` block to handle the **A** button. Put in a
 
 ```blocks
 let sprite = game.createSprite(2, 2)
-input.onButtonEvent(Button.A, ButtonEvent.Click, function () {
+input.onButtonEvent(Button.A, input.buttonEventValue(ButtonEvent.Click), function () {
     if (sprite.get(LedSpriteProperty.X) == 2) {
     } else {
     }
@@ -77,7 +77,7 @@ Finally, pull out an ``||game:add score||`` and a ``||game:game over||`` block t
 
 ```blocks
 let sprite = game.createSprite(2, 2)
-input.onButtonEvent(Button.A, ButtonEvent.Click, function () {
+input.onButtonEvent(Button.A, input.buttonEventValue(ButtonEvent.Click), function () {
     if (sprite.get(LedSpriteProperty.X) == 2) {
         game.addScore(1)
     } else {