https://www.kagafei.com/jp/contpt-assets/NormalBanner/assets/render.js

1/* globals define */
2define(['knockout', 'jquery', 'text!./template.html', 'css!./styles/design.css'], function(ko, $, template, css) {
3  'use strict';
4  // ----------------------------------------------
5  // Define a Knockout ViewModel for your template
6  // ----------------------------------------------
7  var SampleComponentViewModel = function(args) {
8    var self = this,
9        SitesSDK = args.SitesSDK;
10    
11    // store the args
12    self.mode = args.viewMode;
13    self.id = args.id;
14    
15    // create the observables
16    self.ImgPos = ko.observable();
17    self.ViewCSS = ko.observable();
18    
19    // handle initialization
20    self.componentLayoutInitialized = ko.observable(false);
21    self.customSettingsDataInitialized = ko.observable(false);
22    self.initialized = ko.computed(function () {
23      return self.customSettingsDataInitialized();
24    }, self);
25    
26    self.ContentList = ko.observableArray();
27
28    // appinfo.json縺ｮ險ｭ螳壼€､繧貞叙蠕励＠HTML荳翫�蛟､遲峨ｒ譖ｴ譁ｰ
29    self.updateCustomSettingsData = $.proxy(function (customData) {
30      if (customData) {
31        self.ImgPos(customData.ImgPos);
32        self.ContentList.removeAll();
33        self.ContentList.push({Image: SCSRenderAPI.getThemeUrlPrefix() + '/assets/images/' + customData.Item_1.Image, Alt: customData.Item_1.Alt, LinkURL: customData.Item_1.LinkURL, Title: customData.Item_1.Title, Caption: customData.Item_1.Caption, Day: customData.Item_1.Day, Tag: customData.Item_1.Tag, NewFlg: customData.Item_1.NewFlg});
34        if (customData.ContentLine >= 2){
35          self.ContentList.push({Image: SCSRenderAPI.getThemeUrlPrefix() + '/assets/images/' + customData.Item_2.Image, Alt: customData.Item_2.Alt, LinkURL: customData.Item_2.LinkURL, Title: customData.Item_2.Title, Caption: customData.Item_2.Caption, Day: customData.Item_2.Day, Tag: customData.Item_2.Tag, NewFlg: customData.Item_2.NewFlg});
36        }
37        if (customData.ContentLine >= 3){
38          self.ContentList.push({Image: SCSRenderAPI.getThemeUrlPrefix() + '/assets/images/' + customData.Item_3.Image, Alt: customData.Item_3.Alt, LinkURL: customData.Item_3.LinkURL, Title: customData.Item_3.Title, Caption: customData.Item_3.Caption, Day: customData.Item_3.Day, Tag: customData.Item_3.Tag, NewFlg: customData.Item_3.NewFlg});
39        }
40        if (customData.ContentLine >= 4){
41          self.ContentList.push({Image: SCSRenderAPI.getThemeUrlPrefix() + '/assets/images/' + customData.Item_4.Image, Alt: customData.Item_4.Alt, LinkURL: customData.Item_4.LinkURL, Title: customData.Item_4.Title, Caption: customData.Item_4.Caption, Day: customData.Item_4.Day, Tag: customData.Item_4.Tag, NewFlg: customData.Item_4.NewFlg});
42        }
43        if (customData.ContentLine >= 5){
44          self.ContentList.push({Image: SCSRenderAPI.getThemeUrlPrefix() + '/assets/images/' + customData.Item_5.Image, Alt: customData.Item_5.Alt, LinkURL: customData.Item_5.LinkURL, Title: customData.Item_5.Title, Caption: customData.Item_5.Caption, Day: customData.Item_5.Day, Tag: customData.Item_5.Tag, NewFlg: customData.Item_5.NewFlg});
45        }
46      }
47      
48      // 陦ｨ遉ｺ菴咲ｽｮ繝輔Λ繧ｰ縺ｫ繧医▲縺ｦ驕ｩ逕ｨ縺吶ｋ繧ｯ繝ｩ繧ｹ繧貞､画峩縺吶ｋ
49      if(customData.ImgPos == "蟾ｦ"){                       // 蟾ｦ
50        self.ViewCSS("box-system mainBlock");
51      }else if(customData.ImgPos == "荳�"){                 // 荳�
52        self.ViewCSS("box-system subBlock1 contntline" + customData.ContentLine );
53      }else if(customData.ImgPos == "蜿ｳ"){                 // 蜿ｳ
54        self.ViewCSS("box-system mainBlock2");
55      }else if(customData.ImgPos == "荳�"){                 // 荳�
56        self.ViewCSS("box-system subBlock2 contntline" + customData.ContentLine);
57      }else if(customData.ImgPos == "陬ｽ蜩∫畑"){             // 陬ｽ蜩∫畑
58        self.ViewCSS("box-products contntline" + customData.ContentLine);
59      }else if(customData.ImgPos == "繧ｽ繝ｪ繝･繝ｼ繧ｷ繝ｧ繝ｳ逕ｨ"){   // 繧ｽ繝ｪ繝･繝ｼ繧ｷ繝ｧ繝ｳ逕ｨ
60        self.ViewCSS("box-solution contntline" + customData.ContentLine);
61      }else if(customData.ImgPos == "莠倶ｾ狗畑"){             // 莠倶ｾ狗畑
62        self.ViewCSS("box-case-area contntline");
63      }else if(customData.ImgPos == "陬ｽ蜩∬ｩｳ邏ｰ逕ｨ"){         // 陬ｽ蜩∬ｩｳ邏ｰ逕ｨ
64        self.ViewCSS("box-product main");
65      }
66      
67      self.customSettingsDataInitialized(true);
68    }, self);
69    self.updateSettings = function(settings) {
70      if (settings.property === 'customSettingsData') {
71        self.updateCustomSettingsData(settings.value);
72      }
73    };
74    // 螟画峩縺輔ｌ縺溷�螳ｹ縺ｧ險ｭ螳壽峩譁ｰ縺ｮ繝ｪ繧ｹ繝翫�繧堤匳骭ｲ
75    SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.SETTINGS_UPDATED, $.proxy(self.updateSettings, self));
76
77    //
78    // 繧ｳ繝ｳ繝昴�繝阪Φ繝医�蛻晄悄險ｭ螳壼€､繧貞渚譏�縺吶ｋ
79    //
80    SitesSDK.getProperty('customSettingsData', self.updateCustomSettingsData);
81  };
82
83  // 竊薙�蝓ｺ譛ｬ螟峨∴縺ｪ縺上※濶ｯ縺�
84
85  // ----------------------------------------------
86  // Create a knockout based component implemention
87  // ----------------------------------------------
88  var SampleComponentImpl = function(args) {
89    // Initialze the custom component

90    this.init(args);
91  };
92  // initialize all the values within the component from the given argument values
93  SampleComponentImpl.prototype.init = function(args) {
94    this.createViewModel(args);
95    this.createTemplate(args);
96    this.setupCallbacks();
97  };
98  // create the viewModel from the initial values
99  SampleComponentImpl.prototype.createViewModel = function(args) {
100    // create the viewModel
101    this.viewModel = new SampleComponentViewModel(args);
102  };
103  // create the template based on the initial values
104  SampleComponentImpl.prototype.createTemplate = function(args) {
105    // create a unique ID for the div to add, this will be passed to the callback
106    this.contentId = args.id + '_content_' + args.viewMode;
107    // create a hidden custom component template that can be added to the DOM
108    this.template = '<div id="' + this.contentId + '">' + 
109      template + 
110      '</div>';      
111  };
112  //
113  // SDK Callbacks
114  // setup the callbacks expected by the SDK API
115  //
116  SampleComponentImpl.prototype.setupCallbacks = function() {
117    //
118    // callback - render: add the component into the page
119    //
120    this.render = $.proxy(function(container) {
121      var $container = $(container);
122      // add the custom component template to the DOM
123      $container.append(this.template);
124      // apply the bindings
125      ko.applyBindings(this.viewModel, $('#' + this.contentId)[0]);
126      
127      // 蜍慕噪蜃ｦ逅�′縺ゅｋ蝣ｴ蜷医�竊薙↓險倩ｿｰ
128      
129    }, this);
130    //
131    // callback - dispose: cleanup after component when it is removed from the page
132    //
133    this.dispose = $.proxy(function() {
134      // nothing required for this sample since knockout disposal will automatically clean up the node
135    }, this);
136  };
137  // ----------------------------------------------
138  // Create the factory object for your component
139  // ----------------------------------------------
140  var sampleComponentFactory = {
141    createComponent: function(args, callback) {
142      // return a new instance of the component
143      return callback(new SampleComponentImpl(args));
144    }
145  };
146  return sampleComponentFactory;
147});