Changeset 1126749
- Timestamp:
- 04/03/2015 04:01:20 AM (11 years ago)
- Location:
- custom-stock-ticker/trunk
- Files:
-
- 4 edited
-
stock_ticker_admin.php (modified) (10 diffs)
-
stock_ticker_display.php (modified) (12 diffs)
-
stock_ticker_script.js (modified) (1 diff)
-
stock_ticker_style.css (modified) (4 diffs)
Legend:
- Unmodified
- Added
- Removed
-
custom-stock-ticker/trunk/stock_ticker_admin.php
r1115013 r1126749 96 96 PRIMARY KEY (id) 97 97 ) {$charset};"; 98 98 //NOTE: display_number is depricated. remove later? 99 99 //NOTE: Extra spaces for readability screw up dbDelta, so we remove those 100 100 $sql = preg_replace('/ +/', ' ', $sql); … … 119 119 ); 120 120 sp_add_row($values); 121 add_option('stock_ticker_per_category_stock_lists', array('default' => ' GOOG,YHOO,AAPL'));121 add_option('stock_ticker_per_category_stock_lists', array('default' => '^GSPC,^IXIC,^NYA,MMM,AXP,T,BA,CAT,CVX,CSCO,KO,DD,XOM,GE,GS,HD,INTC,IBM,JNJ,JPM,MCD,MRK,MSFT,NKE,PFE,PG,TRV,UNH,UTX,VZ,V,WMT,DIS')); 122 122 add_option('stock_ticker_version', $current_version); 123 123 add_option('stock_ticker_version_text', "Initial install v{$current_version}"); … … 244 244 //ON other shortcodes, should just reload the page 245 245 function stock_ticker_reset_options() { 246 update_option('stock_ticker_per_category_stock_lists', array('default' => ' GOOG,YHOO,AAPL')); //Important no spaces246 update_option('stock_ticker_per_category_stock_lists', array('default' => '^GSPC,^IXIC,^NYA,MMM,AXP,T,BA,CAT,CVX,CSCO,KO,DD,XOM,GE,GS,HD,INTC,IBM,JNJ,JPM,MCD,MRK,MSFT,NKE,PFE,PG,TRV,UNH,UTX,VZ,V,WMT,DIS')); //Important no spaces 247 247 248 248 $stock_ticker_default_settings = Array( … … 260 260 'font_family' => 'Arial', 261 261 'scroll_speed' => 60, 262 'display_number' => 2,263 262 'advanced_style' => 'margin:auto;', 264 263 'draw_vertical_lines' => true, … … 389 388 if ($ds_flag) stock_plugin_update_per_category_stock_lists(); 390 389 stock_ticker_update_display_options($id); //pass in the unchanged settings 391 stock_plugin_notice_helper("Changes saved (Random: ".rand().")"); //Remove after tracker #23768390 stock_plugin_notice_helper("Changes saved"); 392 391 } 393 392 elseif (isset($_POST['reset_options'])) { … … 480 479 If that category has no stocks associated with it, the default list is loaded. 481 480 </p> 482 <p>For Nasdaq, use <code>^IXIC</code>. For S&P500, use <code>^GSPC</code>. Unfortunately, DOW is currently not available.</p> 483 <p>Here are some example stocks you can try:<br/> 484 BAC, CFG, AAPL, YHOO, SIRI, VALE, QQQ, GE, MDR, RAD, BABA, SUNE, FB, BBRY, MSFT, MU, PFE, F, GOOG</p>"; 481 <p>For Nasdaq, use <code>^IXIC</code>. For S&P500, use <code>^GSPC</code>. For NYSE Composite use <code>^NYA</code>. Unfortunately, DOW is currently not available.</p>"; 485 482 if ($ds_flag) stock_plugin_create_per_category_stock_lists(); 486 483 else stock_plugin_create_stock_list_section($shortcode_settings); … … 502 499 HEREDOC; 503 500 504 echo do_shortcode("[stock-ticker{$the_name}]"); //Feature Improvement: see tracker #22775501 echo do_shortcode("[stock-ticker{$the_name}]"); 505 502 echo <<<HEREDOC 506 503 <p>To preview your latest changes you must first save changes.</p> … … 624 621 625 622 //NOTE: stock_ticker_validate_integer($new_val, $min_val, $max_val, $default) 626 $tmp = relevad_plugin_validate_integer($_POST['max_display'], $validation_params['max_display'][0], $validation_params['max_display'][1], false); 627 if ($tmp) { $settings_new['display_number'] = $tmp; } 628 623 629 624 $tmp = relevad_plugin_validate_integer($_POST['scroll_speed'], $validation_params['scroll_speed'][0], $validation_params['scroll_speed'][1], false); 630 625 if ($tmp) { $settings_new['scroll_speed'] = $tmp; } … … 647 642 if ($tmp != '' && substr($tmp, -1) != ';') { $tmp .= ';'; } //poormans making of a css rule 648 643 $settings_new['advanced_style'] = $tmp; 649 650 //issue warning if scaling is going to lead to overlap.651 $minimum_width = $settings_new['font_size'] * 4 * 4; //point font * 4 characters * 4 elements ~ aproximate652 $entry_width = $settings_new['width'] / $settings_new['display_number'];653 if ($minimum_width > $entry_width) {654 stock_plugin_notice_helper("<b class='sp-warning'>Warning:</b> Chosen font size of {$settings_new['font_size']} when used with width of {$settings_new['width']} would cause overlap of text.<br/>Ignoring display_number of {$settings_new['display_number']} to compensate", 'error');655 }656 644 657 645 //last handle this shortcode's stock list and name if either exist … … 692 680 693 681 <br /> 694 <label for="input_max_display">Number of stocks displayed on the screen at one time: </label>695 <input id="input_max_display" name="max_display" type="text" value="{$shortcode_settings['display_number']}" class="itxt" style="width:40px;" />696 682 <label for="input_scroll_speed">Scroll speed (Pixels per second): </label> 697 683 <input id="input_scroll_speed" name="scroll_speed" type="text" value="{$shortcode_settings['scroll_speed']}" class="itxt" /> -
custom-stock-ticker/trunk/stock_ticker_display.php
r1114920 r1126749 95 95 $stock_data_list = array_values($tmp['valid_stocks']); //NOTE: its ok to throw away the keys, they aren't used anywhere 96 96 97 97 98 if (empty($stock_data_list)) { 98 99 return "<!-- WARNING: no stock list found {$cats_used} -->"; //don't fail completely silently 99 100 } 100 101 101 $num_ticker_to_display = $shortcode_settings['display_number'];102 102 $width = $shortcode_settings['width']; 103 $entry_width = $width / $num_ticker_to_display; 104 105 //****** fix scaling ******* 106 //this section is to fix the width/height attributes so that incase the ticker would have had overlapping text, it fixes itself to a minimum acceptable level 107 $minimum_width = $shortcode_settings['font_size'] * 4 * 4; //point font * 4 characters * 4 elements ~ aproximate 108 $entry_width = max($minimum_width, $entry_width); //NOTE: warning issued in admin config update options 109 //****** end fix scaling ******* 110 111 //NOTE: To make scrolling smooth, we want the number of stocks to always be greater than the number to be displayed simultaniously on the page 112 $tmp = $stock_data_list; //holding for use within whileloop 113 while ($num_ticker_to_display >= count($stock_data_list)) { 114 $stock_data_list = array_merge($tmp, $stock_data_list); //This should increase the length of stock_data_list to an even multiple of its original length 115 } 116 117 $output = stock_ticker_create_css_header($entry_width, $shortcode_settings, count($stock_data_list)); 118 $output .= stock_ticker_create_ticker ($entry_width, $shortcode_settings, $stock_data_list); 103 104 $output = stock_ticker_create_css_header($shortcode_settings, count($stock_data_list)); 105 $output .= stock_ticker_create_ticker ($shortcode_settings, $stock_data_list); 119 106 120 107 return $output; … … 122 109 123 110 //Creates the internal style sheet for all of the various elements. 124 function stock_ticker_create_css_header($ entry_width, $shortcode_settings, $num_displayed_stocks) {111 function stock_ticker_create_css_header($shortcode_settings, $num_displayed_stocks) { 125 112 126 113 $id = $shortcode_settings['id']; … … 130 117 $bgcolor = $shortcode_settings['bg_color']; 131 118 $scroll_speed = $shortcode_settings['scroll_speed']; 132 119 $font_size = $shortcode_settings['font_size']; 133 120 $number_of_values = array_sum($shortcode_settings['data_display']); 134 if ($shortcode_settings['draw_triangle'] == 1) { 135 $element_width = round(($entry_width - 20) / $number_of_values, 0, PHP_ROUND_HALF_DOWN); 136 } else { 137 $element_width = round($entry_width / $number_of_values, 0, PHP_ROUND_HALF_DOWN); 138 } 121 139 122 //variables to be used inside the heredoc 140 123 //NOTE: entries are an individual stock with multiple elements … … 147 130 148 131 $vbar_height = round($height * 0.7, 0, PHP_ROUND_HALF_DOWN); //used for the vertical bar only 149 //$vbar_top = round(($height - $vbar_height) / 2, 0, PHP_ROUND_HALF_DOWN); //no longer used was for '.stock_ticker_vertical_line top: {$vbar_top}px;'150 $vbar_m_bottom = $height - $vbar_height;151 132 //NOTE: stock_ticker_{$id} is actually a class, so we can properly have multiple per page, IDs would have to be globally unique 152 $animation_time = $entry_width / $scroll_speed * $num_displayed_stocks;153 $slider_width = $entry_width * $num_displayed_stocks;154 $double_slider_width = ($slider_width * 2) + 20; // 20 extra px added just in case155 133 return <<<HEREDOC 134 <p style="display:none"></p> <!-- This is a bugfix to prevent wordpress from sticking this stylesheet inside a p tag in posts --> 156 135 <style type="text/css" scoped> 157 136 .stock_ticker_{$id} { … … 159 138 width: {$width}px; 160 139 height: {$height}px; 140 line-height: {$height}px; 141 font-size: {$font_size}px; 161 142 background-color: {$bgcolor}; 162 143 {$shortcode_settings['advanced_style']} 163 144 } 164 145 .stock_ticker_{$id} .stock_ticker_slider { 165 width: {$slider_width}px;166 146 height: {$height}px; 167 147 } 168 148 .stock_ticker_{$id} .stock_ticker_entry { 169 position: absolute;170 width: {$entry_width}px;171 height: {$height}px;172 color: ${text_color};173 }149 position: relative; 150 font-size: {$font_size}px; 151 height: {$height}px; 152 color: {$text_color}; 153 } 174 154 .stock_ticker_{$id} .stock_ticker_element { 175 opacity: {$shortcode_settings['text_opacity']}; 176 font-size: {$shortcode_settings['font_size']}px; 177 font-family: {$shortcode_settings['font_family']},serif; 178 width: {$element_width}px; 179 height: {$height}px; 180 line-height: {$height}px; 155 opacity: {$shortcode_settings['text_opacity']}; 156 font-size: {$font_size}px; 157 font-family: {$shortcode_settings['font_family']},serif; 158 height: {$height}px; 159 line-height: {$height}px; 181 160 } 182 161 .stock_ticker_{$id} .stock_ticker_triangle { 183 left: {$triangle_left_position}px;184 top: {$triangle_top_position}px;162 left: {$triangle_left_position}px; 163 top: {$triangle_top_position}px; 185 164 } 186 165 .stock_ticker_{$id} .stock_ticker_triangle.st_red { /*face down */ 187 border-left: {$triangle_size}px solid transparent;188 border-right: {$triangle_size}px solid transparent;189 border-top: {$triangle_size}px solid red;166 border-left: {$triangle_size}px solid transparent; 167 border-right: {$triangle_size}px solid transparent; 168 border-top: {$triangle_size}px solid red; 190 169 } 191 170 .stock_ticker_{$id} .stock_ticker_triangle.st_green { /*face up */ … … 195 174 } 196 175 .stock_ticker_{$id} .stock_ticker_vertical_line { 197 height:{$vbar_height}px;198 margin-bottom: -{$vbar_m_bottom}px;176 line-height: {$vbar_height}px; 177 color: {$bgcolor}; 199 178 } 200 179 201 180 .stock_ticker_{$id} .ticker-wrapper { 202 width: {$double_slider_width}px; /*The wrapper needs to be AT LEAST this wide to prevent wrapping. Wider is fine. */ 203 } 204 205 .stock_ticker_{$id} .css3-ticker-scroll { 206 position:relative; 207 float:left; 208 /* width:auto; This was here for a good reason at one point but I don't remember why, so commenting out for now */ 209 -webkit-animation: marquee {$animation_time}s linear infinite; 210 -moz-animation: marquee {$animation_time}s linear infinite; 211 animation: marquee {$animation_time}s linear infinite; /*Assign the animation to the main ticker container*/ 212 } 213 181 width: 50000px; 182 /* Required! if not long enough, the second copy of the ticker will wrap to a second line */ 183 /* All javascript width calculations will fail if this happens! NOTE: stock_ticker_script.js sets this to the correct value*/ 184 } 214 185 215 186 </style> … … 219 190 220 191 /********** Creates the ticker html ***********/ 221 //function stock_ticker_create_ticker($id, $entry_width, $st_ds, $data_list, $scroll_speed) { 222 function stock_ticker_create_ticker($entry_width, $shortcode_settings, $data_list) { 192 function stock_ticker_create_ticker($shortcode_settings, $data_list) { 223 193 224 194 $id = $shortcode_settings['id']; 225 226 $left_position = 0;227 195 $stock_entries = ''; 228 196 … … 231 199 continue; 232 200 } 233 $stock_entries .= "<div class='stock_ticker_entry' style='left: {$left_position}px;'><!-- \n -->";201 $stock_entries .= "<div class='stock_ticker_entry'>"; 234 202 $stock_entries .= stock_ticker_create_entry($stock_data, $shortcode_settings); 235 $stock_entries .= "</div><!-- \n -->"; 236 $left_position += $entry_width; 203 $stock_entries .= "</div>"; 237 204 } 238 205 … … 257 224 //NOTE: closest(div) may not be necessary 258 225 function stock_ticker_create_jquery($shortcode_settings) { 259 226 // $json_settings = json_encode($shortcode_settings); 260 227 return <<<JQC 261 228 <script type="text/javascript"> … … 267 234 scroll_speed: {$shortcode_settings['scroll_speed']} 268 235 }; 269 stock_ticker_start _js(ticker_config);236 stock_ticker_start(ticker_config); 270 237 </script> 271 238 JQC; … … 299 266 $data_item = $stock_data['stock_sym']; 300 267 301 if ($data_item == "^GSPC"){ //replace with more readable versions 302 $data_item = "S&P500"; 303 } elseif($data_item == "^IXIC"){ 304 $data_item = "NASDAQ"; 268 switch ($data_item) { // replace 269 case "^GSPC": 270 $data_item = "S&P500"; 271 break; 272 case "^IXIC": 273 $data_item = "NASDAQ"; 274 break; 275 case "^NYA": 276 $data_item = "NYSE"; 277 break; 305 278 } 306 279 $text_color = ($change_all) ? $color_class : ''; //NOTE: This carries through into #2 … … 334 307 //creates the line after each entry. 335 308 if($shortcode_settings['draw_vertical_lines'] == 1) { 336 $output .= "<div class='stock_ticker_vertical_line'> </div><!-- \n -->";309 $output .= "<div class='stock_ticker_vertical_line'> </div><!-- \n -->"; 337 310 } 338 311 -
custom-stock-ticker/trunk/stock_ticker_script.js
r1110775 r1126749 1 //NOTE: only used if modernizer fails 2 function slider_scroll(target, speed, current_entry, end_entry){ 3 var entry = target.find('.stock_ticker_entry'); 4 //entry width is used to move the entries as the slider slides beneath them 5 var entry_width = entry.first().width(); //NOTE: all entries are the same width, so just pick 1 6 7 if (! entry.eq(current_entry).length) { //jquery object -> get all entries -> get indexed entry, jquery always retuns a list 8 current_entry = 0; //if current entry goes out of bounds 9 } 10 11 var time = entry_width / (speed / 1000); 12 //animate does a specific set of css transformations over a set duration smoothly 13 target.animate({left : "-=" + entry_width}, time, 'linear',function(){ // move slider div to the left 14 var new_offset = entry.eq(end_entry).position().left + entry_width; //after animation complete, move the first child to be last child by left offset 15 entry.eq(current_entry).css({left :new_offset}); 16 slider_scroll(target, speed, current_entry + 1, current_entry); //and issue a new animate command 17 //NOTE: the entries are cycling around, so first its 0 1 2 3, next its 1 2 3 0 then its 2 3 0 1 etc 18 }); 1 function slider_scroll(slider, ticker_width, time){ // this is the jQuery animation function 2 slider.css("left", "0px"); // reset offset of main ticker 3 //.animate({property: value}, duration, callback) 4 slider.animate({left: -ticker_width}, time, 'linear', // animate the slider to move to the left 5 function(){slider_scroll(slider, ticker_width, time)} // then callback to this function to start again 6 ); 19 7 } 20 8 21 //Since tickers can be called multiple times per page, no sense checking the if conditions each time the function is invoked 22 if ((Modernizr.cssanimations) && (Modernizr.csstransforms)) { // If animation & transforms are supported 23 var stock_ticker_start_js = function(config) { 24 config['ticker_root'].find('.ticker-main').addClass("css3-ticker-scroll"); // Then apply the class which starts the CSS3 animation 25 config['ticker_root'].find('.ticker-second').addClass("css3-ticker-scroll"); 26 jQuery(config['ticker_root']).fadeTo(1000, config['final_opacity']); 27 }; 28 } else { // If animation & transforms are not supported 29 var stock_ticker_start_js = function(config) { 30 config['ticker_root'].find('.ticker-second').remove(); // remove the second ticker copy 31 var scroller = config['ticker_root']; 32 var slider = scroller.find('.stock_ticker_slider'); 33 var entry = scroller.find('.stock_ticker_entry'); //saves a list of these elms 34 var last_entry = entry.length - 1; 9 function set_wrapper_width(root) { 10 ticker_width=parseInt(root.find('.ticker-main').css('width')); // Get the computed width of the entire ticker 11 root.find('.ticker-wrapper').attr('style', "width:" + (ticker_width * 2 + 10) + "px"); // Set the width of the wrapper element to be twice the length of a ticker (so they both sit on one line) 12 return ticker_width; 13 } 35 14 36 scroller.fadeTo(1000, config['final_opacity']); 37 slider_scroll(slider, config["scroll_speed"], 0, last_entry); 38 }; 15 var stock_ticker_start = function(config) { 16 var root = config['ticker_root']; //this will return the base element for the current ticker, e.g. [stock_ticker_4] 17 var slider = root.find('.stock_ticker_slider'); //get both sliders within that ticker 18 var entry = root.find('.stock_ticker_entry'); //get one full list of stock entries 19 var maxLoop = 0; 20 while (parseInt(slider.css('width')) < parseInt(root.css('width')) && maxLoop < 40) { 21 //is the slider too short? (most be equal to or greather than ticker width) 22 slider = root.find('.stock_ticker_slider'); 23 slider.append(entry.clone()); //slider too short, stick a copy of all the stock entries onto both sliders, then we'll check again 24 maxLoop++; // !IMPORTANT! this ensures that the while loop will not infinitely loop in the event something goes wrong somehow 25 } 26 var ticker_width = set_wrapper_width(root); // gets the width of 1 slider; also sets the width of the wrapper element 27 var time = Math.ceil(ticker_width / config['scroll_speed']); // Define the animation time in seconds 28 if ((Modernizr.cssanimations) && (Modernizr.csstransforms)) { 29 // Modernizr is an array created elsewhere, we are checking if these values are true or false. true = supported 30 slider.addClass("css3-ticker-scroll"); // add the class that has the css3 animation on it 31 slider.css("animation-duration", (time) + "s"); // set the total animation time based on computed width 32 } else { // if either animation or transforms are not supported, use jQuery animate 33 slider_scroll(slider, ticker_width, time/1000); // this function begins jQuery animate. Time is in miliseconds, so divide by 1000 34 } 35 root.fadeTo(1000, config['final_opacity']); // fade-in ticker 39 36 } -
custom-stock-ticker/trunk/stock_ticker_style.css
r1115013 r1126749 9 9 10 10 .stock_ticker_slider{ 11 position:absolute; 11 width:auto; 12 position:relative; 13 display:inline-block; 12 14 background-color: transparent; 13 15 } 14 16 15 17 .stock_ticker_entry{ 16 position: absolute; 18 position: relative; 19 float:left; 20 width:auto; 17 21 } 18 22 19 23 .stock_ticker_element{ 24 margin: 0px 0.3em; 20 25 display: inline-block; 21 26 text-align: center; 27 width: auto; 22 28 } 23 29 24 30 .stock_ticker_triangle{ 25 margin: 0px;31 margin: 0px 0.3em; 26 32 width: 0px; 27 33 height: 0px; … … 30 36 31 37 .stock_ticker_vertical_line{ 38 margin: 0px 0.5em; 32 39 position: relative; 33 background-color:#D7D7D7;40 border-left: 2px solid gray; 34 41 opacity:0.3; 35 width:2px;36 42 display: inline-block; 37 left: 5px;38 43 } 39 44 … … 43 48 44 49 .stock_ticker .st_red { 45 color: red;50 color: red; 46 51 } 47 52 .stock_ticker .st_green { 48 color: green;53 color: green; 49 54 } 50 55 .stock_ticker .st_gray { 51 color: gray;56 color: gray; 52 57 } 53 58 54 59 /* keyframes are defined here because firefox has a bug wherein keyframes don't work in scoped CSS & wanted to keep them together */ 55 60 @-webkit-keyframes marquee { 56 0% { transform: translateX(0px); } /*Start the animation at the left */57 100% { transform: translateX(-100%); } /*Loop the ticker once it has scrolled 100% of its entire width */61 0% { -webkit-transform: translateX(0px); } /*Start the animation at the left */ 62 100% { -webkit-transform: translateX(-100%); } /*Loop the ticker once it has scrolled 100% of its entire width */ 58 63 } 59 64 @-moz-keyframes marquee { 60 0% { transform: translateX(0px); }61 100% { transform: translateX(-100%); }65 0% { -moz-transform: translateX(0px); } 66 100% { -moz-transform: translateX(-100%); } 62 67 } 63 68 @keyframes marquee { … … 66 71 } 67 72 68 .ticker-wrapper:hover .css3-ticker-scroll{ /* TODO - later, we can add a separate class for this that will be added when pause is on */ 73 .css3-ticker-scroll { 74 position:relative; 75 float:left; 76 -webkit-animation-name: marquee; 77 -webkit-animation-timing-function: linear; 78 -webkit-animation-iteration-count: infinite; 79 -moz-animation-name: marquee; 80 -moz-animation-timing-function: linear; 81 -moz-animation-iteration-count: infinite; 82 animation-name: marquee; 83 animation-timing-function: linear; 84 animation-iteration-count: infinite; 85 } 86 87 .ticker-wrapper:hover .css3-ticker-scroll{ /* TODO - later, maybe we can add a separate class for this that will be added when pause is on */ 69 88 -webkit-animation-play-state: paused; 70 89 -moz-animation-play-state: paused !important; /* firefox doesn't listen to this unless it is important */
Note: See TracChangeset
for help on using the changeset viewer.