API tools faq
paste
bokoness

עריכת הiframe

bokoness
Dec 23rd, 2020 (edited)
108
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 5.19 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8"/>
  6.     <title>ZIM - Code Creativity</title>
  7.     <script src="https://zimjs.org/cdn/1.3.2/createjs.js"></script>
  8.     <script src="https://zimjs.org/cdn/cat/02/zim.js"></script>
  9.     <script>
  10.         window.addEventListener('load', (event) => {
  11.  
  12.             function parentUrl () {
  13.                 return (window.location !== window.parent.location) ?
  14.                     document.referrer :
  15.                     document.location.href
  16.             }
  17.  
  18.             function updateAll (imgUrl, col, row) {
  19.                 //if(col && row) תציג את הנקודה הקודמת
  20.                 console.log('The image URL is :', imgUrl)
  21.                 var assets = [{
  22.                     src: imgUrl,
  23.                     id: 'mainImage',
  24.                 }]
  25.                 const frame = new Frame('fit', 1024, 768, light, dark, assets)
  26.                 frame.on('ready', () => {
  27.                     const stage = frame.stage
  28.                     let stageW = frame.width
  29.                     let stageH = frame.height
  30.  
  31.                     var rowNumber = 10
  32.                     var colNumber = 10
  33.  
  34.                     var con = new Container(800, 600)
  35.                     con.center()
  36.  
  37.                     asset('mainImage').scaleTo(con).center(con)
  38.  
  39.                     var stepperRow = new Stepper({
  40.                         min: 3,
  41.                         max: 20,
  42.                     })
  43.                     stepperRow.on('change', function () {
  44.                         updateTile()
  45.                     })
  46.                     stepperRow.currentValue = rowNumber
  47.                     stepperRow.sca(0.5).addTo().pos({
  48.                         'horizontal': 'center',
  49.                         'vertical': 'top',
  50.                         x: -100,
  51.                         y: 10,
  52.                     })
  53.  
  54.                     var stepperCol = new Stepper({
  55.                         min: 3,
  56.                         max: 20,
  57.                     })
  58.                     stepperCol.on('change', function () {
  59.                         updateTile()
  60.                     })
  61.                     stepperCol.currentValue = colNumber
  62.                     stepperCol.sca(0.5).addTo().pos({
  63.                         'horizontal': 'center',
  64.                         'vertical': 'top',
  65.                         x: 100,
  66.                         y: 10,
  67.                     })
  68.  
  69.                     var tile
  70.                     var selectChild = null
  71.  
  72.                     function updateTile () {
  73.                         if (tile) tile.dispose()
  74.  
  75.                         rowNumber = stepperRow.currentValue
  76.                         colNumber = stepperCol.currentValue
  77.  
  78.                         var rect = new Rectangle({
  79.                             color: 'rgba(256,0,0,0.01)',
  80.                             borderColor: 'rgba(256,0,0,0.5)',
  81.                             width: con.width / colNumber,
  82.                             height: con.height / rowNumber,
  83.                         })
  84.  
  85.                         tile = new Tile(rect, colNumber, rowNumber).center()
  86.                         tile.addTo(con)
  87.  
  88.                         loop(tile, function (rectChild) {
  89.                             rectChild.cur()
  90.                             rectChild.firstColor = rectChild.color
  91.                             rectChild.on('mousedown', function () {
  92.                                 loop(tile, function (rectChild2) {
  93.                                     rectChild2.color = rectChild2.firstColor
  94.                                 })
  95.                                 selectChild = rectChild
  96.                                 rectChild.color = 'rgba(256, 0, 0, 0.5)'
  97.                                 stage.update()
  98.                             })
  99.                         })
  100.                         stage.update()
  101.  
  102.                     }
  103.  
  104.                     var btn = new Button({
  105.                         width: 200,
  106.                         height: 50,
  107.                         label: 'שמור',
  108.                     })
  109.                     btn.addTo().pos({
  110.                         'horizontal': 'center',
  111.                         'vertical': 'bottom',
  112.                         x: 0,
  113.                         y: 30,
  114.                     })
  115.                     btn.on('mousedown', function () {
  116.                         let data = {
  117.                             numRow: rowNumber,
  118.                             numCol: colNumber,
  119.                             row: selectChild.tileRow,
  120.                             col: selectChild.tileCol,
  121.                         }
  122.                         parent.postMessage({
  123.                             data,
  124.                             action: 'updateAll',
  125.                         }, parentUrl())
  126.                     })
  127.  
  128.                     updateTile()
  129.  
  130.                     // put your code here
  131.  
  132.                     stage.update()
  133.                 })
  134.             }
  135.  
  136.             window.addEventListener('message', (event) => {
  137.                 updateAll(event.data)
  138.             })
  139.             console.log('page is fully loaded')
  140.         })
  141.  
  142.     </script>
  143.     <meta name="viewport" content="width=device-width, user-scalable=no"/>
  144. </head>
  145.  
  146. <body></body>
  147. </html>
  148.  
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!